1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
|
{"version":3,"file":"AsyncMotionValueAnimation.mjs","sources":["../../../src/animation/AsyncMotionValueAnimation.ts"],"sourcesContent":["import { MotionGlobalConfig, noop } from \"motion-utils\"\nimport { time } from \"../frameloop/sync-time\"\nimport { JSAnimation } from \"./JSAnimation\"\nimport { getFinalKeyframe } from \"./keyframes/get-final\"\nimport {\n KeyframeResolver as DefaultKeyframeResolver,\n flushKeyframeResolvers,\n ResolvedKeyframes,\n} from \"./keyframes/KeyframesResolver\"\nimport { NativeAnimationExtended } from \"./NativeAnimationExtended\"\nimport {\n AnimationPlaybackControls,\n AnyResolvedKeyframe,\n TimelineWithFallback,\n ValueAnimationOptions,\n} from \"./types\"\nimport { canAnimate } from \"./utils/can-animate\"\nimport { makeAnimationInstant } from \"./utils/make-animation-instant\"\nimport { WithPromise } from \"./utils/WithPromise\"\nimport { supportsBrowserAnimation } from \"./waapi/supports/waapi\"\n\n/**\n * Maximum time allowed between an animation being created and it being\n * resolved for us to use the latter as the start time.\n *\n * This is to ensure that while we prefer to \"start\" an animation as soon\n * as it's triggered, we also want to avoid a visual jump if there's a big delay\n * between these two moments.\n */\nconst MAX_RESOLVE_DELAY = 40\n\ntype OptionsWithoutKeyframes<T extends AnyResolvedKeyframe> = Omit<\n ValueAnimationOptions<T>,\n \"keyframes\"\n>\n\nexport class AsyncMotionValueAnimation<T extends AnyResolvedKeyframe>\n extends WithPromise\n implements AnimationPlaybackControls\n{\n private createdAt: number\n\n private resolvedAt: number | undefined\n\n private _animation: AnimationPlaybackControls | undefined\n\n private pendingTimeline: TimelineWithFallback | undefined\n\n private keyframeResolver: DefaultKeyframeResolver | undefined\n\n private stopTimeline: VoidFunction | undefined\n\n constructor({\n autoplay = true,\n delay = 0,\n type = \"keyframes\",\n repeat = 0,\n repeatDelay = 0,\n repeatType = \"loop\",\n keyframes,\n name,\n motionValue,\n element,\n ...options\n }: ValueAnimationOptions<T>) {\n super()\n\n this.createdAt = time.now()\n\n const optionsWithDefaults: OptionsWithoutKeyframes<T> = {\n autoplay,\n delay,\n type,\n repeat,\n repeatDelay,\n repeatType,\n name,\n motionValue,\n element,\n ...options,\n }\n\n const KeyframeResolver =\n element?.KeyframeResolver || DefaultKeyframeResolver\n\n this.keyframeResolver = new KeyframeResolver(\n keyframes,\n (\n resolvedKeyframes: ResolvedKeyframes<T>,\n finalKeyframe: T,\n forced: boolean\n ) =>\n this.onKeyframesResolved(\n resolvedKeyframes,\n finalKeyframe,\n optionsWithDefaults,\n !forced\n ),\n name,\n motionValue,\n element\n )\n this.keyframeResolver?.scheduleResolve()\n }\n\n onKeyframesResolved(\n keyframes: ResolvedKeyframes<T>,\n finalKeyframe: T,\n options: OptionsWithoutKeyframes<T>,\n sync: boolean\n ) {\n this.keyframeResolver = undefined\n\n const { name, type, velocity, delay, isHandoff, onUpdate } = options\n this.resolvedAt = time.now()\n\n /**\n * If we can't animate this value with the resolved keyframes\n * then we should complete it immediately.\n */\n let canAnimateValue = true\n if (!canAnimate(keyframes, name, type, velocity)) {\n canAnimateValue = false\n\n if (MotionGlobalConfig.instantAnimations || !delay) {\n onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe))\n }\n\n keyframe
|