1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771 |
- import { FederatedEvent, ERROR_MSG_METHOD_NOT_IMPLEMENTED, propertyMetadataCache, runtime } from '@antv/g-lite';
- import { clamp, isNumber, isNil } from '@antv/util';
- function _defineProperties(target, props) {
- for (var i = 0; i < props.length; i++) {
- var descriptor = props[i];
- descriptor.enumerable = descriptor.enumerable || false;
- descriptor.configurable = true;
- if ("value" in descriptor) descriptor.writable = true;
- Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
- }
- }
- function _createClass(Constructor, protoProps, staticProps) {
- if (protoProps) _defineProperties(Constructor.prototype, protoProps);
- if (staticProps) _defineProperties(Constructor, staticProps);
- Object.defineProperty(Constructor, "prototype", {
- writable: false
- });
- return Constructor;
- }
- function _inheritsLoose(subClass, superClass) {
- subClass.prototype = Object.create(superClass.prototype);
- subClass.prototype.constructor = subClass;
- _setPrototypeOf(subClass, superClass);
- }
- function _setPrototypeOf(o, p) {
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
- o.__proto__ = p;
- return o;
- };
- return _setPrototypeOf(o, p);
- }
- function _toPrimitive(input, hint) {
- if (typeof input !== "object" || input === null) return input;
- var prim = input[Symbol.toPrimitive];
- if (prim !== undefined) {
- var res = prim.call(input, hint || "default");
- if (typeof res !== "object") return res;
- throw new TypeError("@@toPrimitive must return a primitive value.");
- }
- return (hint === "string" ? String : Number)(input);
- }
- function _toPropertyKey(arg) {
- var key = _toPrimitive(arg, "string");
- return typeof key === "symbol" ? key : String(key);
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationPlaybackEvent
- */
- var AnimationEvent = /*#__PURE__*/function (_FederatedEvent) {
- _inheritsLoose(AnimationEvent, _FederatedEvent);
- function AnimationEvent(manager, target, currentTime, timelineTime) {
- var _this;
- _this = _FederatedEvent.call(this, manager) || this;
- _this.currentTime = void 0;
- _this.timelineTime = void 0;
- _this.currentTime = currentTime;
- _this.timelineTime = timelineTime;
- // @ts-ignore
- _this.target = target;
- _this.type = 'finish';
- _this.bubbles = false;
- // @ts-ignore
- _this.currentTarget = target;
- _this.defaultPrevented = false;
- _this.eventPhase = _this.AT_TARGET;
- _this.timeStamp = Date.now();
- _this.currentTime = currentTime;
- _this.timelineTime = timelineTime;
- return _this;
- }
- return AnimationEvent;
- }(FederatedEvent);
- var sequenceNumber = 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation
- */
- var Animation = /*#__PURE__*/function () {
- function Animation(effect, timeline) {
- var _this$effect;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
- */
- this.effect = void 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
- */
- this.timeline = void 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
- */
- this.id = void 0;
- this.currentTimePending = false;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/playState
- */
- // playState: AnimationPlayState;
- this._idle = true;
- this._paused = false;
- this._finishedFlag = true;
- /**
- * record previos state
- */
- this.oldPlayState = void 0;
- this._holdTime = void 0;
- this.readyPromise = void 0;
- this.finishedPromise = void 0;
- // eslint-disable-next-line @typescript-eslint/ban-types
- this.resolveReadyPromise = void 0;
- // eslint-disable-next-line @typescript-eslint/ban-types
- this.rejectReadyPromise = void 0;
- // eslint-disable-next-line @typescript-eslint/ban-types
- this.resolveFinishedPromise = void 0;
- // eslint-disable-next-line @typescript-eslint/ban-types
- this.rejectFinishedPromise = void 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
- */
- this.onfinish = void 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
- */
- this.oncancel = void 0;
- /**
- * get called after each frame when running
- */
- this.onframe = void 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime
- */
- this._currentTime = 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
- */
- this._startTime = void 0;
- this._playbackRate = 1;
- this._totalDuration = void 0;
- this._inEffect = void 0;
- this._inTimeline = true;
- this.onremove = void 0;
- this.effect = effect;
- effect.animation = this;
- this.timeline = timeline;
- this.id = "" + sequenceNumber++;
- this._inEffect = !!this.effect.update(0);
- this._totalDuration = Number((_this$effect = this.effect) === null || _this$effect === void 0 ? void 0 : _this$effect.getComputedTiming().endTime);
- this._holdTime = 0;
- this._paused = false;
- this.oldPlayState = 'idle';
- this.updatePromises();
- }
- /**
- * state machine,
- * resolve/reject ready/finished Promise according to current state
- */
- var _proto = Animation.prototype;
- _proto.updatePromises = function updatePromises() {
- var oldPlayState = this.oldPlayState;
- var newPlayState = this.pending ? 'pending' : this.playState;
- if (this.readyPromise && newPlayState !== oldPlayState) {
- if (newPlayState === 'idle') {
- this.rejectReadyPromise();
- this.readyPromise = undefined;
- } else if (oldPlayState === 'pending') {
- this.resolveReadyPromise();
- } else if (newPlayState === 'pending') {
- this.readyPromise = undefined;
- }
- }
- if (this.finishedPromise && newPlayState !== oldPlayState) {
- if (newPlayState === 'idle') {
- this.rejectFinishedPromise();
- this.finishedPromise = undefined;
- } else if (newPlayState === 'finished') {
- this.resolveFinishedPromise();
- } else if (oldPlayState === 'finished') {
- this.finishedPromise = undefined;
- }
- }
- this.oldPlayState = newPlayState;
- return this.readyPromise || this.finishedPromise;
- };
- _proto.play = function play() {
- this.updatePromises();
- this._paused = false;
- if (this._isFinished || this._idle) {
- this.rewind();
- this._startTime = null;
- }
- this._finishedFlag = false;
- this._idle = false;
- this.ensureAlive();
- this.timeline.applyDirtiedAnimation(this);
- if (this.timeline.animations.indexOf(this) === -1) {
- this.timeline.animations.push(this);
- }
- this.updatePromises();
- };
- _proto.pause = function pause() {
- this.updatePromises();
- if (this.currentTime) {
- this._holdTime = this.currentTime;
- }
- if (!this._isFinished && !this._paused && !this._idle) {
- this.currentTimePending = true;
- } else if (this._idle) {
- this.rewind();
- this._idle = false;
- }
- this._startTime = null;
- this._paused = true;
- this.updatePromises();
- };
- _proto.finish = function finish() {
- this.updatePromises();
- if (this._idle) return;
- this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
- this._startTime = this._totalDuration - this.currentTime;
- this.currentTimePending = false;
- this.timeline.applyDirtiedAnimation(this);
- this.updatePromises();
- };
- _proto.cancel = function cancel() {
- var _this = this;
- this.updatePromises();
- if (!this._inEffect) return;
- this._inEffect = false;
- this._idle = true;
- this._paused = false;
- this._finishedFlag = true;
- this._currentTime = 0;
- this._startTime = null;
- this.effect.update(null);
- // effects are invalid after cancellation as the animation state
- // needs to un-apply.
- this.timeline.applyDirtiedAnimation(this);
- this.updatePromises();
- /**
- * 1. Reject the current finished promise with a DOMException named "AbortError".
- * 2. Let current finished promise be a new promise
- * @see https://w3c.github.io/csswg-drafts/web-animations-1/#canceling-an-animation-section
- */
- // if (this.finishedPromise) {
- // this.rejectFinishedPromise();
- // this.finishedPromise = undefined;
- // }
- if (this.oncancel) {
- var event = new AnimationEvent(null, this, this.currentTime, null);
- setTimeout(function () {
- _this.oncancel(event);
- });
- }
- };
- _proto.reverse = function reverse() {
- this.updatePromises();
- var oldCurrentTime = this.currentTime;
- this.playbackRate *= -1;
- this.play();
- if (oldCurrentTime !== null) {
- this.currentTime = oldCurrentTime;
- }
- this.updatePromises();
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
- */;
- _proto.updatePlaybackRate = function updatePlaybackRate(playbackRate) {
- this.playbackRate = playbackRate;
- };
- _proto.targetAnimations = function targetAnimations() {
- var _this$effect2;
- var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
- return target.getAnimations();
- };
- _proto.markTarget = function markTarget() {
- var animations = this.targetAnimations();
- if (animations.indexOf(this) === -1) {
- animations.push(this);
- }
- };
- _proto.unmarkTarget = function unmarkTarget() {
- var animations = this.targetAnimations();
- var index = animations.indexOf(this);
- if (index !== -1) {
- animations.splice(index, 1);
- }
- };
- _proto.tick = function tick(timelineTime, isAnimationFrame) {
- if (!this._idle && !this._paused) {
- if (this._startTime === null) {
- if (isAnimationFrame) {
- this.startTime = timelineTime - this._currentTime / this.playbackRate;
- }
- } else if (!this._isFinished) {
- this.tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
- }
- }
- if (isAnimationFrame) {
- this.currentTimePending = false;
- this.fireEvents(timelineTime);
- }
- };
- _proto.rewind = function rewind() {
- if (this.playbackRate >= 0) {
- this.currentTime = 0;
- } else if (this._totalDuration < Infinity) {
- this.currentTime = this._totalDuration;
- } else {
- throw new Error('Unable to rewind negative playback rate animation with infinite duration');
- }
- };
- _proto.persist = function persist() {
- throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
- };
- _proto.addEventListener = function addEventListener(type, listener, options) {
- throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
- };
- _proto.removeEventListener = function removeEventListener(type, listener, options) {
- throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
- };
- _proto.dispatchEvent = function dispatchEvent(event) {
- throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
- };
- // replaceState: AnimationReplaceState;
- _proto.commitStyles = function commitStyles() {
- throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
- };
- _proto.ensureAlive = function ensureAlive() {
- // If an animation is playing backwards and is not fill backwards/both
- // then it should go out of effect when it reaches the start of its
- // active interval (currentTime === 0).
- if (this.playbackRate < 0 && this.currentTime === 0) {
- var _this$effect3;
- this._inEffect = !!((_this$effect3 = this.effect) === null || _this$effect3 === void 0 ? void 0 : _this$effect3.update(-1));
- } else {
- var _this$effect4;
- this._inEffect = !!((_this$effect4 = this.effect) === null || _this$effect4 === void 0 ? void 0 : _this$effect4.update(this.currentTime));
- }
- if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
- this._inTimeline = true;
- this.timeline.animations.push(this);
- }
- };
- _proto.tickCurrentTime = function tickCurrentTime(newTime, ignoreLimit) {
- if (newTime !== this._currentTime) {
- this._currentTime = newTime;
- if (this._isFinished && !ignoreLimit) {
- this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
- }
- this.ensureAlive();
- }
- };
- _proto.fireEvents = function fireEvents(baseTime) {
- var _this2 = this;
- if (this._isFinished) {
- if (!this._finishedFlag) {
- if (this.onfinish) {
- var event = new AnimationEvent(null, this, this.currentTime, baseTime);
- setTimeout(function () {
- if (_this2.onfinish) {
- _this2.onfinish(event);
- }
- });
- }
- this._finishedFlag = true;
- }
- } else {
- if (this.onframe && this.playState === 'running') {
- var _event = new AnimationEvent(null, this, this.currentTime, baseTime);
- this.onframe(_event);
- }
- this._finishedFlag = false;
- }
- };
- _createClass(Animation, [{
- key: "pending",
- get:
- // animation: InternalAnimation | null;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending
- */
- function get() {
- return this._startTime === null && !this._paused && this.playbackRate !== 0 || this.currentTimePending;
- }
- }, {
- key: "playState",
- get: function get() {
- if (this._idle) return 'idle';
- if (this._isFinished) return 'finished';
- if (this._paused) return 'paused';
- return 'running';
- }
- }, {
- key: "ready",
- get:
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/ready
- * @example
- animation.pause();
- animation.ready.then(function() {
- // Displays 'running'
- alert(animation.playState);
- });
- animation.play();
- */
- function get() {
- var _this3 = this;
- if (!this.readyPromise) {
- if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
- this.timeline.animationsWithPromises.push(this);
- }
- this.readyPromise = new Promise(function (resolve, reject) {
- _this3.resolveReadyPromise = function () {
- resolve(_this3);
- };
- _this3.rejectReadyPromise = function () {
- reject(new Error());
- };
- });
- if (!this.pending) {
- this.resolveReadyPromise();
- }
- }
- return this.readyPromise;
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished
- * @example
- Promise.all(
- elem.getAnimations().map(
- function(animation) {
- return animation.finished
- }
- )
- ).then(
- function() {
- return elem.remove();
- }
- );
- */
- }, {
- key: "finished",
- get: function get() {
- var _this4 = this;
- if (!this.finishedPromise) {
- if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
- this.timeline.animationsWithPromises.push(this);
- }
- this.finishedPromise = new Promise(function (resolve, reject) {
- _this4.resolveFinishedPromise = function () {
- resolve(_this4);
- };
- _this4.rejectFinishedPromise = function () {
- reject(new Error());
- };
- });
- if (this.playState === 'finished') {
- this.resolveFinishedPromise();
- }
- }
- return this.finishedPromise;
- }
- }, {
- key: "currentTime",
- get: function get() {
- this.updatePromises();
- return this._idle || this.currentTimePending ? null : this._currentTime;
- },
- set: function set(newTime) {
- newTime = Number(newTime);
- if (isNaN(newTime)) return;
- this.timeline.restart();
- if (!this._paused && this._startTime !== null) {
- var _this$timeline;
- this._startTime = Number((_this$timeline = this.timeline) === null || _this$timeline === void 0 ? void 0 : _this$timeline.currentTime) - newTime / this.playbackRate;
- }
- this.currentTimePending = false;
- if (this._currentTime === newTime) {
- return;
- }
- if (this._idle) {
- this._idle = false;
- this._paused = true;
- }
- this.tickCurrentTime(newTime, true);
- this.timeline.applyDirtiedAnimation(this);
- }
- }, {
- key: "startTime",
- get: function get() {
- return this._startTime;
- },
- set: function set(newTime) {
- if (newTime !== null) {
- this.updatePromises();
- newTime = Number(newTime);
- if (isNaN(newTime)) return;
- if (this._paused || this._idle) return;
- this._startTime = newTime;
- this.tickCurrentTime((Number(this.timeline.currentTime) - this._startTime) * this.playbackRate);
- this.timeline.applyDirtiedAnimation(this);
- this.updatePromises();
- }
- }
- }, {
- key: "playbackRate",
- get: function get() {
- return this._playbackRate;
- },
- set: function set(value) {
- if (value === this._playbackRate) {
- return;
- }
- this.updatePromises();
- var oldCurrentTime = this.currentTime;
- this._playbackRate = value;
- this.startTime = null;
- if (this.playState !== 'paused' && this.playState !== 'idle') {
- this._finishedFlag = false;
- this._idle = false;
- this.ensureAlive();
- this.timeline.applyDirtiedAnimation(this);
- }
- if (oldCurrentTime !== null) {
- this.currentTime = oldCurrentTime;
- }
- this.updatePromises();
- }
- }, {
- key: "_isFinished",
- get: function get() {
- return !this._idle && (this._playbackRate > 0 && Number(this._currentTime) >= this._totalDuration || this._playbackRate < 0 && Number(this._currentTime) <= 0);
- }
- }, {
- key: "totalDuration",
- get: function get() {
- return this._totalDuration;
- }
- }, {
- key: "_needsTick",
- get: function get() {
- return this.pending || this.playState === 'running' || !this._finishedFlag;
- }
- }]);
- return Animation;
- }();
- /**
- * https://github.com/gre/bezier-easing
- * BezierEasing - use bezier curve for transition easing function
- * by Gaëtan Renaudeau 2014 - 2015 – MIT License
- */
- // These values are established by empiricism with tests (tradeoff: performance VS precision)
- var NEWTON_ITERATIONS = 4;
- var NEWTON_MIN_SLOPE = 0.001;
- var SUBDIVISION_PRECISION = 0.0000001;
- var SUBDIVISION_MAX_ITERATIONS = 10;
- var kSplineTableSize = 11;
- var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
- var float32ArraySupported = typeof Float32Array === 'function';
- var A = function A(aA1, aA2) {
- return 1.0 - 3.0 * aA2 + 3.0 * aA1;
- };
- var B = function B(aA1, aA2) {
- return 3.0 * aA2 - 6.0 * aA1;
- };
- var C = function C(aA1) {
- return 3.0 * aA1;
- };
- // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
- var calcBezier = function calcBezier(aT, aA1, aA2) {
- return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
- };
- // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
- var getSlope = function getSlope(aT, aA1, aA2) {
- return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
- };
- var binarySubdivide = function binarySubdivide(aX, aA, aB, mX1, mX2) {
- var currentX,
- currentT,
- i = 0;
- do {
- currentT = aA + (aB - aA) / 2.0;
- currentX = calcBezier(currentT, mX1, mX2) - aX;
- if (currentX > 0.0) aB = currentT;else aA = currentT;
- } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
- return currentT;
- };
- var newtonRaphsonIterate = function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
- for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
- var currentSlope = getSlope(aGuessT, mX1, mX2);
- if (currentSlope === 0.0) return aGuessT;
- var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
- aGuessT -= currentX / currentSlope;
- }
- return aGuessT;
- };
- var bezier = function bezier(mX1, mY1, mX2, mY2) {
- if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) throw new Error('bezier x values must be in [0, 1] range');
- if (mX1 === mY1 && mX2 === mY2) return function (t) {
- return t;
- };
- // Precompute samples table
- var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
- for (var i = 0; i < kSplineTableSize; ++i) {
- sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
- }
- var getTForX = function getTForX(aX) {
- var intervalStart = 0.0;
- var currentSample = 1;
- var lastSample = kSplineTableSize - 1;
- for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) intervalStart += kSampleStepSize;
- --currentSample;
- // Interpolate to provide an initial guess for t
- var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
- var guessForT = intervalStart + dist * kSampleStepSize;
- var initialSlope = getSlope(guessForT, mX1, mX2);
- if (initialSlope >= NEWTON_MIN_SLOPE) return newtonRaphsonIterate(aX, guessForT, mX1, mX2);else if (initialSlope === 0.0) return guessForT;else {
- return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
- }
- };
- return function (t) {
- // Because JavaScript number are imprecise, we should guarantee the extremes are right.
- if (t === 0 || t === 1) return t;
- return calcBezier(getTForX(t), mY1, mY2);
- };
- };
- var convertToDash = function convertToDash(str) {
- str = str.replace(/([A-Z])/g, function (letter) {
- return "-" + letter.toLowerCase();
- });
- // Remove first dash
- return str.charAt(0) === '-' ? str.substring(1) : str;
- };
- /**
- Easing Functions from anime.js, they are tried and true, so, its better to use them instead of other alternatives
- */
- var Quad = function Quad(t) {
- return Math.pow(t, 2);
- };
- var Cubic = function Cubic(t) {
- return Math.pow(t, 3);
- };
- var Quart = function Quart(t) {
- return Math.pow(t, 4);
- };
- var Quint = function Quint(t) {
- return Math.pow(t, 5);
- };
- var Expo = function Expo(t) {
- return Math.pow(t, 6);
- };
- var Sine = function Sine(t) {
- return 1 - Math.cos(t * Math.PI / 2);
- };
- var Circ = function Circ(t) {
- return 1 - Math.sqrt(1 - t * t);
- };
- var Back = function Back(t) {
- return t * t * (3 * t - 2);
- };
- var Bounce = function Bounce(t) {
- var pow2,
- b = 4;
- while (t < ((pow2 = Math.pow(2, --b)) - 1) / 11) {}
- return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - t, 2);
- };
- var Elastic = function Elastic(t, params) {
- if (params === void 0) {
- params = [];
- }
- var _params = params,
- _params$ = _params[0],
- amplitude = _params$ === void 0 ? 1 : _params$,
- _params$2 = _params[1],
- period = _params$2 === void 0 ? 0.5 : _params$2;
- var a = clamp(Number(amplitude), 1, 10);
- var p = clamp(Number(period), 0.1, 2);
- if (t === 0 || t === 1) return t;
- return -a * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1 - p / (Math.PI * 2) * Math.asin(1 / a)) * (Math.PI * 2) / p);
- };
- var Spring = function Spring(t, params, duration) {
- if (params === void 0) {
- params = [];
- }
- var _params2 = params,
- _params2$ = _params2[0],
- mass = _params2$ === void 0 ? 1 : _params2$,
- _params2$2 = _params2[1],
- stiffness = _params2$2 === void 0 ? 100 : _params2$2,
- _params2$3 = _params2[2],
- damping = _params2$3 === void 0 ? 10 : _params2$3,
- _params2$4 = _params2[3],
- velocity = _params2$4 === void 0 ? 0 : _params2$4;
- mass = clamp(mass, 0.1, 1000);
- stiffness = clamp(stiffness, 0.1, 1000);
- damping = clamp(damping, 0.1, 1000);
- velocity = clamp(velocity, 0.1, 1000);
- var w0 = Math.sqrt(stiffness / mass);
- var zeta = damping / (2 * Math.sqrt(stiffness * mass));
- var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
- var a = 1;
- var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
- var progress = duration ? duration * t / 1000 : t;
- if (zeta < 1) {
- progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress));
- } else {
- progress = (a + b * progress) * Math.exp(-progress * w0);
- }
- if (t === 0 || t === 1) return t;
- return 1 - progress;
- };
- /**
- * Cache the durations at set easing parameters
- */
- // export const EasingDurationCache: Map<string | TypeEasingFunction, number> = new Map();
- /**
- * The threshold for an infinite loop
- */
- // const INTINITE_LOOP_LIMIT = 10000;
- /** Convert easing parameters to Array of numbers, e.g. "spring(2, 500)" to [2, 500] */
- // export const parseEasingParameters = (str: string) => {
- // const match = /(\(|\s)([^)]+)\)?/.exec(str);
- // return match
- // ? match[2].split(',').map((value) => {
- // const num = parseFloat(value);
- // return !Number.isNaN(num) ? num : value.trim();
- // })
- // : [];
- // };
- /**
- * The spring easing function will only look smooth at certain durations, with certain parameters.
- * This functions returns the optimal duration to create a smooth springy animation based on physics
- *
- * Note: it can also be used to determine the optimal duration of other types of easing function, but be careful of 'in-'
- * easing functions, because of the nature of the function it can sometimes create an infinite loop, I suggest only using
- * `getEasingDuration` for `spring`, specifically 'out-spring' and 'spring'
- */
- // export const getEasingDuration = (easing: string | TypeEasingFunction = 'spring') => {
- // if (EasingDurationCache.has(easing)) return EasingDurationCache.get(easing);
- // // eslint-disable-next-line @typescript-eslint/no-use-before-define
- // const easingFunction = typeof easing == 'function' ? easing : getEasingFunction(easing as string);
- // const params = typeof easing == 'function' ? [] : parseEasingParameters(easing);
- // const frame = 1 / 6;
- // let elapsed = 0;
- // let rest = 0;
- // let count = 0;
- // while (++count < INTINITE_LOOP_LIMIT) {
- // elapsed += frame;
- // if (easingFunction(elapsed, params, undefined) === 1) {
- // rest++;
- // if (rest >= 16) break;
- // } else {
- // rest = 0;
- // }
- // }
- // const duration = elapsed * frame * 1000;
- // EasingDurationCache.set(easing, duration);
- // return duration;
- // };
- /**
- These Easing Functions are based off of the Sozi Project's easing functions
- https://github.com/sozi-projects/Sozi/blob/d72e44ebd580dc7579d1e177406ad41e632f961d/src/js/player/Timing.js
- */
- var Steps = function Steps(t, params) {
- if (params === void 0) {
- params = [];
- }
- var _params3 = params,
- _params3$ = _params3[0],
- steps = _params3$ === void 0 ? 10 : _params3$,
- type = _params3[1];
- var trunc = type == 'start' ? Math.ceil : Math.floor;
- return trunc(clamp(t, 0, 1) * steps) / steps;
- };
- // @ts-ignore
- var Bezier = function Bezier(t, params) {
- if (params === void 0) {
- params = [];
- }
- var _params4 = params,
- mX1 = _params4[0],
- mY1 = _params4[1],
- mX2 = _params4[2],
- mY2 = _params4[3];
- return bezier(mX1, mY1, mX2, mY2)(t);
- };
- /** The default `ease-in` easing function */
- var easein = bezier(0.42, 0.0, 1.0, 1.0);
- /** Converts easing functions to their `out`counter parts */
- var EaseOut = function EaseOut(ease) {
- return function (t, params, duration) {
- if (params === void 0) {
- params = [];
- }
- return 1 - ease(1 - t, params, duration);
- };
- };
- /** Converts easing functions to their `in-out` counter parts */
- var EaseInOut = function EaseInOut(ease) {
- return function (t, params, duration) {
- if (params === void 0) {
- params = [];
- }
- return t < 0.5 ? ease(t * 2, params, duration) / 2 : 1 - ease(t * -2 + 2, params, duration) / 2;
- };
- };
- /** Converts easing functions to their `out-in` counter parts */
- var EaseOutIn = function EaseOutIn(ease) {
- return function (t, params, duration) {
- if (params === void 0) {
- params = [];
- }
- return t < 0.5 ? (1 - ease(1 - t * 2, params, duration)) / 2 : (ease(t * 2 - 1, params, duration) + 1) / 2;
- };
- };
- var EasingFunctions = {
- steps: Steps,
- 'step-start': function stepStart(t) {
- return Steps(t, [1, 'start']);
- },
- 'step-end': function stepEnd(t) {
- return Steps(t, [1, 'end']);
- },
- linear: function linear(t) {
- return t;
- },
- 'cubic-bezier': Bezier,
- ease: function ease(t) {
- return Bezier(t, [0.25, 0.1, 0.25, 1.0]);
- },
- in: easein,
- out: EaseOut(easein),
- 'in-out': EaseInOut(easein),
- 'out-in': EaseOutIn(easein),
- 'in-quad': Quad,
- 'out-quad': EaseOut(Quad),
- 'in-out-quad': EaseInOut(Quad),
- 'out-in-quad': EaseOutIn(Quad),
- 'in-cubic': Cubic,
- 'out-cubic': EaseOut(Cubic),
- 'in-out-cubic': EaseInOut(Cubic),
- 'out-in-cubic': EaseOutIn(Cubic),
- 'in-quart': Quart,
- 'out-quart': EaseOut(Quart),
- 'in-out-quart': EaseInOut(Quart),
- 'out-in-quart': EaseOutIn(Quart),
- 'in-quint': Quint,
- 'out-quint': EaseOut(Quint),
- 'in-out-quint': EaseInOut(Quint),
- 'out-in-quint': EaseOutIn(Quint),
- 'in-expo': Expo,
- 'out-expo': EaseOut(Expo),
- 'in-out-expo': EaseInOut(Expo),
- 'out-in-expo': EaseOutIn(Expo),
- 'in-sine': Sine,
- 'out-sine': EaseOut(Sine),
- 'in-out-sine': EaseInOut(Sine),
- 'out-in-sine': EaseOutIn(Sine),
- 'in-circ': Circ,
- 'out-circ': EaseOut(Circ),
- 'in-out-circ': EaseInOut(Circ),
- 'out-in-circ': EaseOutIn(Circ),
- 'in-back': Back,
- 'out-back': EaseOut(Back),
- 'in-out-back': EaseInOut(Back),
- 'out-in-back': EaseOutIn(Back),
- 'in-bounce': Bounce,
- 'out-bounce': EaseOut(Bounce),
- 'in-out-bounce': EaseInOut(Bounce),
- 'out-in-bounce': EaseOutIn(Bounce),
- 'in-elastic': Elastic,
- 'out-elastic': EaseOut(Elastic),
- 'in-out-elastic': EaseInOut(Elastic),
- 'out-in-elastic': EaseOutIn(Elastic),
- spring: Spring,
- 'spring-in': Spring,
- 'spring-out': EaseOut(Spring),
- 'spring-in-out': EaseInOut(Spring),
- 'spring-out-in': EaseOutIn(Spring)
- };
- /**
- * Convert string easing to their proper form
- */
- var complexEasingSyntax = function complexEasingSyntax(ease) {
- return convertToDash(ease).replace(/^ease-/, '') // Remove the "ease-" keyword
- .replace(/(\(|\s).+/, '') // Remove the function brackets and parameters
- .toLowerCase().trim();
- };
- /** Re-maps a number from one range to another. Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. */
- var getEasingFunction = function getEasingFunction(ease) {
- return EasingFunctions[complexEasingSyntax(ease)] || EasingFunctions.linear;
- };
- // /**
- // * Allows you to register new easing functions
- // */
- // export const registerEasingFunction = (key: string, fn: TypeEasingFunction) => {
- // Object.assign(EasingFunctions, {
- // [key]: fn,
- // });
- // };
- // /**
- // * Allows you to register multiple new easing functions
- // */
- // export const registerEasingFunctions = (...obj: typeof EasingFunctions[]) => {
- // Object.assign(EasingFunctions, ...obj);
- // };
- var linear = function linear(x) {
- return x;
- };
- var Start = 1;
- var Middle = 0.5;
- var End = 0;
- function step(count, pos) {
- return function (x) {
- if (x >= 1) {
- return 1;
- }
- var stepSize = 1 / count;
- x += pos * stepSize;
- return x - x % stepSize;
- };
- }
- var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
- var cubicBezierRe = new RegExp('cubic-bezier\\(' + numberString + ',' + numberString + ',' + numberString + ',' + numberString + '\\)');
- var step1Re = /steps\(\s*(\d+)\s*\)/;
- var step2Re = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
- function parseEasingFunction(normalizedEasing) {
- var cubicData = cubicBezierRe.exec(normalizedEasing);
- if (cubicData) {
- // @ts-ignore
- return bezier.apply(void 0, cubicData.slice(1).map(Number));
- }
- var step1Data = step1Re.exec(normalizedEasing);
- if (step1Data) {
- return step(Number(step1Data[1]), End);
- }
- var step2Data = step2Re.exec(normalizedEasing);
- if (step2Data) {
- // @ts-ignore
- return step(Number(step2Data[1]), {
- start: Start,
- middle: Middle,
- end: End
- }[step2Data[2]]);
- }
- return getEasingFunction(normalizedEasing);
- }
- function calculateActiveDuration(timing) {
- // @ts-ignore
- return Math.abs(repeatedDuration(timing) / (timing.playbackRate || 1));
- }
- function repeatedDuration(timing) {
- var _timing$iterations;
- // https://drafts.csswg.org/web-animations/#calculating-the-active-duration
- if (timing.duration === 0 || timing.iterations === 0) {
- return 0;
- }
- // @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration#value
- // if (timing.duration === 'auto') {
- // timing.duration = 0;
- // }
- return (timing.duration === 'auto' ? 0 : Number(timing.duration)) * ((_timing$iterations = timing.iterations) !== null && _timing$iterations !== void 0 ? _timing$iterations : 1);
- }
- var PhaseNone = 0;
- var PhaseBefore = 1;
- var PhaseAfter = 2;
- var PhaseActive = 3;
- function calculatePhase(activeDuration, localTime, timing) {
- // https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
- if (localTime === null) {
- return PhaseNone;
- }
- var endTime = timing.endTime;
- if (localTime < Math.min(timing.delay, endTime)) {
- return PhaseBefore;
- }
- if (localTime >= Math.min(timing.delay + activeDuration + timing.endDelay, endTime)) {
- return PhaseAfter;
- }
- return PhaseActive;
- }
- function calculateActiveTime(activeDuration, fillMode, localTime, phase, delay) {
- // https://drafts.csswg.org/web-animations/#calculating-the-active-time
- switch (phase) {
- case PhaseBefore:
- if (fillMode === 'backwards' || fillMode === 'both') return 0;
- return null;
- case PhaseActive:
- return localTime - delay;
- case PhaseAfter:
- if (fillMode === 'forwards' || fillMode === 'both') return activeDuration;
- return null;
- case PhaseNone:
- return null;
- }
- }
- function calculateOverallProgress(iterationDuration, phase, iterations, activeTime, iterationStart) {
- // https://drafts.csswg.org/web-animations/#calculating-the-overall-progress
- var overallProgress = iterationStart;
- if (iterationDuration === 0) {
- if (phase !== PhaseBefore) {
- overallProgress += iterations;
- }
- } else {
- overallProgress += activeTime / iterationDuration;
- }
- return overallProgress;
- }
- function calculateSimpleIterationProgress(overallProgress, iterationStart, phase, iterations, activeTime, iterationDuration) {
- // https://drafts.csswg.org/web-animations/#calculating-the-simple-iteration-progress
- var simpleIterationProgress = overallProgress === Infinity ? iterationStart % 1 : overallProgress % 1;
- if (simpleIterationProgress === 0 && phase === PhaseAfter && iterations !== 0 && (activeTime !== 0 || iterationDuration === 0)) {
- simpleIterationProgress = 1;
- }
- return simpleIterationProgress;
- }
- function calculateCurrentIteration(phase, iterations, simpleIterationProgress, overallProgress) {
- // https://drafts.csswg.org/web-animations/#calculating-the-current-iteration
- if (phase === PhaseAfter && iterations === Infinity) {
- return Infinity;
- }
- if (simpleIterationProgress === 1) {
- return Math.floor(overallProgress) - 1;
- }
- return Math.floor(overallProgress);
- }
- function calculateDirectedProgress(playbackDirection, currentIteration, simpleIterationProgress) {
- // https://drafts.csswg.org/web-animations/#calculating-the-directed-progress
- var currentDirection = playbackDirection;
- if (playbackDirection !== 'normal' && playbackDirection !== 'reverse') {
- var d = currentIteration;
- if (playbackDirection === 'alternate-reverse') {
- d += 1;
- }
- currentDirection = 'normal';
- if (d !== Infinity && d % 2 !== 0) {
- currentDirection = 'reverse';
- }
- }
- if (currentDirection === 'normal') {
- return simpleIterationProgress;
- }
- return 1 - simpleIterationProgress;
- }
- function calculateIterationProgress(activeDuration, localTime, timing) {
- var phase = calculatePhase(activeDuration, localTime, timing);
- var activeTime = calculateActiveTime(activeDuration, timing.fill, localTime, phase, timing.delay);
- if (activeTime === null) return null;
- var duration = timing.duration === 'auto' ? 0 : timing.duration;
- var overallProgress = calculateOverallProgress(duration, phase, timing.iterations, activeTime, timing.iterationStart);
- var simpleIterationProgress = calculateSimpleIterationProgress(overallProgress, timing.iterationStart, phase, timing.iterations, activeTime, duration);
- var currentIteration = calculateCurrentIteration(phase, timing.iterations, simpleIterationProgress, overallProgress);
- var directedProgress = calculateDirectedProgress(timing.direction, currentIteration, simpleIterationProgress);
- timing.currentIteration = currentIteration;
- timing.progress = directedProgress;
- // https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress
- // https://drafts.csswg.org/web-animations/#calculating-the-iteration-progress
- return timing.easingFunction(directedProgress);
- }
- function convertEffectInput(keyframes, timing, target) {
- var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframes, timing);
- var interpolations = makeInterpolations(propertySpecificKeyframeGroups, target);
- return function (target, fraction) {
- if (fraction !== null) {
- interpolations.filter(function (interpolation) {
- return fraction >= interpolation.applyFrom && fraction < interpolation.applyTo;
- }).forEach(function (interpolation) {
- var offsetFraction = fraction - interpolation.startOffset;
- var localDuration = interpolation.endOffset - interpolation.startOffset;
- var scaledLocalTime = localDuration === 0 ? 0 : interpolation.easingFunction(offsetFraction / localDuration);
- // apply updated attribute
- target.setAttribute(interpolation.property, interpolation.interpolation(scaledLocalTime));
- // if (interpolation.property === 'visibility') {
- // console.log(
- // scaledLocalTime,
- // interpolation.interpolation(scaledLocalTime),
- // );
- // }
- });
- } else {
- for (var property in propertySpecificKeyframeGroups) if (isNotReservedWord(property)) {
- // clear attribute
- target.setAttribute(property, null);
- }
- }
- };
- }
- function isNotReservedWord(member) {
- return member !== 'offset' && member !== 'easing' && member !== 'composite' && member !== 'computedOffset';
- }
- function makePropertySpecificKeyframeGroups(keyframes, timing) {
- var propertySpecificKeyframeGroups = {};
- for (var i = 0; i < keyframes.length; i++) {
- for (var member in keyframes[i]) {
- if (isNotReservedWord(member)) {
- var propertySpecificKeyframe = {
- offset: keyframes[i].offset,
- computedOffset: keyframes[i].computedOffset,
- easing: keyframes[i].easing,
- easingFunction: parseEasingFunction(keyframes[i].easing) || timing.easingFunction,
- value: keyframes[i][member]
- };
- propertySpecificKeyframeGroups[member] = propertySpecificKeyframeGroups[member] || [];
- propertySpecificKeyframeGroups[member].push(propertySpecificKeyframe);
- }
- }
- }
- return propertySpecificKeyframeGroups;
- }
- function makeInterpolations(propertySpecificKeyframeGroups, target) {
- var interpolations = [];
- for (var groupName in propertySpecificKeyframeGroups) {
- var keyframes = propertySpecificKeyframeGroups[groupName];
- for (var i = 0; i < keyframes.length - 1; i++) {
- var startIndex = i;
- var endIndex = i + 1;
- var startOffset = keyframes[startIndex].computedOffset;
- var endOffset = keyframes[endIndex].computedOffset;
- var applyFrom = startOffset;
- var applyTo = endOffset;
- if (i === 0) {
- applyFrom = -Infinity;
- if (endOffset === 0) {
- endIndex = startIndex;
- }
- }
- if (i === keyframes.length - 2) {
- applyTo = Infinity;
- if (startOffset === 1) {
- startIndex = endIndex;
- }
- }
- interpolations.push({
- applyFrom: applyFrom,
- applyTo: applyTo,
- startOffset: keyframes[startIndex].computedOffset,
- endOffset: keyframes[endIndex].computedOffset,
- easingFunction: keyframes[startIndex].easingFunction,
- property: groupName,
- interpolation: propertyInterpolation(groupName, keyframes[startIndex].value, keyframes[endIndex].value, target)
- });
- }
- }
- interpolations.sort(function (leftInterpolation, rightInterpolation) {
- return leftInterpolation.startOffset - rightInterpolation.startOffset;
- });
- return interpolations;
- }
- var InterpolationFactory = function InterpolationFactory(from, to,
- // eslint-disable-next-line @typescript-eslint/ban-types
- convertToString) {
- return function (f) {
- var interpolated = interpolate(from, to, f);
- return !runtime.enableCSSParsing && isNumber(interpolated) ? interpolated : convertToString(interpolated);
- };
- };
- function propertyInterpolation(property, left, right, target) {
- var metadata = propertyMetadataCache[property];
- // discrete step
- // if (property === 'visibility') {
- // return function (t: number) {
- // if (t === 0) return left;
- // if (t === 1) return right;
- // debugger;
- // return t < 0.5 ? left : right;
- // };
- // }
- if (metadata && metadata.syntax && metadata.int) {
- var propertyHandler = runtime.styleValueRegistry.getPropertySyntax(metadata.syntax);
- if (propertyHandler) {
- var usedLeft;
- var usedRight;
- if (runtime.enableCSSParsing) {
- var computedLeft = runtime.styleValueRegistry.parseProperty(property, left, target);
- var computedRight = runtime.styleValueRegistry.parseProperty(property, right, target);
- usedLeft = runtime.styleValueRegistry.computeProperty(property, computedLeft, target);
- usedRight = runtime.styleValueRegistry.computeProperty(property, computedRight, target);
- } else {
- var parser = propertyHandler.parserWithCSSDisabled;
- usedLeft = parser ? parser(left, target) : left;
- usedRight = parser ? parser(right, target) : right;
- }
- // merger [left, right, n2string()]
- var interpolationArgs = propertyHandler.mixer(usedLeft, usedRight, target);
- if (interpolationArgs) {
- var interp = InterpolationFactory.apply(void 0, interpolationArgs);
- return function (t) {
- if (t === 0) return left;
- if (t === 1) return right;
- return interp(t);
- };
- }
- }
- }
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
- return InterpolationFactory(false, true, function (bool) {
- return bool ? right : left;
- });
- }
- /**
- * interpolate with number, boolean, number[], boolean[]
- */
- function interpolate(from, to, f) {
- if (typeof from === 'number' && typeof to === 'number') {
- return from * (1 - f) + to * f;
- }
- if (typeof from === 'boolean' && typeof to === 'boolean' || typeof from === 'string' && typeof to === 'string' // skip string, eg. path ['M', 10, 10]
- ) {
- return f < 0.5 ? from : to;
- }
- if (Array.isArray(from) && Array.isArray(to)) {
- // interpolate arrays/matrix
- var fromLength = from.length;
- var toLength = to.length;
- var length = Math.max(fromLength, toLength);
- var r = [];
- for (var i = 0; i < length; i++) {
- r.push(interpolate(from[i < fromLength ? i : fromLength - 1], to[i < toLength ? i : toLength - 1], f));
- }
- return r;
- }
- throw new Error('Mismatched interpolation arguments ' + from + ':' + to);
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming
- */
- var AnimationEffectTiming = /*#__PURE__*/function () {
- function AnimationEffectTiming() {
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay
- */
- this.delay = 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/direction
- */
- this.direction = 'normal';
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration
- */
- this.duration = 'auto';
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing
- */
- this._easing = 'linear';
- this.easingFunction = linear;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/endDelay
- */
- this.endDelay = 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
- */
- this.fill = 'auto';
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterationStart
- */
- this.iterationStart = 0;
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterations
- */
- this.iterations = 1;
- /**
- * @deprecated
- */
- this.playbackRate = void 0;
- /**
- * ref to effect
- */
- this.effect = void 0;
- this.composite = void 0;
- /**
- * ComputedEffectTiming
- * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
- */
- this.activeDuration = void 0;
- this.endTime = void 0;
- this.currentIteration = null;
- this.progress = null;
- }
- _createClass(AnimationEffectTiming, [{
- key: "easing",
- get: function get() {
- return this._easing;
- },
- set: function set(value) {
- this.easingFunction = parseEasingFunction(value);
- this._easing = value;
- }
- }]);
- return AnimationEffectTiming;
- }();
- /**
- * @example
- {
- translateY: [200, 300],
- scale: [1, 10],
- }
- * groups' length can be different, the following config should generate 3 frames:
- @example
- {
- translateY: [200, 300, 400],
- scale: [1, 10],
- }
- */
- function convertToArrayForm(effectInput) {
- var normalizedEffectInput = [];
- for (var property in effectInput) {
- // skip reserved props
- if (property in ['easing', 'offset', 'composite']) {
- continue;
- }
- // @ts-ignore
- var values = effectInput[property];
- if (!Array.isArray(values)) {
- values = [values];
- }
- var numKeyframes = values.length;
- for (var i = 0; i < numKeyframes; i++) {
- if (!normalizedEffectInput[i]) {
- var keyframe = {};
- if ('offset' in effectInput) {
- keyframe.offset = Number(effectInput.offset);
- }
- if ('easing' in effectInput) {
- // @ts-ignore
- keyframe.easing = effectInput.easing;
- }
- if ('composite' in effectInput) {
- // @ts-ignore
- keyframe.composite = effectInput.composite;
- }
- normalizedEffectInput[i] = keyframe;
- }
- if (values[i] !== undefined && values[i] !== null) {
- normalizedEffectInput[i][property] = values[i];
- }
- }
- }
- normalizedEffectInput.sort(function (a, b) {
- return (a.computedOffset || 0) - (b.computedOffset || 0);
- });
- return normalizedEffectInput;
- }
- function normalizeKeyframes(effectInput, timing) {
- if (effectInput === null) {
- return [];
- }
- if (!Array.isArray(effectInput)) {
- effectInput = convertToArrayForm(effectInput);
- }
- var keyframes = effectInput.map(function (originalKeyframe) {
- var keyframe = {};
- if (timing === null || timing === void 0 ? void 0 : timing.composite) {
- // This will be auto if the composite operation specified on the effect is being used.
- // @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
- keyframe.composite = 'auto';
- }
- for (var member in originalKeyframe) {
- var memberValue = originalKeyframe[member];
- if (member === 'offset') {
- if (memberValue !== null) {
- memberValue = Number(memberValue);
- if (!isFinite(memberValue)) throw new Error('Keyframe offsets must be numbers.');
- if (memberValue < 0 || memberValue > 1) throw new Error('Keyframe offsets must be between 0 and 1.');
- keyframe.computedOffset = memberValue;
- }
- } else if (member === 'composite') {
- // TODO: Support add & accumulate in KeyframeEffect.composite
- // @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
- if (['replace', 'add', 'accumulate', 'auto'].indexOf(memberValue) === -1) {
- throw new Error(memberValue + " compositing is not supported");
- }
- } else ;
- // assign to keyframe, no need to parse shorthand value
- keyframe[member] = memberValue;
- }
- if (keyframe.offset === undefined) {
- keyframe.offset = null;
- }
- if (keyframe.easing === undefined) {
- // override with timing.easing
- keyframe.easing = (timing === null || timing === void 0 ? void 0 : timing.easing) || 'linear';
- }
- if (keyframe.composite === undefined) {
- keyframe.composite = 'auto';
- }
- return keyframe;
- });
- var everyFrameHasOffset = true;
- var previousOffset = -Infinity;
- for (var i = 0; i < keyframes.length; i++) {
- var offset = keyframes[i].offset;
- if (!isNil(offset)) {
- if (offset < previousOffset) {
- throw new TypeError('Keyframes are not loosely sorted by offset. Sort or specify offsets.');
- }
- previousOffset = offset;
- } else {
- everyFrameHasOffset = false;
- }
- }
- keyframes = keyframes.filter(function (keyframe) {
- return Number(keyframe.offset) >= 0 && Number(keyframe.offset) <= 1;
- });
- function spaceKeyframes() {
- var _keyframes$offset;
- var length = keyframes.length;
- keyframes[length - 1].computedOffset = Number((_keyframes$offset = keyframes[length - 1].offset) !== null && _keyframes$offset !== void 0 ? _keyframes$offset : 1);
- if (length > 1) {
- var _keyframes$0$offset;
- keyframes[0].computedOffset = Number((_keyframes$0$offset = keyframes[0].offset) !== null && _keyframes$0$offset !== void 0 ? _keyframes$0$offset : 0);
- }
- var previousIndex = 0;
- var previousOffset = Number(keyframes[0].computedOffset);
- for (var _i = 1; _i < length; _i++) {
- var _offset = keyframes[_i].computedOffset;
- if (!isNil(_offset) && !isNil(previousOffset)) {
- for (var j = 1; j < _i - previousIndex; j++) keyframes[previousIndex + j].computedOffset = previousOffset + (Number(_offset) - previousOffset) * j / (_i - previousIndex);
- previousIndex = _i;
- previousOffset = Number(_offset);
- }
- }
- }
- if (!everyFrameHasOffset) spaceKeyframes();
- return keyframes;
- }
- var fills = 'backwards|forwards|both|none'.split('|');
- var directions = 'reverse|alternate|alternate-reverse'.split('|');
- function makeTiming(timingInput, forGroup) {
- var timing = new AnimationEffectTiming();
- if (forGroup) {
- timing.fill = 'both';
- timing.duration = 'auto';
- }
- if (typeof timingInput === 'number' && !isNaN(timingInput)) {
- timing.duration = timingInput;
- } else if (timingInput !== undefined) {
- Object.keys(timingInput).forEach(function (property) {
- if (timingInput[property] !== undefined && timingInput[property] !== null && timingInput[property] !== 'auto') {
- if (typeof timing[property] === 'number' || property === 'duration') {
- if (typeof timingInput[property] !== 'number' || isNaN(timingInput[property])) {
- return;
- }
- }
- if (property === 'fill' && fills.indexOf(timingInput[property]) === -1) {
- return;
- }
- if (property === 'direction' && directions.indexOf(timingInput[property]) === -1) {
- return;
- }
- // @ts-ignore
- timing[property] = timingInput[property];
- }
- });
- }
- return timing;
- }
- function normalizeTimingInput(timingInput, forGroup) {
- var _timingInput;
- timingInput = numericTimingToObject((_timingInput = timingInput) !== null && _timingInput !== void 0 ? _timingInput : {
- duration: 'auto'
- });
- return makeTiming(timingInput, forGroup);
- }
- function numericTimingToObject(timingInput) {
- if (typeof timingInput === 'number') {
- if (isNaN(timingInput)) {
- timingInput = {
- duration: 'auto'
- };
- } else {
- timingInput = {
- duration: timingInput
- };
- }
- }
- return timingInput;
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect
- * @example
- const circleDownKeyframes = new KeyframeEffect(
- circle, // element to animate
- [
- { transform: 'translateY(0)' }, // keyframe
- { transform: 'translateY(100)' } // keyframe
- ],
- { duration: 3000, fill: 'forwards' } // keyframe options
- );
- *
- */
- var KeyframeEffect = /*#__PURE__*/function () {
- function KeyframeEffect(target, effectInput, timingInput) {
- var _this = this;
- this.composite = 'replace';
- this.iterationComposite = 'replace';
- // pseudoElement: string | null;
- this.target = void 0;
- this.animation = void 0;
- this.timing = void 0;
- this.computedTiming = void 0;
- this.normalizedKeyframes = void 0;
- this.timeFraction = void 0;
- this.interpolations = void 0;
- this.target = target;
- this.timing = normalizeTimingInput(timingInput, false);
- this.timing.effect = this;
- this.timing.activeDuration = calculateActiveDuration(this.timing);
- this.timing.endTime = Math.max(0, this.timing.delay + this.timing.activeDuration + this.timing.endDelay);
- this.normalizedKeyframes = normalizeKeyframes(effectInput, this.timing);
- this.interpolations = convertEffectInput(this.normalizedKeyframes, this.timing, this.target);
- // 不支持 proxy 时降级成 this.timing
- var Proxy = runtime.globalThis.Proxy;
- this.computedTiming = Proxy ? new Proxy(this.timing, {
- get: function get(target, prop) {
- if (prop === 'duration') {
- return target.duration === 'auto' ? 0 : target.duration;
- } else if (prop === 'fill') {
- return target.fill === 'auto' ? 'none' : target.fill;
- } else if (prop === 'localTime') {
- return _this.animation && _this.animation.currentTime || null;
- } else if (prop === 'currentIteration') {
- if (!_this.animation || _this.animation.playState !== 'running') {
- return null;
- }
- return target.currentIteration || 0;
- } else if (prop === 'progress') {
- if (!_this.animation || _this.animation.playState !== 'running') {
- return null;
- }
- return target.progress || 0;
- }
- return target[prop];
- },
- set: function set() {
- return true;
- }
- }) : this.timing;
- }
- var _proto = KeyframeEffect.prototype;
- _proto.applyInterpolations = function applyInterpolations() {
- this.interpolations(this.target, Number(this.timeFraction));
- };
- _proto.update = function update(localTime) {
- if (localTime === null) {
- return false;
- }
- this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
- return this.timeFraction !== null;
- };
- _proto.getKeyframes = function getKeyframes() {
- return this.normalizedKeyframes;
- };
- _proto.setKeyframes = function setKeyframes(keyframes) {
- this.normalizedKeyframes = normalizeKeyframes(keyframes);
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
- */;
- _proto.getComputedTiming = function getComputedTiming() {
- return this.computedTiming;
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
- */;
- _proto.getTiming = function getTiming() {
- return this.timing;
- }
- /**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
- */;
- _proto.updateTiming = function updateTiming(timing) {
- var _this2 = this;
- Object.keys(timing || {}).forEach(function (name) {
- _this2.timing[name] = timing[name];
- });
- };
- return KeyframeEffect;
- }();
- function compareAnimations(leftAnimation, rightAnimation) {
- return Number(leftAnimation.id) - Number(rightAnimation.id);
- }
- /**
- * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web-animations-js/index.d.ts
- */
- var AnimationTimeline = /*#__PURE__*/function () {
- function AnimationTimeline(document) {
- var _this = this;
- this.document = void 0;
- /**
- * all active animations
- */
- this.animations = [];
- this.ticking = false;
- this.timelineTicking = false;
- this.hasRestartedThisFrame = false;
- this.animationsWithPromises = [];
- this.inTick = false;
- this.pendingEffects = [];
- this.currentTime = null;
- this.rafId = 0;
- this.rafCallbacks = [];
- this.frameId = void 0;
- this.webAnimationsNextTick = function (t) {
- _this.currentTime = t;
- _this.discardAnimations();
- if (_this.animations.length === 0) {
- _this.timelineTicking = false;
- } else {
- _this.requestAnimationFrame(_this.webAnimationsNextTick);
- }
- };
- this.processRafCallbacks = function (t) {
- var processing = _this.rafCallbacks;
- _this.rafCallbacks = [];
- if (t < Number(_this.currentTime)) t = Number(_this.currentTime);
- _this.animations.sort(compareAnimations);
- _this.animations = _this.tick(t, true, _this.animations)[0];
- processing.forEach(function (entry) {
- entry[1](t);
- });
- _this.applyPendingEffects();
- };
- this.document = document;
- }
- var _proto = AnimationTimeline.prototype;
- _proto.getAnimations = function getAnimations() {
- this.discardAnimations();
- return this.animations.slice();
- };
- _proto.isTicking = function isTicking() {
- return this.inTick;
- };
- _proto.play = function play(target, keyframes, options) {
- var effect = new KeyframeEffect(target, keyframes, options);
- var animation = new Animation(effect, this);
- this.animations.push(animation);
- this.restartWebAnimationsNextTick();
- animation.updatePromises();
- animation.play();
- animation.updatePromises();
- return animation;
- }
- // RAF is supposed to be the last script to occur before frame rendering but not
- // all browsers behave like this. This function is for synchonously updating an
- // animation's effects whenever its state is mutated by script to work around
- // incorrect script execution ordering by the browser.
- ;
- _proto.applyDirtiedAnimation = function applyDirtiedAnimation(animation) {
- var _this2 = this;
- if (this.inTick) {
- return;
- }
- // update active animations in displayobject
- animation.markTarget();
- var animations = animation.targetAnimations();
- animations.sort(compareAnimations);
- // clear inactive animations
- var inactiveAnimations = this.tick(Number(this.currentTime), false, animations.slice())[1];
- inactiveAnimations.forEach(function (animation) {
- var index = _this2.animations.indexOf(animation);
- if (index !== -1) {
- _this2.animations.splice(index, 1);
- }
- });
- this.applyPendingEffects();
- };
- _proto.restart = function restart() {
- if (!this.ticking) {
- this.ticking = true;
- this.requestAnimationFrame(function () {});
- this.hasRestartedThisFrame = true;
- }
- return this.hasRestartedThisFrame;
- };
- _proto.destroy = function destroy() {
- this.document.defaultView.cancelAnimationFrame(this.frameId);
- };
- _proto.applyPendingEffects = function applyPendingEffects() {
- this.pendingEffects.forEach(function (effect) {
- effect === null || effect === void 0 ? void 0 : effect.applyInterpolations();
- });
- this.pendingEffects = [];
- };
- _proto.updateAnimationsPromises = function updateAnimationsPromises() {
- this.animationsWithPromises = this.animationsWithPromises.filter(function (animation) {
- return animation.updatePromises();
- });
- };
- _proto.discardAnimations = function discardAnimations() {
- this.updateAnimationsPromises();
- this.animations = this.animations.filter(function (animation) {
- return animation.playState !== 'finished' && animation.playState !== 'idle';
- });
- };
- _proto.restartWebAnimationsNextTick = function restartWebAnimationsNextTick() {
- if (!this.timelineTicking) {
- this.timelineTicking = true;
- this.requestAnimationFrame(this.webAnimationsNextTick);
- }
- };
- _proto.rAF = function rAF(f) {
- var id = this.rafId++;
- if (this.rafCallbacks.length === 0) {
- this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
- }
- this.rafCallbacks.push([id, f]);
- return id;
- };
- _proto.requestAnimationFrame = function requestAnimationFrame(f) {
- var _this3 = this;
- return this.rAF(function (x) {
- _this3.updateAnimationsPromises();
- f(x);
- _this3.updateAnimationsPromises();
- });
- };
- _proto.tick = function tick(t, isAnimationFrame, updatingAnimations) {
- var _this4 = this,
- _this$pendingEffects,
- _this$pendingEffects2;
- this.inTick = true;
- this.hasRestartedThisFrame = false;
- this.currentTime = t;
- this.ticking = false;
- var newPendingClears = [];
- var newPendingEffects = [];
- var activeAnimations = [];
- var inactiveAnimations = [];
- updatingAnimations.forEach(function (animation) {
- animation.tick(t, isAnimationFrame);
- if (!animation._inEffect) {
- newPendingClears.push(animation.effect);
- animation.unmarkTarget();
- } else {
- newPendingEffects.push(animation.effect);
- animation.markTarget();
- }
- if (animation._needsTick) _this4.ticking = true;
- var alive = animation._inEffect || animation._needsTick;
- animation._inTimeline = alive;
- if (alive) {
- activeAnimations.push(animation);
- } else {
- inactiveAnimations.push(animation);
- }
- });
- (_this$pendingEffects = this.pendingEffects).push.apply(_this$pendingEffects, newPendingClears);
- (_this$pendingEffects2 = this.pendingEffects).push.apply(_this$pendingEffects2, newPendingEffects);
- if (this.ticking) this.requestAnimationFrame(function () {});
- this.inTick = false;
- return [activeAnimations, inactiveAnimations];
- };
- return AnimationTimeline;
- }();
- runtime.EasingFunction = parseEasingFunction;
- runtime.AnimationTimeline = AnimationTimeline;
- export { Animation, AnimationEvent, AnimationTimeline, KeyframeEffect, compareAnimations, makeTiming, normalizeKeyframes, normalizeTimingInput, numericTimingToObject };
|