Get rid of animScale for now.
rodzic
d3e01a4865
commit
6ee909e436
|
@ -9,7 +9,6 @@ import {
|
||||||
|
|
||||||
type AnimationTransformer = (
|
type AnimationTransformer = (
|
||||||
animPct: number,
|
animPct: number,
|
||||||
animScale: number,
|
|
||||||
symbol: SvgSymbolData
|
symbol: SvgSymbolData
|
||||||
) => SvgTransform[];
|
) => SvgTransform[];
|
||||||
|
|
||||||
|
@ -50,15 +49,13 @@ function pctToNegativeOneToOne(pct: number) {
|
||||||
|
|
||||||
const Y_HOVER_AMPLITUDE = 25.0;
|
const Y_HOVER_AMPLITUDE = 25.0;
|
||||||
|
|
||||||
const hoverTransformer: AnimationTransformer = (animPct, animScale) => {
|
const hoverTransformer: AnimationTransformer = (animPct) => {
|
||||||
const yHover =
|
const yHover =
|
||||||
pctToNegativeOneToOne(easeInOutQuadPingPong(animPct)) *
|
pctToNegativeOneToOne(easeInOutQuadPingPong(animPct)) * Y_HOVER_AMPLITUDE;
|
||||||
Y_HOVER_AMPLITUDE *
|
|
||||||
animScale;
|
|
||||||
return [svgTranslate({ x: 0, y: yHover })];
|
return [svgTranslate({ x: 0, y: yHover })];
|
||||||
};
|
};
|
||||||
|
|
||||||
const spinTransformer: AnimationTransformer = (animPct, animScale, symbol) => {
|
const spinTransformer: AnimationTransformer = (animPct, symbol) => {
|
||||||
const origin = getBoundingBoxCenter(symbol.bbox);
|
const origin = getBoundingBoxCenter(symbol.bbox);
|
||||||
return [svgTransformOrigin(origin, [svgRotate(animPct * 360)])];
|
return [svgTransformOrigin(origin, [svgRotate(animPct * 360)])];
|
||||||
};
|
};
|
||||||
|
|
|
@ -53,21 +53,18 @@ export type CreatureSymbol = {
|
||||||
export type CreatureSymbolProps = CreatureSymbol & {
|
export type CreatureSymbolProps = CreatureSymbol & {
|
||||||
animator?: CreatureAnimator;
|
animator?: CreatureAnimator;
|
||||||
animPct?: number;
|
animPct?: number;
|
||||||
animScale?: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type NestedCreatureSymbolProps = NestedCreatureSymbol & {
|
type NestedCreatureSymbolProps = NestedCreatureSymbol & {
|
||||||
parent: SvgSymbolData;
|
parent: SvgSymbolData;
|
||||||
animator: CreatureAnimator;
|
animator: CreatureAnimator;
|
||||||
animPct: number;
|
animPct: number;
|
||||||
animScale: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type AttachedCreatureSymbolProps = AttachedCreatureSymbol & {
|
type AttachedCreatureSymbolProps = AttachedCreatureSymbol & {
|
||||||
parent: SvgSymbolData;
|
parent: SvgSymbolData;
|
||||||
animator: CreatureAnimator;
|
animator: CreatureAnimator;
|
||||||
animPct: number;
|
animPct: number;
|
||||||
animScale: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function getNestingTransforms(parent: BBox, child: BBox) {
|
function getNestingTransforms(parent: BBox, child: BBox) {
|
||||||
|
@ -217,18 +214,15 @@ const NestedCreatureSymbol: React.FC<NestedCreatureSymbolProps> = ({
|
||||||
return <>{children}</>;
|
return <>{children}</>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CHILD_ANIM_SCALE_MULTIPLIER = 0.5;
|
|
||||||
|
|
||||||
export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
||||||
let ctx = useContext(CreatureContext);
|
let ctx = useContext(CreatureContext);
|
||||||
const { data, attachments, nests } = props;
|
const { data, attachments, nests } = props;
|
||||||
const attachmentCtx: CreatureContextType = { ...ctx, parent: data };
|
const attachmentCtx: CreatureContextType = { ...ctx, parent: data };
|
||||||
const animator = props.animator ?? nullAnimator;
|
const animator = props.animator ?? nullAnimator;
|
||||||
const animPct = props.animPct ?? 0;
|
const animPct = props.animPct ?? 0;
|
||||||
const animScale = props.animScale ?? 1;
|
|
||||||
const svgTransforms = useMemo(
|
const svgTransforms = useMemo(
|
||||||
() => animator.getSvgTransforms(animPct, animScale, data),
|
() => animator.getSvgTransforms(animPct, data),
|
||||||
[animator, animPct, animScale, data]
|
[animator, animPct, data]
|
||||||
);
|
);
|
||||||
const childAnimator = useMemo(() => animator.getChildAnimator(), [animator]);
|
const childAnimator = useMemo(() => animator.getChildAnimator(), [animator]);
|
||||||
|
|
||||||
|
@ -253,7 +247,6 @@ export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
||||||
{...a}
|
{...a}
|
||||||
parent={data}
|
parent={data}
|
||||||
animPct={animPct}
|
animPct={animPct}
|
||||||
animScale={animScale * CHILD_ANIM_SCALE_MULTIPLIER}
|
|
||||||
animator={childAnimator}
|
animator={childAnimator}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
@ -268,7 +261,6 @@ export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
||||||
{...n}
|
{...n}
|
||||||
parent={data}
|
parent={data}
|
||||||
animPct={animPct}
|
animPct={animPct}
|
||||||
animScale={animScale * CHILD_ANIM_SCALE_MULTIPLIER}
|
|
||||||
animator={childAnimator}
|
animator={childAnimator}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
Ładowanie…
Reference in New Issue