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