1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"version":3,"file":"NativeAnimation.mjs","sources":["../../../src/animation/NativeAnimation.ts"],"sourcesContent":["import {\n invariant,\n millisecondsToSeconds,\n noop,\n secondsToMilliseconds,\n} from \"motion-utils\"\nimport { setStyle } from \"../render/dom/style-set\"\nimport { supportsScrollTimeline } from \"../utils/supports/scroll-timeline\"\nimport { getFinalKeyframe } from \"./keyframes/get-final\"\nimport {\n AnimationPlaybackControlsWithThen,\n AnyResolvedKeyframe,\n DOMValueAnimationOptions,\n TimelineWithFallback,\n} from \"./types\"\nimport { WithPromise } from \"./utils/WithPromise\"\nimport { startWaapiAnimation } from \"./waapi/start-waapi-animation\"\nimport { applyGeneratorOptions } from \"./waapi/utils/apply-generator\"\n\nexport interface NativeAnimationOptions<V extends AnyResolvedKeyframe = number>\n extends DOMValueAnimationOptions<V> {\n pseudoElement?: string\n startTime?: number\n}\n\n/**\n * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.\n */\nexport class NativeAnimation<T extends AnyResolvedKeyframe>\n extends WithPromise\n implements AnimationPlaybackControlsWithThen\n{\n /**\n * The interfaced Web Animation API animation\n */\n protected animation: Animation\n\n protected finishedTime: number | null = null\n\n protected options: NativeAnimationOptions\n\n private allowFlatten: boolean\n\n private isStopped = false\n\n private isPseudoElement: boolean\n\n /**\n * Tracks a manually-set start time that takes precedence over WAAPI's\n * dynamic startTime. This is cleared when play() or time setter is called,\n * allowing WAAPI to take over timing.\n */\n protected manualStartTime: number | null = null\n\n constructor(options?: NativeAnimationOptions) {\n super()\n\n if (!options) return\n\n const {\n element,\n name,\n keyframes,\n pseudoElement,\n allowFlatten = false,\n finalKeyframe,\n onComplete,\n } = options as any\n\n this.isPseudoElement = Boolean(pseudoElement)\n\n this.allowFlatten = allowFlatten\n this.options = options\n\n invariant(\n typeof options.type !== \"string\",\n `Mini animate() doesn't support \"type\" as a string.`,\n \"mini-spring\"\n )\n\n const transition = applyGeneratorOptions(options)\n\n this.animation = startWaapiAnimation(\n element,\n name,\n keyframes,\n transition,\n pseudoElement\n )\n\n if (transition.autoplay === false) {\n this.animation.pause()\n }\n\n this.animation.onfinish = () => {\n this.finishedTime = this.time\n\n if (!pseudoElement) {\n const keyframe = getFinalKeyframe(\n keyframes as any,\n this.options as any,\n finalKeyframe,\n this.speed\n )\n if (this.updateMotionValue) {\n this.updateMotionValue(keyframe)\n } else {\n /**\n * If we can, we want to commit the final style as set by the user,\n * rather than the computed keyframe value supplied by the animation.\n */\n setStyle(element, name, keyframe)\n }\n\n this.animation.cancel()\n }\n\n onComplete?.()\n this.notifyFinished()\n }\n }\n\n updateMotionValue?(value?: T): void\n\n play() {\n if (this.isStopped) return\n\n this.manualStartTime = null\n this.animation.play()\n\n if (this.state === \"finished\") {\n this.updateFinished()\n }\n }\n\n pause() {\n this.animation.pause()\n }\n\n complete() {\n this.animation.finish?.()\n }\n\n cancel() {\n try {\n this.animation.cancel()\n } catch (e) {}\n }\n\n stop() {\n if (this.isStopped) return\n this.isStopped = true\n const { state } = this\n\n if (state === \"idle\" || state === \"finished\") {\n return\n }\n\n if (this.updateMotionValue) {\n this.updateMotionValue()\n } else {\n this.commitStyles()\n }\n\n if (!this.isPseudoElement) this.cancel()\n }\n\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * In this method, we commit styles back to the DOM before cancelling\n * the animation.\n *\n * This is designed to be overridden by NativeAnimationExtended, which\n * will create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to also correctly calculate velocity for any subsequent animation\n * while deferring the commit until the next animation frame.\n */\n protected commitStyles() {\n const element = this.options?.element\n if (!this.isPseudoElement && element?.isConnected) {\n this.animation.commitStyles?.()\n }\n }\n\n get duration() {\n const duration =\n this.animation.effect?.getComputedTiming?.().duration || 0\n\n return millisecondsToSeconds(Number(duration))\n }\n\n get iterationDuration() {\n const { delay = 0 } = this.options || {}\n return this.duration + millisecondsToSeconds(delay)\n }\n\n get time() {\n return millisecondsToSeconds(Number(this.animation.currentTime) || 0)\n }\n\n set time(newTime: number) {\n this.manualStartTime = null\n this.finishedTime = null\n this.animation.currentTime = secondsToMilliseconds(newTime)\n }\n\n /**\n * The playback speed of the animation.\n * 1 = normal speed, 2 = double speed, 0.5 = half speed.\n */\n get speed() {\n return this.animation.playbackRate\n }\n\n set speed(newSpeed: number) {\n // Allow backwards playback after finishing\n if (newSpeed < 0) this.finishedTime = null\n\n this.animation.playbackRate = newSpeed\n }\n\n get state() {\n return this.finishedTime !== null\n ? \"finished\"\n : this.animation.playState\n }\n\n get startTime() {\n return this.manualStartTime ?? Number(this.animation.startTime)\n }\n\n set startTime(newStartTime: number) {\n this.manualStartTime = this.animation.startTime = newStartTime\n }\n\n /**\n * Attaches a timeline to the animation, for instance the `ScrollTimeline`.\n */\n attachTimeline({ timeline, observe }: TimelineWithFallback): VoidFunction {\n if (this.allowFlatten) {\n this.animation.effect?.updateTiming({ easing: \"linear\" })\n }\n\n this.animation.onfinish = null\n\n if (timeline && supportsScrollTimeline()) {\n this.animation.timeline = timeline as any\n\n return noop<void>\n } else {\n return observe(this)\n }\n }\n}\n"],"names":[],"mappings":"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"} |