1 line
12 KiB
Plaintext
1 line
12 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 }\n\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 * We always do this, even when a motion value is present, to prevent\n * a visual flash in Firefox where the WAAPI animation's fill is removed\n * during cancel() before the scheduled render can apply the correct value.\n */\n setStyle(element, name, keyframe)\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 (
|