1 line
16 KiB
JSON
1 line
16 KiB
JSON
|
{"ast":null,"code":"import { invariant, millisecondsToSeconds, secondsToMilliseconds, noop } from 'motion-utils';\nimport { setStyle } from '../render/dom/style-set.mjs';\nimport { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';\nimport { getFinalKeyframe } from './keyframes/get-final.mjs';\nimport { WithPromise } from './utils/WithPromise.mjs';\nimport { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';\nimport { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';\n\n/**\n * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.\n */\nclass NativeAnimation extends WithPromise {\n constructor(options) {\n super();\n this.finishedTime = null;\n this.isStopped = false;\n if (!options) return;\n const {\n element,\n name,\n keyframes,\n pseudoElement,\n allowFlatten = false,\n finalKeyframe,\n onComplete\n } = options;\n this.isPseudoElement = Boolean(pseudoElement);\n this.allowFlatten = allowFlatten;\n this.options = options;\n invariant(typeof options.type !== \"string\", \"animateMini doesn't support \\\"type\\\" as a string. Did you mean to import { spring } from \\\"motion\\\"?\");\n const transition = applyGeneratorOptions(options);\n this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);\n if (transition.autoplay === false) {\n this.animation.pause();\n }\n this.animation.onfinish = () => {\n this.finishedTime = this.time;\n if (!pseudoElement) {\n const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);\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 this.animation.cancel();\n }\n onComplete === null || onComplete === void 0 || onComplete();\n this.notifyFinished();\n };\n }\n play() {\n if (this.isStopped) return;\n this.animation.play();\n if (this.state === \"finished\") {\n this.updateFinished();\n }\n }\n pause() {\n this.animation.pause();\n }\n complete() {\n var _this$animation$finis, _this$animation;\n (_this$animation$finis = (_this$animation = this.animation).finish) === null || _this$animation$finis === void 0 || _this$animation$finis.call(_this$animation);\n }\n cancel() {\n try {\n this.animation.cancel();\n } catch (e) {}\n }\n stop() {\n if (this.isStopped) return;\n this.isStopped = true;\n const {\n state\n } = this;\n if (state === \"idle\" || state === \"finished\") {\n return;\n }\n if (this.updateMotionValue) {\n this.updateMotionValue();\n } else {\n this.commitStyles();\n }\n if (!this.isPseudoElement) this.cancel();\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 commitStyles() {\n if (!this.isPseudoElement) {\n var _this$animation$commi, _this$animation2;\n (_this$animation$commi = (_this$animation2 = this.animation).commitStyles) === null || _this$animation$commi === void 0 || _this$animation$commi.call(_this$animation2);\n }\n }\n get duration() {\n var _this$animation$effec, _this$animation$effec2;\n const duration = ((_this$animation$effec = this.animation.effect) === null || _this$animation$effec
|