Rename some things.
rodzic
6ee909e436
commit
c1722b1d53
|
@ -7,13 +7,13 @@ import {
|
||||||
svgTranslate,
|
svgTranslate,
|
||||||
} from "./svg-transform";
|
} from "./svg-transform";
|
||||||
|
|
||||||
type AnimationTransformer = (
|
type CreatureAnimate = (
|
||||||
animPct: number,
|
animPct: number,
|
||||||
symbol: SvgSymbolData
|
symbol: SvgSymbolData
|
||||||
) => SvgTransform[];
|
) => SvgTransform[];
|
||||||
|
|
||||||
export interface CreatureAnimator {
|
export interface CreatureAnimator {
|
||||||
getSvgTransforms: AnimationTransformer;
|
animate: CreatureAnimate;
|
||||||
getChildAnimator(): CreatureAnimator;
|
getChildAnimator(): CreatureAnimator;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,33 +49,33 @@ function pctToNegativeOneToOne(pct: number) {
|
||||||
|
|
||||||
const Y_HOVER_AMPLITUDE = 25.0;
|
const Y_HOVER_AMPLITUDE = 25.0;
|
||||||
|
|
||||||
const hoverTransformer: AnimationTransformer = (animPct) => {
|
const animateHover: CreatureAnimate = (animPct) => {
|
||||||
const yHover =
|
const yHover =
|
||||||
pctToNegativeOneToOne(easeInOutQuadPingPong(animPct)) * Y_HOVER_AMPLITUDE;
|
pctToNegativeOneToOne(easeInOutQuadPingPong(animPct)) * Y_HOVER_AMPLITUDE;
|
||||||
return [svgTranslate({ x: 0, y: yHover })];
|
return [svgTranslate({ x: 0, y: yHover })];
|
||||||
};
|
};
|
||||||
|
|
||||||
const spinTransformer: AnimationTransformer = (animPct, symbol) => {
|
const animateSpin: CreatureAnimate = (animPct, symbol) => {
|
||||||
const origin = getBoundingBoxCenter(symbol.bbox);
|
const origin = getBoundingBoxCenter(symbol.bbox);
|
||||||
return [svgTransformOrigin(origin, [svgRotate(animPct * 360)])];
|
return [svgTransformOrigin(origin, [svgRotate(animPct * 360)])];
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hoverAnimator: CreatureAnimator = {
|
export const hoverAnimator: CreatureAnimator = {
|
||||||
getSvgTransforms: hoverTransformer,
|
animate: animateHover,
|
||||||
getChildAnimator: () => hoverAnimator,
|
getChildAnimator: () => hoverAnimator,
|
||||||
};
|
};
|
||||||
|
|
||||||
const spinAnimator: CreatureAnimator = {
|
const spinAnimator: CreatureAnimator = {
|
||||||
getSvgTransforms: spinTransformer,
|
animate: animateSpin,
|
||||||
getChildAnimator: () => spinAnimator,
|
getChildAnimator: () => spinAnimator,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hoverAndSpinAnimator: CreatureAnimator = {
|
export const hoverAndSpinAnimator: CreatureAnimator = {
|
||||||
getSvgTransforms: hoverTransformer,
|
animate: animateHover,
|
||||||
getChildAnimator: () => spinAnimator,
|
getChildAnimator: () => spinAnimator,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nullAnimator: CreatureAnimator = {
|
export const nullAnimator: CreatureAnimator = {
|
||||||
getSvgTransforms: () => [],
|
animate: () => [],
|
||||||
getChildAnimator: () => nullAnimator,
|
getChildAnimator: () => nullAnimator,
|
||||||
};
|
};
|
||||||
|
|
|
@ -221,7 +221,7 @@ export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
||||||
const animator = props.animator ?? nullAnimator;
|
const animator = props.animator ?? nullAnimator;
|
||||||
const animPct = props.animPct ?? 0;
|
const animPct = props.animPct ?? 0;
|
||||||
const svgTransforms = useMemo(
|
const svgTransforms = useMemo(
|
||||||
() => animator.getSvgTransforms(animPct, data),
|
() => animator.animate(animPct, data),
|
||||||
[animator, animPct, data]
|
[animator, animPct, data]
|
||||||
);
|
);
|
||||||
const childAnimator = useMemo(() => animator.getChildAnimator(), [animator]);
|
const childAnimator = useMemo(() => animator.getChildAnimator(), [animator]);
|
||||||
|
|
Ładowanie…
Reference in New Issue