48 lines
910 B
TypeScript
48 lines
910 B
TypeScript
|
import type { AnimationConfig, Keyframe, TransformValue } from '@/types/animate';
|
||
|
|
|
||
|
|
export const DEFAULT_TRANSFORM: TransformValue = {
|
||
|
|
translateX: 0,
|
||
|
|
translateY: 0,
|
||
|
|
rotate: 0,
|
||
|
|
scaleX: 1,
|
||
|
|
scaleY: 1,
|
||
|
|
skewX: 0,
|
||
|
|
skewY: 0,
|
||
|
|
};
|
||
|
|
|
||
|
|
export function newKeyframe(offset: number): Keyframe {
|
||
|
|
return {
|
||
|
|
id: crypto.randomUUID(),
|
||
|
|
offset,
|
||
|
|
properties: {},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DEFAULT_CONFIG: AnimationConfig = {
|
||
|
|
name: 'fadeInUp',
|
||
|
|
duration: 600,
|
||
|
|
delay: 0,
|
||
|
|
easing: 'ease-out',
|
||
|
|
iterationCount: 1,
|
||
|
|
direction: 'normal',
|
||
|
|
fillMode: 'forwards',
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
id: crypto.randomUUID(),
|
||
|
|
offset: 0,
|
||
|
|
properties: {
|
||
|
|
opacity: 0,
|
||
|
|
transform: { ...DEFAULT_TRANSFORM, translateY: 20 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: crypto.randomUUID(),
|
||
|
|
offset: 100,
|
||
|
|
properties: {
|
||
|
|
opacity: 1,
|
||
|
|
transform: { ...DEFAULT_TRANSFORM },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|