1 line
5.3 KiB
Plaintext
1 line
5.3 KiB
Plaintext
|
{"version":3,"file":"NativeAnimationExtended.mjs","sources":["../../../src/animation/NativeAnimationExtended.ts"],"sourcesContent":["import { clamp } from \"motion-utils\"\nimport { time } from \"../frameloop/sync-time\"\nimport { setStyle } from \"../render/dom/style-set\"\nimport { JSAnimation } from \"./JSAnimation\"\nimport { NativeAnimation, NativeAnimationOptions } from \"./NativeAnimation\"\nimport { AnyResolvedKeyframe, ValueAnimationOptions } from \"./types\"\nimport { replaceTransitionType } from \"./utils/replace-transition-type\"\nimport { replaceStringEasing } from \"./waapi/utils/unsupported-easing\"\n\nexport type NativeAnimationOptionsExtended<T extends AnyResolvedKeyframe> =\n NativeAnimationOptions & ValueAnimationOptions<T> & NativeAnimationOptions\n\n/**\n * 10ms is chosen here as it strikes a balance between smooth\n * results (more than one keyframe per frame at 60fps) and\n * keyframe quantity.\n */\nconst sampleDelta = 10 //ms\n\nexport class NativeAnimationExtended<\n T extends AnyResolvedKeyframe\n> extends NativeAnimation<T> {\n options: NativeAnimationOptionsExtended<T>\n\n constructor(options: NativeAnimationOptionsExtended<T>) {\n /**\n * The base NativeAnimation function only supports a subset\n * of Motion easings, and WAAPI also only supports some\n * easing functions via string/cubic-bezier definitions.\n *\n * This function replaces those unsupported easing functions\n * with a JS easing function. This will later get compiled\n * to a linear() easing function.\n */\n replaceStringEasing(options)\n\n /**\n * Ensure we replace the transition type with a generator function\n * before passing to WAAPI.\n *\n * TODO: Does this have a better home? It could be shared with\n * JSAnimation.\n */\n replaceTransitionType(options)\n\n super(options)\n\n /**\n * Only set startTime when the animation should autoplay.\n * Setting startTime on a paused WAAPI animation unpauses it\n * (per the WAAPI spec), which breaks autoplay: false.\n */\n if (options.startTime !== undefined && options.autoplay !== false) {\n this.startTime = options.startTime\n }\n\n this.options = options\n }\n\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read committed styles back out of the DOM, we can\n * create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to calculate velocity for any subsequent animation.\n */\n updateMotionValue(value?: T) {\n const { motionValue, onUpdate, onComplete, element, ...options } =\n this.options\n\n if (!motionValue) return\n\n if (value !== undefined) {\n motionValue.set(value)\n return\n }\n\n const sampleAnimation = new JSAnimation({\n ...options,\n autoplay: false,\n })\n\n /**\n * Use wall-clock elapsed time for sampling.\n * Under CPU load, WAAPI's currentTime may not reflect actual\n * elapsed time, causing incorrect sampling and visual jumps.\n */\n const sampleTime = Math.max(sampleDelta, time.now() - this.startTime)\n const delta = clamp(0, sampleDelta, sampleTime - sampleDelta)\n const current = sampleAnimation.sample(sampleTime).value\n\n /**\n * Write the estimated value to inline style so it persists\n * after cancel(), covering the async gap before the next\n * animation starts.\n */\n const { name } = this.options\n if (element && name) setStyle(element, name, current)\n\n motionValue.setWithVelocity(\n sampleAnimation.sample(Math.max(0, sampleTime - delta)).value,\n current,\n delta\n )\n\n sampleAnimation.stop()\n }\n}\n"],"n
|