1 line
26 KiB
Plaintext
1 line
26 KiB
Plaintext
|
{"version":3,"file":"JSAnimation.mjs","sources":["../../../src/animation/JSAnimation.ts"],"sourcesContent":["import {\n clamp,\n invariant,\n millisecondsToSeconds,\n pipe,\n secondsToMilliseconds,\n} from \"motion-utils\"\nimport { time } from \"../frameloop/sync-time\"\nimport { activeAnimations } from \"../stats/animation-count\"\nimport { mix } from \"../utils/mix\"\nimport { Mixer } from \"../utils/mix/types\"\nimport { frameloopDriver } from \"./drivers/frame\"\nimport { DriverControls } from \"./drivers/types\"\nimport { inertia } from \"./generators/inertia\"\nimport { keyframes as keyframesGenerator } from \"./generators/keyframes\"\nimport { calcGeneratorDuration } from \"./generators/utils/calc-duration\"\nimport { getGeneratorVelocity } from \"./generators/utils/velocity\"\nimport { getFinalKeyframe } from \"./keyframes/get-final\"\nimport {\n AnimationPlaybackControlsWithThen,\n AnimationState,\n GeneratorFactory,\n KeyframeGenerator,\n TimelineWithFallback,\n ValueAnimationOptions,\n} from \"./types\"\nimport { replaceTransitionType } from \"./utils/replace-transition-type\"\nimport { WithPromise } from \"./utils/WithPromise\"\n\nconst percentToProgress = (percent: number) => percent / 100\n\nexport class JSAnimation<T extends number | string>\n extends WithPromise\n implements AnimationPlaybackControlsWithThen\n{\n state: AnimationPlayState = \"idle\"\n\n startTime: number | null = null\n\n /**\n * The driver that's controlling the animation loop. Normally this is a requestAnimationFrame loop\n * but in tests we can pass in a synchronous loop.\n */\n private driver?: DriverControls\n\n private isStopped = false\n\n private generator: KeyframeGenerator<T>\n\n private calculatedDuration: number\n\n private resolvedDuration: number\n\n private totalDuration: number\n\n private options: ValueAnimationOptions<T>\n\n /**\n * The current time of the animation.\n */\n private currentTime: number = 0\n\n /**\n * The time at which the animation was paused.\n */\n private holdTime: number | null = null\n\n /**\n * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.\n */\n private playbackSpeed = 1\n\n /*\n * If our generator doesn't support mixing numbers, we need to replace keyframes with\n * [0, 100] and then make a function that maps that to the actual keyframes.\n *\n * 100 is chosen instead of 1 as it works nicer with spring animations.\n */\n private mixKeyframes: Mixer<T> | undefined\n\n private mirroredGenerator: KeyframeGenerator<T> | undefined\n\n constructor(options: ValueAnimationOptions<T>) {\n super()\n activeAnimations.mainThread++\n\n this.options = options\n this.initAnimation()\n this.play()\n\n if (options.autoplay === false) this.pause()\n }\n\n initAnimation() {\n const { options } = this\n\n replaceTransitionType(options)\n\n const {\n type = keyframesGenerator,\n repeat = 0,\n repeatDelay = 0,\n repeatType,\n velocity = 0,\n } = options\n let { keyframes } = options\n\n const generatorFactory =\n (type as GeneratorFactory) || keyframesGenerator\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n generatorFactory !== keyframesGenerator\n ) {\n invariant(\n keyframes.length <= 2,\n `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes}`,\n \"spring-two-frames\"\n )\n }\n\n if (\n generatorFactory !== keyframesGenerator &&\n typeof keyframes[0] !== \"number\"\n ) {\n this.mixKeyframes = pipe(\n percentToProgress,\n mix(keyframes[0], keyframes[1])\n ) as (t: number) => T\n\n keyframes = [0 as T, 100 as T]\
|