{"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 */\nexport const 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    private sampler?: JSAnimation<T>\n\n    /**\n     * The animation's time now, in ms. Wall-clock rather than WAAPI's\n     * currentTime while running, as under CPU load currentTime may not\n     * reflect the actual elapsed time, causing incorrect sampling and\n     * visual jumps.\n     */\n    private elapsed() {\n        return this.state === \"running\"\n            ? (time.now() - this.startTime) * this.speed\n            : this.time * 1000\n    }\n\n    /**\n     * The value at a time, from a renderless JS animation.\n     */\n    private sample(sampleTime: number) {\n        if (!this.sampler) {\n            const {\n                motionValue,\n                onUpdate,\n                onComplete,\n                onPlay,\n                onStop,\n                element,\n                ...options\n            } = this.options\n\n            /**\n             * Stop it straight away so its driver doesn't run every frame.\n             * It can still be sampled.\n             */\n            this.sampler = new JSAnimation({ ...options, autoplay: false })\n            this.sampler.stop()\n        }\n\n        return this.sampler.sample(Math.max(0, sampleTime)).value\n    }\n\n    /**\n     * The value now, as WAAPI doesn't set the motion value while it runs.\n     */\n    liveValue() {\n        const { state } = this\n\n        if (state === \"running\" || state === \"paused\") {\n            return this.sample(this.elapsed())\n        }\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     * sample a renderless JS animation twice to calculate its current\n     * value, \"previous\" value, and therefore allow Motion to calculate\n     * velocity for any subsequent animation.\n     */\n    updateMotionValue(value?: T) {\n        const { motionValue, element, name } = this.options\n\n        if (!motionValue) return\n\n        if (value !== undefined) {\n            motionValue.set(value)\n            return\n        }\n\n        const { speed } = this\n        const sampleTime = this.elapsed()\n        const delta =\n            this.state === \"running\" && speed\n                ? clamp(0, sampleDelta, sampleTime)\n                : 0\n        const current = this.sample(sampleTime)\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        if (element && name) setStyle(element, name, current)\n\n        motionValue.setWithVelocity(\n            this.sample(sampleTime - delta * Math.sign(speed)),\n            current,\n            delta / Math.abs(speed || 1)\n        )\n    }\n}\n"],"names":[],"mappings":";;;;;;;;AAYA;;;;AAIG;AACI,MAAM,WAAW,GAAG,GAAE;AAEvB,MAAO,uBAEX,SAAQ,eAAkB,CAAA;AAGxB,IAAA,WAAA,CAAY,OAA0C,EAAA;AAClD;;;;;;;;AAQG;QACH,mBAAmB,CAAC,OAAO,CAAC;AAE5B;;;;;;AAMG;QACH,qBAAqB,CAAC,OAAO,CAAC;QAE9B,KAAK,CAAC,OAAO,CAAC;AAEd;;;;AAIG;AACH,QAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;AAC/D,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;QACtC;AAEA,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IAC1B;AAIA;;;;;AAKG;IACK,OAAO,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK;AAClB,cAAE,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC;AACvC,cAAE,IAAI,CAAC,IAAI,GAAG,IAAI;IAC1B;AAEA;;AAEG;AACK,IAAA,MAAM,CAAC,UAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,MAAM,EACF,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,GAAG,OAAO,EACb,GAAG,IAAI,CAAC,OAAO;AAEhB;;;AAGG;AACH,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,WAAW,CAAC,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAC/D,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;QACvB;AAEA,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK;IAC7D;AAEA;;AAEG;IACH,SAAS,GAAA;AACL,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;QAEtB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,EAAE;YAC3C,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC;IACJ;AAEA;;;;;;;AAOG;AACH,IAAA,iBAAiB,CAAC,KAAS,EAAA;QACvB,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO;AAEnD,QAAA,IAAI,CAAC,WAAW;YAAE;AAElB,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACrB,YAAA,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;YACtB;QACJ;AAEA,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;AACtB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE;QACjC,MAAM,KAAK,GACP,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI;cACtB,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,UAAU;cAChC,CAAC;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;AAEvC;;;;AAIG;QACH,IAAI,OAAO,IAAI,IAAI;AAAE,YAAA,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC;AAErD,QAAA,WAAW,CAAC,eAAe,CACvB,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAClD,OAAO,EACP,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,CAC/B;IACL;AACH;;;;"}