@antv/g-web-animations-api - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/index.esm.js

 /*!
  * @antv/g-web-animations-api
  * @description A simple implementation of Web Animations API.
- * @version 2.1.1
- * @date 10/23/2024, 7:14:37 AM
+ * @version 2.1.2
+ * @date 10/23/2024, 11:15:27 AM
  * @author AntVis
@@ -10,2 +10,7 @@ * @docs https://g.antv.antgroup.com/
 import { FederatedEvent, ERROR_MSG_METHOD_NOT_IMPLEMENTED, propertyMetadataCache, runtime } from '@antv/g-lite';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _callSuper from '@babel/runtime/helpers/callSuper';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -18,21 +23,26 @@ import { clamp, isNumber, isNil } from '@antv/util';
 // @ts-ignore
-class AnimationEvent extends FederatedEvent {
-  constructor(manager, target, currentTime, timelineTime) {
-    super(manager);
+var AnimationEvent = /*#__PURE__*/function (_FederatedEvent) {
+  function AnimationEvent(manager, target, currentTime, timelineTime) {
+    var _this;
+    _classCallCheck(this, AnimationEvent);
+    _this = _callSuper(this, AnimationEvent, [manager]);
 
     // @ts-ignore
-    this.currentTime = currentTime;
-    this.timelineTime = timelineTime;
-    this.target = target;
-    this.type = 'finish';
-    this.bubbles = false;
+    _this.currentTime = currentTime;
+    _this.timelineTime = timelineTime;
+    _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;
+    _this.currentTarget = target;
+    _this.defaultPrevented = false;
+    _this.eventPhase = _this.AT_TARGET;
+    _this.timeStamp = Date.now();
+    _this.currentTime = currentTime;
+    _this.timelineTime = timelineTime;
+    return _this;
   }
-}
+  _inherits(AnimationEvent, _FederatedEvent);
+  return _createClass(AnimationEvent);
+}(FederatedEvent);
 
@@ -44,187 +54,6 @@ var sequenceNumber = 0;
  */
-class Animation {
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
-   */
-
-  // animation: InternalAnimation | null;
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending
-   */
-  get pending() {
-    return this._startTime === null && !this._paused && this.playbackRate !== 0 || this.currentTimePending;
-  }
-  get playState() {
-    if (this._idle) return 'idle';
-    if (this._isFinished) return 'finished';
-    if (this._paused) return 'paused';
-    return 'running';
-  }
-
-  /**
-   * record previos state
-   */
-
-  /**
-   * @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();
-   */
-  get ready() {
-    if (!this.readyPromise) {
-      if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
-        this.timeline.animationsWithPromises.push(this);
-      }
-      this.readyPromise = new Promise((resolve, reject) => {
-        this.resolveReadyPromise = () => {
-          resolve(this);
-        };
-        this.rejectReadyPromise = () => {
-          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();
-      }
-    );
-   */
-  get finished() {
-    if (!this.finishedPromise) {
-      if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
-        this.timeline.animationsWithPromises.push(this);
-      }
-      this.finishedPromise = new Promise((resolve, reject) => {
-        this.resolveFinishedPromise = () => {
-          resolve(this);
-        };
-        this.rejectFinishedPromise = () => {
-          reject(new Error());
-        };
-      });
-      if (this.playState === 'finished') {
-        this.resolveFinishedPromise();
-      }
-    }
-    return this.finishedPromise;
-  }
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
-   */
-
-  /**
-   * get called after each frame when running
-   */
-
-  get currentTime() {
-    this.updatePromises();
-    return this._idle || this.currentTimePending ? null : this._currentTime;
-  }
-  set currentTime(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);
-  }
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
-   */
-
-  get startTime() {
-    return this._startTime;
-  }
-  set startTime(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();
-    }
-  }
-  get playbackRate() {
-    return this._playbackRate;
-  }
-  set playbackRate(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();
-  }
-  get _isFinished() {
-    return !this._idle && (this._playbackRate > 0 && Number(this._currentTime) >= this._totalDuration || this._playbackRate < 0 && Number(this._currentTime) <= 0);
-  }
-  get totalDuration() {
-    return this._totalDuration;
-  }
-  get _needsTick() {
-    return this.pending || this.playState === 'running' || !this._finishedFlag;
-  }
-  constructor(effect, timeline) {
+var Animation = /*#__PURE__*/function () {
+  function Animation(effect, timeline) {
     var _this$effect;
+    _classCallCheck(this, Animation);
     this.currentTimePending = false;
@@ -260,222 +89,469 @@ /**
    */
-  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;
+  return _createClass(Animation, [{
+    key: "pending",
+    get:
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
+     */
+
+    // 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';
+    }
+
+    /**
+     * record previos state
+     */
+  }, {
+    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 _this = this;
+      if (!this.readyPromise) {
+        if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
+          this.timeline.animationsWithPromises.push(this);
+        }
+        this.readyPromise = new Promise(function (resolve, reject) {
+          _this.resolveReadyPromise = function () {
+            resolve(_this);
+          };
+          _this.rejectReadyPromise = function () {
+            reject(new Error());
+          };
+        });
+        if (!this.pending) {
+          this.resolveReadyPromise();
+        }
       }
+      return this.readyPromise;
     }
-    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;
+
+    /**
+     * @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 _this2 = this;
+      if (!this.finishedPromise) {
+        if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
+          this.timeline.animationsWithPromises.push(this);
+        }
+        this.finishedPromise = new Promise(function (resolve, reject) {
+          _this2.resolveFinishedPromise = function () {
+            resolve(_this2);
+          };
+          _this2.rejectFinishedPromise = function () {
+            reject(new Error());
+          };
+        });
+        if (this.playState === 'finished') {
+          this.resolveFinishedPromise();
+        }
       }
+      return this.finishedPromise;
     }
-    this.oldPlayState = newPlayState;
-    return this.readyPromise || this.finishedPromise;
-  }
-  play() {
-    this.updatePromises();
-    this._paused = false;
-    if (this._isFinished || this._idle) {
-      this.rewind();
-      this._startTime = null;
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
+     */
+
+    /**
+     * get called after each frame when running
+     */
+  }, {
+    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);
     }
-    this._finishedFlag = false;
-    this._idle = false;
-    this.ensureAlive();
-    this.timeline.applyDirtiedAnimation(this);
-    if (this.timeline.animations.indexOf(this) === -1) {
-      this.timeline.animations.push(this);
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
+     */
+  }, {
+    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();
+      }
     }
-    this.updatePromises();
-  }
-  pause() {
-    this.updatePromises();
-    if (this.currentTime) {
-      this._holdTime = this.currentTime;
+  }, {
+    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();
     }
-    if (!this._isFinished && !this._paused && !this._idle) {
-      this.currentTimePending = true;
-    } else if (this._idle) {
-      this.rewind();
+  }, {
+    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;
+    }
+  }, {
+    key: "updatePromises",
+    value: 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;
+    }
+  }, {
+    key: "play",
+    value: 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();
     }
-    this._startTime = null;
-    this._paused = true;
-    this.updatePromises();
-  }
-  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();
-  }
-  cancel() {
-    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();
+  }, {
+    key: "pause",
+    value: 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();
+    }
+  }, {
+    key: "finish",
+    value: 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();
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      var _this3 = 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;
-    // }
+      /**
+       * 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(() => {
-        this.oncancel(event);
-      });
+      if (this.oncancel) {
+        var event = new AnimationEvent(null, this, this.currentTime, null);
+        setTimeout(function () {
+          _this3.oncancel(event);
+        });
+      }
     }
-  }
-  reverse() {
-    this.updatePromises();
-    var oldCurrentTime = this.currentTime;
-    this.playbackRate *= -1;
-    this.play();
-    if (oldCurrentTime !== null) {
-      this.currentTime = oldCurrentTime;
+  }, {
+    key: "reverse",
+    value: function reverse() {
+      this.updatePromises();
+      var oldCurrentTime = this.currentTime;
+      this.playbackRate *= -1;
+      this.play();
+      if (oldCurrentTime !== null) {
+        this.currentTime = oldCurrentTime;
+      }
+      this.updatePromises();
     }
-    this.updatePromises();
-  }
 
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
-   */
-  updatePlaybackRate(playbackRate) {
-    this.playbackRate = playbackRate;
-  }
-  targetAnimations() {
-    var _this$effect2;
-    var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
-    return target.getAnimations();
-  }
-  markTarget() {
-    var animations = this.targetAnimations();
-    if (animations.indexOf(this) === -1) {
-      animations.push(this);
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
+     */
+  }, {
+    key: "updatePlaybackRate",
+    value: function updatePlaybackRate(playbackRate) {
+      this.playbackRate = playbackRate;
     }
-  }
-  unmarkTarget() {
-    var animations = this.targetAnimations();
-    var index = animations.indexOf(this);
-    if (index !== -1) {
-      animations.splice(index, 1);
+  }, {
+    key: "targetAnimations",
+    value: function targetAnimations() {
+      var _this$effect2;
+      var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
+      return target.getAnimations();
     }
-  }
-  tick(timelineTime, isAnimationFrame) {
-    if (!this._idle && !this._paused) {
-      if (this._startTime === null) {
-        if (isAnimationFrame) {
-          this.startTime = timelineTime - this._currentTime / this.playbackRate;
+  }, {
+    key: "markTarget",
+    value: function markTarget() {
+      var animations = this.targetAnimations();
+      if (animations.indexOf(this) === -1) {
+        animations.push(this);
+      }
+    }
+  }, {
+    key: "unmarkTarget",
+    value: function unmarkTarget() {
+      var animations = this.targetAnimations();
+      var index = animations.indexOf(this);
+      if (index !== -1) {
+        animations.splice(index, 1);
+      }
+    }
+  }, {
+    key: "tick",
+    value: 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);
         }
-      } else if (!this._isFinished) {
-        this.tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
       }
+      if (isAnimationFrame) {
+        this.currentTimePending = false;
+        this.fireEvents(timelineTime);
+      }
     }
-    if (isAnimationFrame) {
-      this.currentTimePending = false;
-      this.fireEvents(timelineTime);
+  }, {
+    key: "rewind",
+    value: 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');
+      }
     }
-  }
-  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');
+  }, {
+    key: "persist",
+    value: function persist() {
+      throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-  }
-  persist() {
-    throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  addEventListener(type, listener, options) {
-    throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  removeEventListener(type, listener, options) {
-    throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  dispatchEvent(event) {
-    throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  // replaceState: AnimationReplaceState;
-  commitStyles() {
-    throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  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 && _this$effect3.update(-1));
-    } else {
-      var _this$effect4;
-      this._inEffect = !!((_this$effect4 = this.effect) !== null && _this$effect4 !== void 0 && _this$effect4.update(this.currentTime));
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(type, listener, options) {
+      throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-    if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
-      this._inTimeline = true;
-      this.timeline.animations.push(this);
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(type, listener, options) {
+      throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-  }
-  tickCurrentTime(newTime, ignoreLimit) {
-    if (newTime !== this._currentTime) {
-      this._currentTime = newTime;
-      if (this._isFinished && !ignoreLimit) {
-        this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent(event) {
+      throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+    }
+  }, {
+    key: "commitStyles",
+    value:
+    // replaceState: AnimationReplaceState;
+    function commitStyles() {
+      throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+    }
+  }, {
+    key: "ensureAlive",
+    value: 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 && _this$effect3.update(-1));
+      } else {
+        var _this$effect4;
+        this._inEffect = !!((_this$effect4 = this.effect) !== null && _this$effect4 !== void 0 && _this$effect4.update(this.currentTime));
       }
-      this.ensureAlive();
+      if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
+        this._inTimeline = true;
+        this.timeline.animations.push(this);
+      }
     }
-  }
-  fireEvents(baseTime) {
-    if (this._isFinished) {
-      if (!this._finishedFlag) {
-        if (this.onfinish) {
-          var event = new AnimationEvent(null, this, this.currentTime, baseTime);
-          setTimeout(() => {
-            if (this.onfinish) {
-              this.onfinish(event);
-            }
-          });
+  }, {
+    key: "tickCurrentTime",
+    value: function tickCurrentTime(newTime, ignoreLimit) {
+      if (newTime !== this._currentTime) {
+        this._currentTime = newTime;
+        if (this._isFinished && !ignoreLimit) {
+          this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
         }
-        this._finishedFlag = true;
+        this.ensureAlive();
       }
-    } else {
-      if (this.onframe && this.playState === 'running') {
-        var _event = new AnimationEvent(null, this, this.currentTime, baseTime);
-        this.onframe(_event);
+    }
+  }, {
+    key: "fireEvents",
+    value: function fireEvents(baseTime) {
+      var _this4 = this;
+      if (this._isFinished) {
+        if (!this._finishedFlag) {
+          if (this.onfinish) {
+            var event = new AnimationEvent(null, this, this.currentTime, baseTime);
+            setTimeout(function () {
+              if (_this4.onfinish) {
+                _this4.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;
       }
-      this._finishedFlag = false;
     }
-  }
-}
+  }]);
+}();
 
@@ -496,12 +572,22 @@ /**
 var float32ArraySupported = typeof Float32Array === 'function';
-var A = (aA1, aA2) => 1.0 - 3.0 * aA2 + 3.0 * aA1;
-var B = (aA1, aA2) => 3.0 * aA2 - 6.0 * aA1;
-var C = aA1 => 3.0 * aA1;
+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 = (aT, aA1, aA2) => ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+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 = (aT, aA1, aA2) => 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
-var binarySubdivide = (aX, aA, aB, mX1, mX2) => {
+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;
@@ -517,3 +603,3 @@ var currentT;
 };
-var newtonRaphsonIterate = (aX, aGuessT, mX1, mX2) => {
+var newtonRaphsonIterate = function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
@@ -527,5 +613,7 @@ var currentSlope = getSlope(aGuessT, mX1, mX2);
 };
-var bezier = (mX1, mY1, mX2, mY2) => {
+var bezier = function bezier(mX1, mY1, mX2, mY2) {
   if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) throw new Error('bezier x values must be in [0, 1] range');
-  if (mX1 === mY1 && mX2 === mY2) return t => t;
+  if (mX1 === mY1 && mX2 === mY2) return function (t) {
+    return t;
+  };
 
@@ -537,3 +625,3 @@ // Precompute samples table
   }
-  var getTForX = aX => {
+  var getTForX = function getTForX(aX) {
     var intervalStart = 0.0;
@@ -553,3 +641,3 @@ var currentSample = 1;
   };
-  return t => {
+  return function (t) {
     // Because JavaScript number are imprecise, we should guarantee the extremes are right.
@@ -561,4 +649,6 @@ if (t === 0 || t === 1) return t;
 
-var convertToDash = str => {
-  str = str.replace(/([A-Z])/g, letter => "-".concat(letter.toLowerCase()));
+var convertToDash = function convertToDash(str) {
+  str = str.replace(/([A-Z])/g, function (letter) {
+    return "-".concat(letter.toLowerCase());
+  });
 
@@ -571,11 +661,27 @@ // Remove first dash
 */
-var Quad = t => Math.pow(t, 2);
-var Cubic = t => Math.pow(t, 3);
-var Quart = t => Math.pow(t, 4);
-var Quint = t => Math.pow(t, 5);
-var Expo = t => Math.pow(t, 6);
-var Sine = t => 1 - Math.cos(t * Math.PI / 2);
-var Circ = t => 1 - Math.sqrt(1 - t * t);
-var Back = t => t * t * (3 * t - 2);
-var Bounce = t => {
+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;
@@ -715,3 +821,3 @@ var b = 4;
 /** Converts easing functions to their `out`counter parts */
-var EaseOut = ease => {
+var EaseOut = function EaseOut(ease) {
   return function (t) {
@@ -725,3 +831,3 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 /** Converts easing functions to their `in-out` counter parts */
-var EaseInOut = ease => {
+var EaseInOut = function EaseInOut(ease) {
   return function (t) {
@@ -735,3 +841,3 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 /** Converts easing functions to their `out-in` counter parts */
-var EaseOutIn = ease => {
+var EaseOutIn = function EaseOutIn(ease) {
   return function (t) {
@@ -750,8 +856,16 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   steps: Steps,
-  'step-start': t => Steps(t, [1, 'start']),
-  'step-end': t => Steps(t, [1, 'end']),
-  linear: t => t,
+  '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: t => Bezier(t, [0.25, 0.1, 0.25, 1.0]),
-  in: easein,
+  ease: function ease(t) {
+    return Bezier(t, [0.25, 0.1, 0.25, 1.0]);
+  },
+  "in": easein,
   out: EaseOut(easein),
@@ -810,8 +924,10 @@ 'in-out': EaseInOut(easein),
  */
-var complexEasingSyntax = ease => convertToDash(ease).replace(/^ease-/, '') // Remove the "ease-" keyword
-.replace(/(\(|\s).+/, '') // Remove the function brackets and parameters
-.toLowerCase().trim();
+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 = ease => {
+var getEasingFunction = function getEasingFunction(ease) {
   return EasingFunctions[complexEasingSyntax(ease)] || EasingFunctions.linear;
@@ -836,3 +952,3 @@ };
 
-var linear = x => {
+var linear = function linear(x) {
   return x;
@@ -861,3 +977,3 @@ };
     // @ts-ignore
-    return bezier(...cubicData.slice(1).map(Number));
+    return bezier.apply(void 0, _toConsumableArray(cubicData.slice(1).map(Number)));
   }
@@ -1001,5 +1117,5 @@ var step1Data = step1Re.exec(normalizedEasing);
     if (fraction !== null) {
-      interpolations.filter(interpolation => {
+      interpolations.filter(function (interpolation) {
         return fraction >= interpolation.applyFrom && fraction < interpolation.applyTo;
-      }).forEach(interpolation => {
+      }).forEach(function (interpolation) {
         var offsetFraction = fraction - interpolation.startOffset;
@@ -1073,4 +1189,4 @@ var localDuration = interpolation.endOffset - interpolation.startOffset;
       interpolations.push({
-        applyFrom,
-        applyTo,
+        applyFrom: applyFrom,
+        applyTo: applyTo,
         startOffset: keyframes[startIndex].computedOffset,
@@ -1084,3 +1200,3 @@ endOffset: keyframes[endIndex].computedOffset,
   }
-  interpolations.sort((leftInterpolation, rightInterpolation) => {
+  interpolations.sort(function (leftInterpolation, rightInterpolation) {
     return leftInterpolation.startOffset - rightInterpolation.startOffset;
@@ -1090,4 +1206,4 @@ });
 }
-var InterpolationFactory = (from, to, convertToString) => {
-  return f => {
+var InterpolationFactory = function InterpolationFactory(from, to, convertToString) {
+  return function (f) {
     var interpolated = interpolate(from, to, f);
@@ -1099,3 +1215,3 @@ return isNumber(interpolated) ? interpolated : convertToString(interpolated);
   var metadata = propertyMetadataCache[property];
-  if (metadata && metadata.syntax && metadata.int) {
+  if (metadata && metadata.syntax && metadata["int"]) {
     var propertyHandler = runtime.styleValueRegistry.getPropertySyntax(metadata.syntax);
@@ -1110,5 +1226,3 @@ if (propertyHandler) {
       if (interpolationArgs) {
-        var interp = InterpolationFactory(
-        // @ts-ignore
-        ...interpolationArgs);
+        var interp = InterpolationFactory.apply(void 0, _toConsumableArray(interpolationArgs));
         return function (t) {
@@ -1157,4 +1271,5 @@ if (t === 0) return left;
  */
-class AnimationEffectTiming {
-  constructor() {
+var AnimationEffectTiming = /*#__PURE__*/function () {
+  function AnimationEffectTiming() {
+    _classCallCheck(this, AnimationEffectTiming);
     /**
@@ -1196,10 +1311,13 @@ * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay
   }
-  get easing() {
-    return this._easing;
-  }
-  set easing(value) {
-    this.easingFunction = parseEasingFunction(value);
-    this._easing = value;
-  }
-}
+  return _createClass(AnimationEffectTiming, [{
+    key: "easing",
+    get: function get() {
+      return this._easing;
+    },
+    set: function set(value) {
+      this.easingFunction = parseEasingFunction(value);
+      this._easing = value;
+    }
+  }]);
+}();
 
@@ -1267,3 +1385,3 @@ /**
   }
-  var keyframes = effectInput.map(originalKeyframe => {
+  var keyframes = effectInput.map(function (originalKeyframe) {
     var keyframe = {};
@@ -1320,3 +1438,3 @@ if (timing !== null && timing !== void 0 && timing.composite) {
   }
-  keyframes = keyframes.filter(keyframe => {
+  keyframes = keyframes.filter(function (keyframe) {
     return Number(keyframe.offset) >= 0 && Number(keyframe.offset) <= 1;
@@ -1359,3 +1477,3 @@ });
   } else if (timingInput !== undefined) {
-    Object.keys(timingInput).forEach(property => {
+    Object.keys(timingInput).forEach(function (property) {
       if (timingInput[property] !== undefined && timingInput[property] !== null && timingInput[property] !== 'auto') {
@@ -1415,6 +1533,8 @@ if (typeof timing[property] === 'number' || property === 'duration') {
  */
-class KeyframeEffect {
+var KeyframeEffect = /*#__PURE__*/function () {
   // pseudoElement: string | null;
 
-  constructor(target, effectInput, timingInput) {
+  function KeyframeEffect(target, effectInput, timingInput) {
+    var _this = this;
+    _classCallCheck(this, KeyframeEffect);
     this.composite = 'replace';
@@ -1433,3 +1553,3 @@ this.iterationComposite = 'replace';
     this.computedTiming = Proxy ? new Proxy(this.timing, {
-      get: (target, prop) => {
+      get: function get(target, prop) {
         if (prop === 'duration') {
@@ -1442,6 +1562,6 @@ return target.duration === 'auto' ? 0 : target.duration;
         if (prop === 'localTime') {
-          return this.animation && this.animation.currentTime || null;
+          return _this.animation && _this.animation.currentTime || null;
         }
         if (prop === 'currentIteration') {
-          if (!this.animation || this.animation.playState !== 'running') {
+          if (!_this.animation || _this.animation.playState !== 'running') {
             return null;
@@ -1452,3 +1572,3 @@ }
         if (prop === 'progress') {
-          if (!this.animation || this.animation.playState !== 'running') {
+          if (!_this.animation || _this.animation.playState !== 'running') {
             return null;
@@ -1460,3 +1580,3 @@ }
       },
-      set: () => {
+      set: function set() {
         return true;
@@ -1466,39 +1586,55 @@ }
   }
-  applyInterpolations() {
-    this.interpolations(this.target, Number(this.timeFraction));
-  }
-  update(localTime) {
-    if (localTime === null) {
-      return false;
+  return _createClass(KeyframeEffect, [{
+    key: "applyInterpolations",
+    value: function applyInterpolations() {
+      this.interpolations(this.target, Number(this.timeFraction));
     }
-    this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
-    return this.timeFraction !== null;
-  }
-  getKeyframes() {
-    return this.normalizedKeyframes;
-  }
-  setKeyframes(keyframes) {
-    this.normalizedKeyframes = normalizeKeyframes(keyframes);
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
-   */
-  getComputedTiming() {
-    return this.computedTiming;
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
-   */
-  getTiming() {
-    return this.timing;
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
-   */
-  updateTiming(timing) {
-    Object.keys(timing || {}).forEach(name => {
-      this.timing[name] = timing[name];
-    });
-  }
-}
+  }, {
+    key: "update",
+    value: function update(localTime) {
+      if (localTime === null) {
+        return false;
+      }
+      this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
+      return this.timeFraction !== null;
+    }
+  }, {
+    key: "getKeyframes",
+    value: function getKeyframes() {
+      return this.normalizedKeyframes;
+    }
+  }, {
+    key: "setKeyframes",
+    value: function setKeyframes(keyframes) {
+      this.normalizedKeyframes = normalizeKeyframes(keyframes);
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
+     */
+  }, {
+    key: "getComputedTiming",
+    value: function getComputedTiming() {
+      return this.computedTiming;
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
+     */
+  }, {
+    key: "getTiming",
+    value: function getTiming() {
+      return this.timing;
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
+     */
+  }, {
+    key: "updateTiming",
+    value: function updateTiming(timing) {
+      var _this2 = this;
+      Object.keys(timing || {}).forEach(function (name) {
+        _this2.timing[name] = timing[name];
+      });
+    }
+  }]);
+}();
 
@@ -1512,4 +1648,6 @@ function compareAnimations(leftAnimation, rightAnimation) {
  */
-class AnimationTimeline {
-  constructor(document) {
+var AnimationTimeline = /*#__PURE__*/function () {
+  function AnimationTimeline(document) {
+    var _this = this;
+    _classCallCheck(this, AnimationTimeline);
     /**
@@ -1528,148 +1666,180 @@ * all active animations
     this.rafCallbacks = [];
-    this.webAnimationsNextTick = t => {
-      this.currentTime = t;
-      this.discardAnimations();
-      if (this.animations.length === 0) {
-        this.timelineTicking = false;
+    this.webAnimationsNextTick = function (t) {
+      _this.currentTime = t;
+      _this.discardAnimations();
+      if (_this.animations.length === 0) {
+        _this.timelineTicking = false;
       } else {
-        this.requestAnimationFrame(this.webAnimationsNextTick);
+        _this.requestAnimationFrame(_this.webAnimationsNextTick);
       }
     };
-    this.processRafCallbacks = 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(entry => {
+    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.applyPendingEffects();
     };
     this.document = document;
   }
-  getAnimations() {
-    this.discardAnimations();
-    return this.animations.slice();
-  }
-  isTicking() {
-    return this.inTick;
-  }
-  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.
-  applyDirtiedAnimation(animation) {
-    if (this.inTick) {
-      return;
+  return _createClass(AnimationTimeline, [{
+    key: "getAnimations",
+    value: function getAnimations() {
+      this.discardAnimations();
+      return this.animations.slice();
     }
-    // update active animations in displayobject
-    animation.markTarget();
-    var animations = animation.targetAnimations();
-    animations.sort(compareAnimations);
+  }, {
+    key: "isTicking",
+    value: function isTicking() {
+      return this.inTick;
+    }
+  }, {
+    key: "play",
+    value: 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;
+    }
 
-    // clear inactive animations
-    var inactiveAnimations = this.tick(Number(this.currentTime), false, animations.slice())[1];
-    inactiveAnimations.forEach(animation => {
-      var index = this.animations.indexOf(animation);
-      if (index !== -1) {
-        this.animations.splice(index, 1);
+    // 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.
+  }, {
+    key: "applyDirtiedAnimation",
+    value: function applyDirtiedAnimation(animation) {
+      var _this2 = this;
+      if (this.inTick) {
+        return;
       }
-    });
-    this.applyPendingEffects();
-  }
-  restart() {
-    if (!this.ticking) {
-      this.ticking = true;
-      this.requestAnimationFrame(() => {});
-      this.hasRestartedThisFrame = true;
+      // 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();
     }
-    return this.hasRestartedThisFrame;
-  }
-  destroy() {
-    this.document.defaultView.cancelAnimationFrame(this.frameId);
-  }
-  applyPendingEffects() {
-    this.pendingEffects.forEach(effect => {
-      effect === null || effect === void 0 || effect.applyInterpolations();
-    });
-    this.pendingEffects = [];
-  }
-  updateAnimationsPromises() {
-    this.animationsWithPromises = this.animationsWithPromises.filter(animation => {
-      return animation.updatePromises();
-    });
-  }
-  discardAnimations() {
-    this.updateAnimationsPromises();
-    this.animations = this.animations.filter(animation => {
-      return animation.playState !== 'finished' && animation.playState !== 'idle';
-    });
-  }
-  restartWebAnimationsNextTick() {
-    if (!this.timelineTicking) {
-      this.timelineTicking = true;
-      this.requestAnimationFrame(this.webAnimationsNextTick);
+  }, {
+    key: "restart",
+    value: function restart() {
+      if (!this.ticking) {
+        this.ticking = true;
+        this.requestAnimationFrame(function () {});
+        this.hasRestartedThisFrame = true;
+      }
+      return this.hasRestartedThisFrame;
     }
-  }
-  rAF(f) {
-    var id = this.rafId++;
-    if (this.rafCallbacks.length === 0) {
-      this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.document.defaultView.cancelAnimationFrame(this.frameId);
     }
-    this.rafCallbacks.push([id, f]);
-    return id;
-  }
-  requestAnimationFrame(f) {
-    return this.rAF(x => {
+  }, {
+    key: "applyPendingEffects",
+    value: function applyPendingEffects() {
+      this.pendingEffects.forEach(function (effect) {
+        effect === null || effect === void 0 || effect.applyInterpolations();
+      });
+      this.pendingEffects = [];
+    }
+  }, {
+    key: "updateAnimationsPromises",
+    value: function updateAnimationsPromises() {
+      this.animationsWithPromises = this.animationsWithPromises.filter(function (animation) {
+        return animation.updatePromises();
+      });
+    }
+  }, {
+    key: "discardAnimations",
+    value: function discardAnimations() {
       this.updateAnimationsPromises();
-      f(x);
-      this.updateAnimationsPromises();
-    });
-  }
-  tick(t, isAnimationFrame, updatingAnimations) {
-    this.inTick = true;
-    this.hasRestartedThisFrame = false;
-    this.currentTime = t;
-    this.ticking = false;
-    var newPendingClears = [];
-    var newPendingEffects = [];
-    var activeAnimations = [];
-    var inactiveAnimations = [];
-    updatingAnimations.forEach(animation => {
-      animation.tick(t, isAnimationFrame);
-      if (!animation._inEffect) {
-        newPendingClears.push(animation.effect);
-        animation.unmarkTarget();
-      } else {
-        newPendingEffects.push(animation.effect);
-        animation.markTarget();
+      this.animations = this.animations.filter(function (animation) {
+        return animation.playState !== 'finished' && animation.playState !== 'idle';
+      });
+    }
+  }, {
+    key: "restartWebAnimationsNextTick",
+    value: function restartWebAnimationsNextTick() {
+      if (!this.timelineTicking) {
+        this.timelineTicking = true;
+        this.requestAnimationFrame(this.webAnimationsNextTick);
       }
-      if (animation._needsTick) this.ticking = true;
-      var alive = animation._inEffect || animation._needsTick;
-      animation._inTimeline = alive;
-      if (alive) {
-        activeAnimations.push(animation);
-      } else {
-        inactiveAnimations.push(animation);
+    }
+  }, {
+    key: "rAF",
+    value: function rAF(f) {
+      var id = this.rafId++;
+      if (this.rafCallbacks.length === 0) {
+        this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
       }
-    });
-    this.pendingEffects.push(...newPendingClears);
-    this.pendingEffects.push(...newPendingEffects);
-    if (this.ticking) this.requestAnimationFrame(() => {});
-    this.inTick = false;
-    return [activeAnimations, inactiveAnimations];
-  }
-}
+      this.rafCallbacks.push([id, f]);
+      return id;
+    }
+  }, {
+    key: "requestAnimationFrame",
+    value: function requestAnimationFrame(f) {
+      var _this3 = this;
+      return this.rAF(function (x) {
+        _this3.updateAnimationsPromises();
+        f(x);
+        _this3.updateAnimationsPromises();
+      });
+    }
+  }, {
+    key: "tick",
+    value: 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];
+    }
+  }]);
+}();
 
@@ -1676,0 +1846,0 @@ runtime.EasingFunction = parseEasingFunction;

dist/index.js

 /*!
  * @antv/g-web-animations-api
  * @description A simple implementation of Web Animations API.
- * @version 2.1.1
- * @date 10/23/2024, 7:14:37 AM
+ * @version 2.1.2
+ * @date 10/23/2024, 11:15:27 AM
  * @author AntVis
@@ -12,2 +12,7 @@ * @docs https://g.antv.antgroup.com/
 var gLite = require('@antv/g-lite');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _callSuper = require('@babel/runtime/helpers/callSuper');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
@@ -20,21 +25,26 @@ var util = require('@antv/util');
 // @ts-ignore
-class AnimationEvent extends gLite.FederatedEvent {
-  constructor(manager, target, currentTime, timelineTime) {
-    super(manager);
+var AnimationEvent = /*#__PURE__*/function (_FederatedEvent) {
+  function AnimationEvent(manager, target, currentTime, timelineTime) {
+    var _this;
+    _classCallCheck(this, AnimationEvent);
+    _this = _callSuper(this, AnimationEvent, [manager]);
 
     // @ts-ignore
-    this.currentTime = currentTime;
-    this.timelineTime = timelineTime;
-    this.target = target;
-    this.type = 'finish';
-    this.bubbles = false;
+    _this.currentTime = currentTime;
+    _this.timelineTime = timelineTime;
+    _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;
+    _this.currentTarget = target;
+    _this.defaultPrevented = false;
+    _this.eventPhase = _this.AT_TARGET;
+    _this.timeStamp = Date.now();
+    _this.currentTime = currentTime;
+    _this.timelineTime = timelineTime;
+    return _this;
   }
-}
+  _inherits(AnimationEvent, _FederatedEvent);
+  return _createClass(AnimationEvent);
+}(gLite.FederatedEvent);
 
@@ -46,187 +56,6 @@ var sequenceNumber = 0;
  */
-class Animation {
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
-   */
-
-  // animation: InternalAnimation | null;
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending
-   */
-  get pending() {
-    return this._startTime === null && !this._paused && this.playbackRate !== 0 || this.currentTimePending;
-  }
-  get playState() {
-    if (this._idle) return 'idle';
-    if (this._isFinished) return 'finished';
-    if (this._paused) return 'paused';
-    return 'running';
-  }
-
-  /**
-   * record previos state
-   */
-
-  /**
-   * @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();
-   */
-  get ready() {
-    if (!this.readyPromise) {
-      if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
-        this.timeline.animationsWithPromises.push(this);
-      }
-      this.readyPromise = new Promise((resolve, reject) => {
-        this.resolveReadyPromise = () => {
-          resolve(this);
-        };
-        this.rejectReadyPromise = () => {
-          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();
-      }
-    );
-   */
-  get finished() {
-    if (!this.finishedPromise) {
-      if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
-        this.timeline.animationsWithPromises.push(this);
-      }
-      this.finishedPromise = new Promise((resolve, reject) => {
-        this.resolveFinishedPromise = () => {
-          resolve(this);
-        };
-        this.rejectFinishedPromise = () => {
-          reject(new Error());
-        };
-      });
-      if (this.playState === 'finished') {
-        this.resolveFinishedPromise();
-      }
-    }
-    return this.finishedPromise;
-  }
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
-   */
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
-   */
-
-  /**
-   * get called after each frame when running
-   */
-
-  get currentTime() {
-    this.updatePromises();
-    return this._idle || this.currentTimePending ? null : this._currentTime;
-  }
-  set currentTime(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);
-  }
-
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
-   */
-
-  get startTime() {
-    return this._startTime;
-  }
-  set startTime(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();
-    }
-  }
-  get playbackRate() {
-    return this._playbackRate;
-  }
-  set playbackRate(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();
-  }
-  get _isFinished() {
-    return !this._idle && (this._playbackRate > 0 && Number(this._currentTime) >= this._totalDuration || this._playbackRate < 0 && Number(this._currentTime) <= 0);
-  }
-  get totalDuration() {
-    return this._totalDuration;
-  }
-  get _needsTick() {
-    return this.pending || this.playState === 'running' || !this._finishedFlag;
-  }
-  constructor(effect, timeline) {
+var Animation = /*#__PURE__*/function () {
+  function Animation(effect, timeline) {
     var _this$effect;
+    _classCallCheck(this, Animation);
     this.currentTimePending = false;
@@ -262,222 +91,469 @@ /**
    */
-  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;
+  return _createClass(Animation, [{
+    key: "pending",
+    get:
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
+     */
+
+    // 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';
+    }
+
+    /**
+     * record previos state
+     */
+  }, {
+    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 _this = this;
+      if (!this.readyPromise) {
+        if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
+          this.timeline.animationsWithPromises.push(this);
+        }
+        this.readyPromise = new Promise(function (resolve, reject) {
+          _this.resolveReadyPromise = function () {
+            resolve(_this);
+          };
+          _this.rejectReadyPromise = function () {
+            reject(new Error());
+          };
+        });
+        if (!this.pending) {
+          this.resolveReadyPromise();
+        }
       }
+      return this.readyPromise;
     }
-    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;
+
+    /**
+     * @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 _this2 = this;
+      if (!this.finishedPromise) {
+        if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
+          this.timeline.animationsWithPromises.push(this);
+        }
+        this.finishedPromise = new Promise(function (resolve, reject) {
+          _this2.resolveFinishedPromise = function () {
+            resolve(_this2);
+          };
+          _this2.rejectFinishedPromise = function () {
+            reject(new Error());
+          };
+        });
+        if (this.playState === 'finished') {
+          this.resolveFinishedPromise();
+        }
       }
+      return this.finishedPromise;
     }
-    this.oldPlayState = newPlayState;
-    return this.readyPromise || this.finishedPromise;
-  }
-  play() {
-    this.updatePromises();
-    this._paused = false;
-    if (this._isFinished || this._idle) {
-      this.rewind();
-      this._startTime = null;
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
+     */
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel
+     */
+
+    /**
+     * get called after each frame when running
+     */
+  }, {
+    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);
     }
-    this._finishedFlag = false;
-    this._idle = false;
-    this.ensureAlive();
-    this.timeline.applyDirtiedAnimation(this);
-    if (this.timeline.animations.indexOf(this) === -1) {
-      this.timeline.animations.push(this);
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime
+     */
+  }, {
+    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();
+      }
     }
-    this.updatePromises();
-  }
-  pause() {
-    this.updatePromises();
-    if (this.currentTime) {
-      this._holdTime = this.currentTime;
+  }, {
+    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();
     }
-    if (!this._isFinished && !this._paused && !this._idle) {
-      this.currentTimePending = true;
-    } else if (this._idle) {
-      this.rewind();
+  }, {
+    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;
+    }
+  }, {
+    key: "updatePromises",
+    value: 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;
+    }
+  }, {
+    key: "play",
+    value: 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();
     }
-    this._startTime = null;
-    this._paused = true;
-    this.updatePromises();
-  }
-  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();
-  }
-  cancel() {
-    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();
+  }, {
+    key: "pause",
+    value: 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();
+    }
+  }, {
+    key: "finish",
+    value: 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();
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      var _this3 = 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;
-    // }
+      /**
+       * 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(() => {
-        this.oncancel(event);
-      });
+      if (this.oncancel) {
+        var event = new AnimationEvent(null, this, this.currentTime, null);
+        setTimeout(function () {
+          _this3.oncancel(event);
+        });
+      }
     }
-  }
-  reverse() {
-    this.updatePromises();
-    var oldCurrentTime = this.currentTime;
-    this.playbackRate *= -1;
-    this.play();
-    if (oldCurrentTime !== null) {
-      this.currentTime = oldCurrentTime;
+  }, {
+    key: "reverse",
+    value: function reverse() {
+      this.updatePromises();
+      var oldCurrentTime = this.currentTime;
+      this.playbackRate *= -1;
+      this.play();
+      if (oldCurrentTime !== null) {
+        this.currentTime = oldCurrentTime;
+      }
+      this.updatePromises();
     }
-    this.updatePromises();
-  }
 
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
-   */
-  updatePlaybackRate(playbackRate) {
-    this.playbackRate = playbackRate;
-  }
-  targetAnimations() {
-    var _this$effect2;
-    var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
-    return target.getAnimations();
-  }
-  markTarget() {
-    var animations = this.targetAnimations();
-    if (animations.indexOf(this) === -1) {
-      animations.push(this);
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
+     */
+  }, {
+    key: "updatePlaybackRate",
+    value: function updatePlaybackRate(playbackRate) {
+      this.playbackRate = playbackRate;
     }
-  }
-  unmarkTarget() {
-    var animations = this.targetAnimations();
-    var index = animations.indexOf(this);
-    if (index !== -1) {
-      animations.splice(index, 1);
+  }, {
+    key: "targetAnimations",
+    value: function targetAnimations() {
+      var _this$effect2;
+      var target = (_this$effect2 = this.effect) === null || _this$effect2 === void 0 ? void 0 : _this$effect2.target;
+      return target.getAnimations();
     }
-  }
-  tick(timelineTime, isAnimationFrame) {
-    if (!this._idle && !this._paused) {
-      if (this._startTime === null) {
-        if (isAnimationFrame) {
-          this.startTime = timelineTime - this._currentTime / this.playbackRate;
+  }, {
+    key: "markTarget",
+    value: function markTarget() {
+      var animations = this.targetAnimations();
+      if (animations.indexOf(this) === -1) {
+        animations.push(this);
+      }
+    }
+  }, {
+    key: "unmarkTarget",
+    value: function unmarkTarget() {
+      var animations = this.targetAnimations();
+      var index = animations.indexOf(this);
+      if (index !== -1) {
+        animations.splice(index, 1);
+      }
+    }
+  }, {
+    key: "tick",
+    value: 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);
         }
-      } else if (!this._isFinished) {
-        this.tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
       }
+      if (isAnimationFrame) {
+        this.currentTimePending = false;
+        this.fireEvents(timelineTime);
+      }
     }
-    if (isAnimationFrame) {
-      this.currentTimePending = false;
-      this.fireEvents(timelineTime);
+  }, {
+    key: "rewind",
+    value: 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');
+      }
     }
-  }
-  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');
+  }, {
+    key: "persist",
+    value: function persist() {
+      throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-  }
-  persist() {
-    throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  addEventListener(type, listener, options) {
-    throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  removeEventListener(type, listener, options) {
-    throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  dispatchEvent(event) {
-    throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  // replaceState: AnimationReplaceState;
-  commitStyles() {
-    throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
-  }
-  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 && _this$effect3.update(-1));
-    } else {
-      var _this$effect4;
-      this._inEffect = !!((_this$effect4 = this.effect) !== null && _this$effect4 !== void 0 && _this$effect4.update(this.currentTime));
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(type, listener, options) {
+      throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-    if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
-      this._inTimeline = true;
-      this.timeline.animations.push(this);
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(type, listener, options) {
+      throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
     }
-  }
-  tickCurrentTime(newTime, ignoreLimit) {
-    if (newTime !== this._currentTime) {
-      this._currentTime = newTime;
-      if (this._isFinished && !ignoreLimit) {
-        this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent(event) {
+      throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+    }
+  }, {
+    key: "commitStyles",
+    value:
+    // replaceState: AnimationReplaceState;
+    function commitStyles() {
+      throw new Error(gLite.ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+    }
+  }, {
+    key: "ensureAlive",
+    value: 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 && _this$effect3.update(-1));
+      } else {
+        var _this$effect4;
+        this._inEffect = !!((_this$effect4 = this.effect) !== null && _this$effect4 !== void 0 && _this$effect4.update(this.currentTime));
       }
-      this.ensureAlive();
+      if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
+        this._inTimeline = true;
+        this.timeline.animations.push(this);
+      }
     }
-  }
-  fireEvents(baseTime) {
-    if (this._isFinished) {
-      if (!this._finishedFlag) {
-        if (this.onfinish) {
-          var event = new AnimationEvent(null, this, this.currentTime, baseTime);
-          setTimeout(() => {
-            if (this.onfinish) {
-              this.onfinish(event);
-            }
-          });
+  }, {
+    key: "tickCurrentTime",
+    value: function tickCurrentTime(newTime, ignoreLimit) {
+      if (newTime !== this._currentTime) {
+        this._currentTime = newTime;
+        if (this._isFinished && !ignoreLimit) {
+          this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
         }
-        this._finishedFlag = true;
+        this.ensureAlive();
       }
-    } else {
-      if (this.onframe && this.playState === 'running') {
-        var _event = new AnimationEvent(null, this, this.currentTime, baseTime);
-        this.onframe(_event);
+    }
+  }, {
+    key: "fireEvents",
+    value: function fireEvents(baseTime) {
+      var _this4 = this;
+      if (this._isFinished) {
+        if (!this._finishedFlag) {
+          if (this.onfinish) {
+            var event = new AnimationEvent(null, this, this.currentTime, baseTime);
+            setTimeout(function () {
+              if (_this4.onfinish) {
+                _this4.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;
       }
-      this._finishedFlag = false;
     }
-  }
-}
+  }]);
+}();
 
@@ -498,12 +574,22 @@ /**
 var float32ArraySupported = typeof Float32Array === 'function';
-var A = (aA1, aA2) => 1.0 - 3.0 * aA2 + 3.0 * aA1;
-var B = (aA1, aA2) => 3.0 * aA2 - 6.0 * aA1;
-var C = aA1 => 3.0 * aA1;
+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 = (aT, aA1, aA2) => ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+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 = (aT, aA1, aA2) => 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
-var binarySubdivide = (aX, aA, aB, mX1, mX2) => {
+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;
@@ -519,3 +605,3 @@ var currentT;
 };
-var newtonRaphsonIterate = (aX, aGuessT, mX1, mX2) => {
+var newtonRaphsonIterate = function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
@@ -529,5 +615,7 @@ var currentSlope = getSlope(aGuessT, mX1, mX2);
 };
-var bezier = (mX1, mY1, mX2, mY2) => {
+var bezier = function bezier(mX1, mY1, mX2, mY2) {
   if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) throw new Error('bezier x values must be in [0, 1] range');
-  if (mX1 === mY1 && mX2 === mY2) return t => t;
+  if (mX1 === mY1 && mX2 === mY2) return function (t) {
+    return t;
+  };
 
@@ -539,3 +627,3 @@ // Precompute samples table
   }
-  var getTForX = aX => {
+  var getTForX = function getTForX(aX) {
     var intervalStart = 0.0;
@@ -555,3 +643,3 @@ var currentSample = 1;
   };
-  return t => {
+  return function (t) {
     // Because JavaScript number are imprecise, we should guarantee the extremes are right.
@@ -563,4 +651,6 @@ if (t === 0 || t === 1) return t;
 
-var convertToDash = str => {
-  str = str.replace(/([A-Z])/g, letter => "-".concat(letter.toLowerCase()));
+var convertToDash = function convertToDash(str) {
+  str = str.replace(/([A-Z])/g, function (letter) {
+    return "-".concat(letter.toLowerCase());
+  });
 
@@ -573,11 +663,27 @@ // Remove first dash
 */
-var Quad = t => Math.pow(t, 2);
-var Cubic = t => Math.pow(t, 3);
-var Quart = t => Math.pow(t, 4);
-var Quint = t => Math.pow(t, 5);
-var Expo = t => Math.pow(t, 6);
-var Sine = t => 1 - Math.cos(t * Math.PI / 2);
-var Circ = t => 1 - Math.sqrt(1 - t * t);
-var Back = t => t * t * (3 * t - 2);
-var Bounce = t => {
+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;
@@ -717,3 +823,3 @@ var b = 4;
 /** Converts easing functions to their `out`counter parts */
-var EaseOut = ease => {
+var EaseOut = function EaseOut(ease) {
   return function (t) {
@@ -727,3 +833,3 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 /** Converts easing functions to their `in-out` counter parts */
-var EaseInOut = ease => {
+var EaseInOut = function EaseInOut(ease) {
   return function (t) {
@@ -737,3 +843,3 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 /** Converts easing functions to their `out-in` counter parts */
-var EaseOutIn = ease => {
+var EaseOutIn = function EaseOutIn(ease) {
   return function (t) {
@@ -752,8 +858,16 @@ var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   steps: Steps,
-  'step-start': t => Steps(t, [1, 'start']),
-  'step-end': t => Steps(t, [1, 'end']),
-  linear: t => t,
+  '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: t => Bezier(t, [0.25, 0.1, 0.25, 1.0]),
-  in: easein,
+  ease: function ease(t) {
+    return Bezier(t, [0.25, 0.1, 0.25, 1.0]);
+  },
+  "in": easein,
   out: EaseOut(easein),
@@ -812,8 +926,10 @@ 'in-out': EaseInOut(easein),
  */
-var complexEasingSyntax = ease => convertToDash(ease).replace(/^ease-/, '') // Remove the "ease-" keyword
-.replace(/(\(|\s).+/, '') // Remove the function brackets and parameters
-.toLowerCase().trim();
+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 = ease => {
+var getEasingFunction = function getEasingFunction(ease) {
   return EasingFunctions[complexEasingSyntax(ease)] || EasingFunctions.linear;
@@ -838,3 +954,3 @@ };
 
-var linear = x => {
+var linear = function linear(x) {
   return x;
@@ -863,3 +979,3 @@ };
     // @ts-ignore
-    return bezier(...cubicData.slice(1).map(Number));
+    return bezier.apply(void 0, _toConsumableArray(cubicData.slice(1).map(Number)));
   }
@@ -1003,5 +1119,5 @@ var step1Data = step1Re.exec(normalizedEasing);
     if (fraction !== null) {
-      interpolations.filter(interpolation => {
+      interpolations.filter(function (interpolation) {
         return fraction >= interpolation.applyFrom && fraction < interpolation.applyTo;
-      }).forEach(interpolation => {
+      }).forEach(function (interpolation) {
         var offsetFraction = fraction - interpolation.startOffset;
@@ -1075,4 +1191,4 @@ var localDuration = interpolation.endOffset - interpolation.startOffset;
       interpolations.push({
-        applyFrom,
-        applyTo,
+        applyFrom: applyFrom,
+        applyTo: applyTo,
         startOffset: keyframes[startIndex].computedOffset,
@@ -1086,3 +1202,3 @@ endOffset: keyframes[endIndex].computedOffset,
   }
-  interpolations.sort((leftInterpolation, rightInterpolation) => {
+  interpolations.sort(function (leftInterpolation, rightInterpolation) {
     return leftInterpolation.startOffset - rightInterpolation.startOffset;
@@ -1092,4 +1208,4 @@ });
 }
-var InterpolationFactory = (from, to, convertToString) => {
-  return f => {
+var InterpolationFactory = function InterpolationFactory(from, to, convertToString) {
+  return function (f) {
     var interpolated = interpolate(from, to, f);
@@ -1101,3 +1217,3 @@ return util.isNumber(interpolated) ? interpolated : convertToString(interpolated);
   var metadata = gLite.propertyMetadataCache[property];
-  if (metadata && metadata.syntax && metadata.int) {
+  if (metadata && metadata.syntax && metadata["int"]) {
     var propertyHandler = gLite.runtime.styleValueRegistry.getPropertySyntax(metadata.syntax);
@@ -1112,5 +1228,3 @@ if (propertyHandler) {
       if (interpolationArgs) {
-        var interp = InterpolationFactory(
-        // @ts-ignore
-        ...interpolationArgs);
+        var interp = InterpolationFactory.apply(void 0, _toConsumableArray(interpolationArgs));
         return function (t) {
@@ -1159,4 +1273,5 @@ if (t === 0) return left;
  */
-class AnimationEffectTiming {
-  constructor() {
+var AnimationEffectTiming = /*#__PURE__*/function () {
+  function AnimationEffectTiming() {
+    _classCallCheck(this, AnimationEffectTiming);
     /**
@@ -1198,10 +1313,13 @@ * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay
   }
-  get easing() {
-    return this._easing;
-  }
-  set easing(value) {
-    this.easingFunction = parseEasingFunction(value);
-    this._easing = value;
-  }
-}
+  return _createClass(AnimationEffectTiming, [{
+    key: "easing",
+    get: function get() {
+      return this._easing;
+    },
+    set: function set(value) {
+      this.easingFunction = parseEasingFunction(value);
+      this._easing = value;
+    }
+  }]);
+}();
 
@@ -1269,3 +1387,3 @@ /**
   }
-  var keyframes = effectInput.map(originalKeyframe => {
+  var keyframes = effectInput.map(function (originalKeyframe) {
     var keyframe = {};
@@ -1322,3 +1440,3 @@ if (timing !== null && timing !== void 0 && timing.composite) {
   }
-  keyframes = keyframes.filter(keyframe => {
+  keyframes = keyframes.filter(function (keyframe) {
     return Number(keyframe.offset) >= 0 && Number(keyframe.offset) <= 1;
@@ -1361,3 +1479,3 @@ });
   } else if (timingInput !== undefined) {
-    Object.keys(timingInput).forEach(property => {
+    Object.keys(timingInput).forEach(function (property) {
       if (timingInput[property] !== undefined && timingInput[property] !== null && timingInput[property] !== 'auto') {
@@ -1417,6 +1535,8 @@ if (typeof timing[property] === 'number' || property === 'duration') {
  */
-class KeyframeEffect {
+var KeyframeEffect = /*#__PURE__*/function () {
   // pseudoElement: string | null;
 
-  constructor(target, effectInput, timingInput) {
+  function KeyframeEffect(target, effectInput, timingInput) {
+    var _this = this;
+    _classCallCheck(this, KeyframeEffect);
     this.composite = 'replace';
@@ -1435,3 +1555,3 @@ this.iterationComposite = 'replace';
     this.computedTiming = Proxy ? new Proxy(this.timing, {
-      get: (target, prop) => {
+      get: function get(target, prop) {
         if (prop === 'duration') {
@@ -1444,6 +1564,6 @@ return target.duration === 'auto' ? 0 : target.duration;
         if (prop === 'localTime') {
-          return this.animation && this.animation.currentTime || null;
+          return _this.animation && _this.animation.currentTime || null;
         }
         if (prop === 'currentIteration') {
-          if (!this.animation || this.animation.playState !== 'running') {
+          if (!_this.animation || _this.animation.playState !== 'running') {
             return null;
@@ -1454,3 +1574,3 @@ }
         if (prop === 'progress') {
-          if (!this.animation || this.animation.playState !== 'running') {
+          if (!_this.animation || _this.animation.playState !== 'running') {
             return null;
@@ -1462,3 +1582,3 @@ }
       },
-      set: () => {
+      set: function set() {
         return true;
@@ -1468,39 +1588,55 @@ }
   }
-  applyInterpolations() {
-    this.interpolations(this.target, Number(this.timeFraction));
-  }
-  update(localTime) {
-    if (localTime === null) {
-      return false;
+  return _createClass(KeyframeEffect, [{
+    key: "applyInterpolations",
+    value: function applyInterpolations() {
+      this.interpolations(this.target, Number(this.timeFraction));
     }
-    this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
-    return this.timeFraction !== null;
-  }
-  getKeyframes() {
-    return this.normalizedKeyframes;
-  }
-  setKeyframes(keyframes) {
-    this.normalizedKeyframes = normalizeKeyframes(keyframes);
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
-   */
-  getComputedTiming() {
-    return this.computedTiming;
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
-   */
-  getTiming() {
-    return this.timing;
-  }
-  /**
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
-   */
-  updateTiming(timing) {
-    Object.keys(timing || {}).forEach(name => {
-      this.timing[name] = timing[name];
-    });
-  }
-}
+  }, {
+    key: "update",
+    value: function update(localTime) {
+      if (localTime === null) {
+        return false;
+      }
+      this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
+      return this.timeFraction !== null;
+    }
+  }, {
+    key: "getKeyframes",
+    value: function getKeyframes() {
+      return this.normalizedKeyframes;
+    }
+  }, {
+    key: "setKeyframes",
+    value: function setKeyframes(keyframes) {
+      this.normalizedKeyframes = normalizeKeyframes(keyframes);
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
+     */
+  }, {
+    key: "getComputedTiming",
+    value: function getComputedTiming() {
+      return this.computedTiming;
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
+     */
+  }, {
+    key: "getTiming",
+    value: function getTiming() {
+      return this.timing;
+    }
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
+     */
+  }, {
+    key: "updateTiming",
+    value: function updateTiming(timing) {
+      var _this2 = this;
+      Object.keys(timing || {}).forEach(function (name) {
+        _this2.timing[name] = timing[name];
+      });
+    }
+  }]);
+}();
 
@@ -1514,4 +1650,6 @@ function compareAnimations(leftAnimation, rightAnimation) {
  */
-class AnimationTimeline {
-  constructor(document) {
+var AnimationTimeline = /*#__PURE__*/function () {
+  function AnimationTimeline(document) {
+    var _this = this;
+    _classCallCheck(this, AnimationTimeline);
     /**
@@ -1530,148 +1668,180 @@ * all active animations
     this.rafCallbacks = [];
-    this.webAnimationsNextTick = t => {
-      this.currentTime = t;
-      this.discardAnimations();
-      if (this.animations.length === 0) {
-        this.timelineTicking = false;
+    this.webAnimationsNextTick = function (t) {
+      _this.currentTime = t;
+      _this.discardAnimations();
+      if (_this.animations.length === 0) {
+        _this.timelineTicking = false;
       } else {
-        this.requestAnimationFrame(this.webAnimationsNextTick);
+        _this.requestAnimationFrame(_this.webAnimationsNextTick);
       }
     };
-    this.processRafCallbacks = 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(entry => {
+    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.applyPendingEffects();
     };
     this.document = document;
   }
-  getAnimations() {
-    this.discardAnimations();
-    return this.animations.slice();
-  }
-  isTicking() {
-    return this.inTick;
-  }
-  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.
-  applyDirtiedAnimation(animation) {
-    if (this.inTick) {
-      return;
+  return _createClass(AnimationTimeline, [{
+    key: "getAnimations",
+    value: function getAnimations() {
+      this.discardAnimations();
+      return this.animations.slice();
     }
-    // update active animations in displayobject
-    animation.markTarget();
-    var animations = animation.targetAnimations();
-    animations.sort(compareAnimations);
+  }, {
+    key: "isTicking",
+    value: function isTicking() {
+      return this.inTick;
+    }
+  }, {
+    key: "play",
+    value: 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;
+    }
 
-    // clear inactive animations
-    var inactiveAnimations = this.tick(Number(this.currentTime), false, animations.slice())[1];
-    inactiveAnimations.forEach(animation => {
-      var index = this.animations.indexOf(animation);
-      if (index !== -1) {
-        this.animations.splice(index, 1);
+    // 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.
+  }, {
+    key: "applyDirtiedAnimation",
+    value: function applyDirtiedAnimation(animation) {
+      var _this2 = this;
+      if (this.inTick) {
+        return;
       }
-    });
-    this.applyPendingEffects();
-  }
-  restart() {
-    if (!this.ticking) {
-      this.ticking = true;
-      this.requestAnimationFrame(() => {});
-      this.hasRestartedThisFrame = true;
+      // 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();
     }
-    return this.hasRestartedThisFrame;
-  }
-  destroy() {
-    this.document.defaultView.cancelAnimationFrame(this.frameId);
-  }
-  applyPendingEffects() {
-    this.pendingEffects.forEach(effect => {
-      effect === null || effect === void 0 || effect.applyInterpolations();
-    });
-    this.pendingEffects = [];
-  }
-  updateAnimationsPromises() {
-    this.animationsWithPromises = this.animationsWithPromises.filter(animation => {
-      return animation.updatePromises();
-    });
-  }
-  discardAnimations() {
-    this.updateAnimationsPromises();
-    this.animations = this.animations.filter(animation => {
-      return animation.playState !== 'finished' && animation.playState !== 'idle';
-    });
-  }
-  restartWebAnimationsNextTick() {
-    if (!this.timelineTicking) {
-      this.timelineTicking = true;
-      this.requestAnimationFrame(this.webAnimationsNextTick);
+  }, {
+    key: "restart",
+    value: function restart() {
+      if (!this.ticking) {
+        this.ticking = true;
+        this.requestAnimationFrame(function () {});
+        this.hasRestartedThisFrame = true;
+      }
+      return this.hasRestartedThisFrame;
     }
-  }
-  rAF(f) {
-    var id = this.rafId++;
-    if (this.rafCallbacks.length === 0) {
-      this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.document.defaultView.cancelAnimationFrame(this.frameId);
     }
-    this.rafCallbacks.push([id, f]);
-    return id;
-  }
-  requestAnimationFrame(f) {
-    return this.rAF(x => {
+  }, {
+    key: "applyPendingEffects",
+    value: function applyPendingEffects() {
+      this.pendingEffects.forEach(function (effect) {
+        effect === null || effect === void 0 || effect.applyInterpolations();
+      });
+      this.pendingEffects = [];
+    }
+  }, {
+    key: "updateAnimationsPromises",
+    value: function updateAnimationsPromises() {
+      this.animationsWithPromises = this.animationsWithPromises.filter(function (animation) {
+        return animation.updatePromises();
+      });
+    }
+  }, {
+    key: "discardAnimations",
+    value: function discardAnimations() {
       this.updateAnimationsPromises();
-      f(x);
-      this.updateAnimationsPromises();
-    });
-  }
-  tick(t, isAnimationFrame, updatingAnimations) {
-    this.inTick = true;
-    this.hasRestartedThisFrame = false;
-    this.currentTime = t;
-    this.ticking = false;
-    var newPendingClears = [];
-    var newPendingEffects = [];
-    var activeAnimations = [];
-    var inactiveAnimations = [];
-    updatingAnimations.forEach(animation => {
-      animation.tick(t, isAnimationFrame);
-      if (!animation._inEffect) {
-        newPendingClears.push(animation.effect);
-        animation.unmarkTarget();
-      } else {
-        newPendingEffects.push(animation.effect);
-        animation.markTarget();
+      this.animations = this.animations.filter(function (animation) {
+        return animation.playState !== 'finished' && animation.playState !== 'idle';
+      });
+    }
+  }, {
+    key: "restartWebAnimationsNextTick",
+    value: function restartWebAnimationsNextTick() {
+      if (!this.timelineTicking) {
+        this.timelineTicking = true;
+        this.requestAnimationFrame(this.webAnimationsNextTick);
       }
-      if (animation._needsTick) this.ticking = true;
-      var alive = animation._inEffect || animation._needsTick;
-      animation._inTimeline = alive;
-      if (alive) {
-        activeAnimations.push(animation);
-      } else {
-        inactiveAnimations.push(animation);
+    }
+  }, {
+    key: "rAF",
+    value: function rAF(f) {
+      var id = this.rafId++;
+      if (this.rafCallbacks.length === 0) {
+        this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
       }
-    });
-    this.pendingEffects.push(...newPendingClears);
-    this.pendingEffects.push(...newPendingEffects);
-    if (this.ticking) this.requestAnimationFrame(() => {});
-    this.inTick = false;
-    return [activeAnimations, inactiveAnimations];
-  }
-}
+      this.rafCallbacks.push([id, f]);
+      return id;
+    }
+  }, {
+    key: "requestAnimationFrame",
+    value: function requestAnimationFrame(f) {
+      var _this3 = this;
+      return this.rAF(function (x) {
+        _this3.updateAnimationsPromises();
+        f(x);
+        _this3.updateAnimationsPromises();
+      });
+    }
+  }, {
+    key: "tick",
+    value: 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];
+    }
+  }]);
+}();
 
@@ -1678,0 +1848,0 @@ gLite.runtime.EasingFunction = parseEasingFunction;

dist/index.umd.min.js

 /*!
  * @antv/g-web-animations-api
  * @description A simple implementation of Web Animations API.
- * @version 2.1.1
- * @date 10/23/2024, 7:14:37 AM
+ * @version 2.1.2
+ * @date 10/23/2024, 11:15:27 AM
  * @author AntVis
  * @docs https://g.antv.antgroup.com/
  */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],i):i(((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.WebAnimationsAPI={}),t.window.G)}(this,(function(t,i){"use strict";class e extends i.FederatedEvent{constructor(t,i,e,n){super(t),this.currentTime=e,this.timelineTime=n,this.target=i,this.type="finish",this.bubbles=!1,this.currentTarget=i,this.defaultPrevented=!1,this.eventPhase=this.AT_TARGET,this.timeStamp=Date.now(),this.currentTime=e,this.timelineTime=n}}var n=0;class r{get pending(){return null===this._startTime&&!this._paused&&0!==this.playbackRate||this.currentTimePending}get playState(){return this._idle?"idle":this._isFinished?"finished":this._paused?"paused":"running"}get ready(){return this.readyPromise||(-1===this.timeline.animationsWithPromises.indexOf(this)&&this.timeline.animationsWithPromises.push(this),this.readyPromise=new Promise(((t,i)=>{this.resolveReadyPromise=()=>{t(this)},this.rejectReadyPromise=()=>{i(Error())}})),this.pending||this.resolveReadyPromise()),this.readyPromise}get finished(){return this.finishedPromise||(-1===this.timeline.animationsWithPromises.indexOf(this)&&this.timeline.animationsWithPromises.push(this),this.finishedPromise=new Promise(((t,i)=>{this.resolveFinishedPromise=()=>{t(this)},this.rejectFinishedPromise=()=>{i(Error())}})),"finished"===this.playState&&this.resolveFinishedPromise()),this.finishedPromise}get currentTime(){return this.updatePromises(),this._idle||this.currentTimePending?null:this._currentTime}set currentTime(t){if(!isNaN(t=Number(t))){var i;if(this.timeline.restart(),!this._paused&&null!==this._startTime)this._startTime=Number(null===(i=this.timeline)||void 0===i?void 0:i.currentTime)-t/this.playbackRate;this.currentTimePending=!1,this._currentTime!==t&&(this._idle&&(this._idle=!1,this._paused=!0),this.tickCurrentTime(t,!0),this.timeline.applyDirtiedAnimation(this))}}get startTime(){return this._startTime}set startTime(t){if(null!==t){if(this.updatePromises(),isNaN(t=Number(t)))return;if(this._paused||this._idle)return;this._startTime=t,this.tickCurrentTime((Number(this.timeline.currentTime)-this._startTime)*this.playbackRate),this.timeline.applyDirtiedAnimation(this),this.updatePromises()}}get playbackRate(){return this._playbackRate}set playbackRate(t){if(t!==this._playbackRate){this.updatePromises();var i=this.currentTime;this._playbackRate=t,this.startTime=null,"paused"!==this.playState&&"idle"!==this.playState&&(this._finishedFlag=!1,this._idle=!1,this.ensureAlive(),this.timeline.applyDirtiedAnimation(this)),null!==i&&(this.currentTime=i),this.updatePromises()}}get _isFinished(){return!this._idle&&(this._playbackRate>0&&Number(this._currentTime)>=this._totalDuration||0>this._playbackRate&&0>=Number(this._currentTime))}get totalDuration(){return this._totalDuration}get _needsTick(){return this.pending||"running"===this.playState||!this._finishedFlag}constructor(t,i){var e;this.currentTimePending=!1,this._idle=!0,this._paused=!1,this._finishedFlag=!0,this._currentTime=0,this._playbackRate=1,this._inTimeline=!0,this.effect=t,t.animation=this,this.timeline=i,this.id="".concat(n++),this._inEffect=!!this.effect.update(0),this._totalDuration=Number(null===(e=this.effect)||void 0===e?void 0:e.getComputedTiming().endTime),this._holdTime=0,this._paused=!1,this.oldPlayState="idle",this.updatePromises()}updatePromises(){var t=this.oldPlayState,i=this.pending?"pending":this.playState;return this.readyPromise&&i!==t&&("idle"===i?(this.rejectReadyPromise(),this.readyPromise=void 0):"pending"===t?this.resolveReadyPromise():"pending"===i&&(this.readyPromise=void 0)),this.finishedPromise&&i!==t&&("idle"===i?(this.rejectFinishedPromise(),this.finishedPromise=void 0):"finished"===i?this.resolveFinishedPromise():"finished"===t&&(this.finishedPromise=void 0)),this.oldPlayState=i,this.readyPromise||this.finishedPromise}play(){this.updatePromises(),this._paused=!1,(this._isFinished||this._idle)&&(this.rewind(),this._startTime=null),this._finishedFlag=!1,this._idle=!1,this.ensureAlive(),this.timeline.applyDirtiedAnimation(this),-1===this.timeline.animations.indexOf(this)&&this.timeline.animations.push(this),this.updatePromises()}pause(){this.updatePromises(),this.currentTime&&(this._holdTime=this.currentTime),this._isFinished||this._paused||this._idle?this._idle&&(this.rewind(),this._idle=!1):this.currentTimePending=!0,this._startTime=null,this._paused=!0,this.updatePromises()}finish(){this.updatePromises(),this._idle||(this.currentTime=this._playbackRate>0?this._totalDuration:0,this._startTime=this._totalDuration-this.currentTime,this.currentTimePending=!1,this.timeline.applyDirtiedAnimation(this),this.updatePromises())}cancel(){if(this.updatePromises(),this._inEffect&&(this._inEffect=!1,this._idle=!0,this._paused=!1,this._finishedFlag=!0,this._currentTime=0,this._startTime=null,this.effect.update(null),this.timeline.applyDirtiedAnimation(this),this.updatePromises(),this.oncancel)){var t=new e(null,this,this.currentTime,null);setTimeout((()=>{this.oncancel(t)}))}}reverse(){this.updatePromises();var t=this.currentTime;this.playbackRate*=-1,this.play(),null!==t&&(this.currentTime=t),this.updatePromises()}updatePlaybackRate(t){this.playbackRate=t}targetAnimations(){var t;return(null===(t=this.effect)||void 0===t?void 0:t.target).getAnimations()}markTarget(){var t=this.targetAnimations();-1===t.indexOf(this)&&t.push(this)}unmarkTarget(){var t=this.targetAnimations(),i=t.indexOf(this);-1!==i&&t.splice(i,1)}tick(t,i){this._idle||this._paused||(null===this._startTime?i&&(this.startTime=t-this._currentTime/this.playbackRate):this._isFinished||this.tickCurrentTime((t-this._startTime)*this.playbackRate)),i&&(this.currentTimePending=!1,this.fireEvents(t))}rewind(){if(this.playbackRate<0){if(this._totalDuration>=1/0)throw Error("Unable to rewind negative playback rate animation with infinite duration");this.currentTime=this._totalDuration}else this.currentTime=0}persist(){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}addEventListener(t,e,n){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}removeEventListener(t,e,n){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}dispatchEvent(t){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}commitStyles(){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}ensureAlive(){var t,i;0>this.playbackRate&&0===this.currentTime?this._inEffect=!(null===(t=this.effect)||void 0===t||!t.update(-1)):this._inEffect=!(null===(i=this.effect)||void 0===i||!i.update(this.currentTime));this._inTimeline||!this._inEffect&&this._finishedFlag||(this._inTimeline=!0,this.timeline.animations.push(this))}tickCurrentTime(t,i){t!==this._currentTime&&(this._currentTime=t,this._isFinished&&!i&&(this._currentTime=this._playbackRate>0?this._totalDuration:0),this.ensureAlive())}fireEvents(t){if(this._isFinished){if(!this._finishedFlag){if(this.onfinish){var i=new e(null,this,this.currentTime,t);setTimeout((()=>{this.onfinish&&this.onfinish(i)}))}this._finishedFlag=!0}}else{if(this.onframe&&"running"===this.playState){var n=new e(null,this,this.currentTime,t);this.onframe(n)}this._finishedFlag=!1}}}var s=.1,a="function"==typeof Float32Array,o=(t,i)=>1-3*i+3*t,h=(t,i)=>3*i-6*t,u=t=>3*t,l=(t,i,e)=>((o(i,e)*t+h(i,e))*t+u(i))*t,m=(t,i,e)=>3*o(i,e)*t*t+2*h(i,e)*t+u(i),c=(t,i,e,n)=>{if(0>t||t>1||0>e||e>1)throw Error("bezier x values must be in [0, 1] range");if(t===i&&e===n)return t=>t;for(var r=a?new Float32Array(11):[,,,,,,,,,,,],o=0;11>o;++o)r[o]=l(o*s,t,e);var h=i=>{for(var n=0,a=1;10!==a&&i>=r[a];++a)n+=s;--a;var o=n+(i-r[a])/(r[a+1]-r[a])*s,h=m(o,t,e);return.001>h?0===h?o:((t,i,e,n,r)=>{var s,a,o=0;do{(s=l(a=i+(e-i)/2,n,r)-t)>0?e=a:i=a}while(Math.abs(s)>1e-7&&10>++o);return a})(i,n,n+s,t,e):((t,i,e,n)=>{for(var r=0;4>r;++r){var s=m(i,e,n);if(0===s)return i;i-=(l(i,e,n)-t)/s}return i})(i,o,t,e)};return t=>0===t||1===t?t:l(h(t),i,n)};function f(t,i){(null==i||i>t.length)&&(i=t.length);for(var e=0,n=Array(i);i>e;e++)n[e]=t[e];return n}function d(t,i){return function(t){if(Array.isArray(t))return t}(t)||function(t,i){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=e){var n,r,s,a,o=[],h=!0,u=!1;try{if(s=(e=e.call(t)).next,0===i){if(Object(e)!==e)return;h=!1}else for(;!(h=(n=s.call(e)).done)&&(o.push(n.value),o.length!==i);h=!0);}catch(t){u=!0,r=t}finally{try{if(!h&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(u)throw r}}return o}}(t,i)||function(t,i){if(t){if("string"==typeof t)return f(t,i);var e={}.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?f(t,i):void 0}}(t,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var p=function(t){return null==t},g={}.toString,v=function(t,i){return g.call(t)==="[object "+i+"]"},y=function(t,i,e){return i>t?i:t>e?e:t},T=function(t){return v(t,"Number")},b=t=>Math.pow(t,2),_=t=>Math.pow(t,3),P=t=>Math.pow(t,4),k=t=>Math.pow(t,5),E=t=>Math.pow(t,6),A=t=>1-Math.cos(t*Math.PI/2),w=t=>1-Math.sqrt(1-t*t),M=t=>t*t*(3*t-2),N=t=>{for(var i,e=4;t<((i=Math.pow(2,--e))-1)/11;);return 1/Math.pow(4,3-e)-7.5625*Math.pow((3*i-2)/22-t,2)},F=function(t){var i=d(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],2),e=i[0],n=i[1],r=void 0===n?.5:n,s=y(Number(void 0===e?1:e),1,10),a=y(Number(r),.1,2);return 0===t||1===t?t:-s*Math.pow(2,10*(t-1))*Math.sin(2*Math.PI*(t-1-a/(2*Math.PI)*Math.asin(1/s))/a)},O=function(t){var i=arguments.length>2?arguments[2]:void 0,e=d(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],4),n=e[0],r=void 0===n?1:n,s=e[1],a=void 0===s?100:s,o=e[2],h=void 0===o?10:o,u=e[3],l=void 0===u?0:u;r=y(r,.1,1e3),a=y(a,.1,1e3),h=y(h,.1,1e3),l=y(l,.1,1e3);var m=Math.sqrt(a/r),c=h/(2*Math.sqrt(a*r)),f=1>c?m*Math.sqrt(1-c*c):0,p=1>c?(c*m-l)/f:-l+m,g=i?i*t/1e3:t;return g=1>c?Math.exp(-g*c*m)*(1*Math.cos(f*g)+p*Math.sin(f*g)):(1+p*g)*Math.exp(-g*m),0===t||1===t?t:1-g},R=function(t){var i=d(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],2),e=i[0],n=void 0===e?10:e;return("start"===i[1]?Math.ceil:Math.floor)(y(t,0,1)*n)/n},x=function(t){var i=d(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],4);return c(i[0],i[1],i[2],i[3])(t)},D=c(.42,0,1,1),S=t=>function(i){return 1-t(1-i,arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],arguments.length>2?arguments[2]:void 0)},q=t=>function(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0;return.5>i?t(2*i,e,n)/2:1-t(-2*i+2,e,n)/2},I=t=>function(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0;return.5>i?(1-t(1-2*i,e,n))/2:(t(2*i-1,e,n)+1)/2},C={steps:R,"step-start":t=>R(t,[1,"start"]),"step-end":t=>R(t,[1,"end"]),linear:t=>t,"cubic-bezier":x,ease:t=>x(t,[.25,.1,.25,1]),in:D,out:S(D),"in-out":q(D),"out-in":I(D),"in-quad":b,"out-quad":S(b),"in-out-quad":q(b),"out-in-quad":I(b),"in-cubic":_,"out-cubic":S(_),"in-out-cubic":q(_),"out-in-cubic":I(_),"in-quart":P,"out-quart":S(P),"in-out-quart":q(P),"out-in-quart":I(P),"in-quint":k,"out-quint":S(k),"in-out-quint":q(k),"out-in-quint":I(k),"in-expo":E,"out-expo":S(E),"in-out-expo":q(E),"out-in-expo":I(E),"in-sine":A,"out-sine":S(A),"in-out-sine":q(A),"out-in-sine":I(A),"in-circ":w,"out-circ":S(w),"in-out-circ":q(w),"out-in-circ":I(w),"in-back":M,"out-back":S(M),"in-out-back":q(M),"out-in-back":I(M),"in-bounce":N,"out-bounce":S(N),"in-out-bounce":q(N),"out-in-bounce":I(N),"in-elastic":F,"out-elastic":S(F),"in-out-elastic":q(F),"out-in-elastic":I(F),spring:O,"spring-in":O,"spring-out":S(O),"spring-in-out":q(O),"spring-out-in":I(O)},j=t=>C[(t=>{return(i=t,"-"===(i=i.replace(/([A-Z])/g,(t=>"-".concat(t.toLowerCase())))).charAt(0)?i.substring(1):i).replace(/^ease-/,"").replace(/(\(|\s).+/,"").toLowerCase().trim();var i})(t)]||C.linear,K=t=>t,G=1,W=.5,z=0;function L(t,i){return function(e){if(e>=1)return 1;var n=1/t;return(e+=i*n)-e%n}}var H="\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*",V=RegExp("cubic-bezier\\(".concat(H,",").concat(H,",").concat(H,",").concat(H,"\\)")),U=/steps\(\s*(\d+)\s*\)/,Z=/steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;function $(t){var i=V.exec(t);if(i)return c(...i.slice(1).map(Number));var e=U.exec(t);if(e)return L(Number(e[1]),z);var n=Z.exec(t);return n?L(Number(n[1]),{start:G,middle:W,end:z}[n[2]]):j(t)}function B(t){return Math.abs(function(t){var i;if(0===t.duration||0===t.iterations)return 0;return("auto"===t.duration?0:Number(t.duration))*(null!==(i=t.iterations)&&void 0!==i?i:1)}(t)/(t.playbackRate||1))}var J=0,Q=1,X=2,Y=3;function tt(t,i,e){var n=function(t,i,e){if(null===i)return J;var n=e.endTime;return Math.min(e.delay,n)>i?Q:Math.min(e.delay+t+e.endDelay,n)>i?Y:X}(t,i,e),r=function(t,i,e,n,r){switch(n){case Q:return"backwards"===i||"both"===i?0:null;case Y:return e-r;case X:return"forwards"===i||"both"===i?t:null;case J:return null}}(t,e.fill,i,n,e.delay);if(null===r)return null;var s="auto"===e.duration?0:e.duration,a=function(t,i,e,n,r){var s=r;return 0===t?i!==Q&&(s+=e):s+=n/t,s}(s,n,e.iterations,r,e.iterationStart),o=function(t,i,e,n,r,s){var a=t===1/0?i%1:t%1;return 0!==a||e!==X||0===n||0===r&&0!==s||(a=1),a}(a,e.iterationStart,n,e.iterations,r,s),h=function(t,i,e,n){return t===X&&i===1/0?1/0:1===e?Math.floor(n)-1:Math.floor(n)}(n,e.iterations,o,a),u=function(t,i,e){var n=t;if("normal"!==t&&"reverse"!==t){var r=i;"alternate-reverse"===t&&(r+=1),n="normal",r!==1/0&&r%2!=0&&(n="reverse")}return"normal"===n?e:1-e}(e.direction,h,o);return e.currentIteration=h,e.progress=u,e.easingFunction(u)}function it(t,i,e){var n=function(t,i){for(var e={},n=0;t.length>n;n++)for(var r in t[n])if(et(r)){var s={offset:t[n].offset,computedOffset:t[n].computedOffset,easing:t[n].easing,easingFunction:$(t[n].easing)||i.easingFunction,value:t[n][r]};e[r]=e[r]||[],e[r].push(s)}return e}(t,i),r=function(t,i){var e=[];for(var n in t)for(var r=t[n],s=0;r.length-1>s;s++){var a=s,o=s+1,h=r[a].computedOffset,u=r[o].computedOffset,l=h,m=u;0===s&&(l=-1/0,0===u&&(o=a)),s===r.length-2&&(m=1/0,1===h&&(a=o)),e.push({applyFrom:l,applyTo:m,startOffset:r[a].computedOffset,endOffset:r[o].computedOffset,easingFunction:r[a].easingFunction,property:n,interpolation:rt(n,r[a].value,r[o].value,i)})}return e.sort(((t,i)=>t.startOffset-i.startOffset)),e}(n,e);return function(t,i){if(null!==i)r.filter((t=>i>=t.applyFrom&&t.applyTo>i)).forEach((e=>{var n=e.endOffset-e.startOffset;t.setAttribute(e.property,e.interpolation(0===n?0:(i-e.startOffset)/n),!1,!1)}));else for(var e in n)et(e)&&t.setAttribute(e,null)}}function et(t){return"offset"!==t&&"easing"!==t&&"composite"!==t&&"computedOffset"!==t}var nt=(t,i,e)=>n=>{var r=st(t,i,n);return T(r)?r:e(r)};function rt(t,e,n,r){var s=i.propertyMetadataCache[t];if(s&&s.syntax&&s.int){var a=i.runtime.styleValueRegistry.getPropertySyntax(s.syntax);if(a){var o=a.parser,h=o?o(e,r):e,u=o?o(n,r):n,l=a.mixer(h,u,r);if(l){var m=nt(...l);return function(t){return 0===t?e:1===t?n:m(t)}}}}return nt(!1,!0,(function(t){return t?n:e}))}function st(t,i,e){if("number"==typeof t&&"number"==typeof i)return t*(1-e)+i*e;if("boolean"==typeof t&&"boolean"==typeof i||"string"==typeof t&&"string"==typeof i)return.5>e?t:i;if(Array.isArray(t)&&Array.isArray(i)){for(var n=t.length,r=i.length,s=Math.max(n,r),a=[],o=0;s>o;o++)a.push(st(t[n>o?o:n-1],i[r>o?o:r-1],e));return a}throw Error("Mismatched interpolation arguments ".concat(t,":").concat(i))}class at{constructor(){this.delay=0,this.direction="normal",this.duration="auto",this._easing="linear",this.easingFunction=K,this.endDelay=0,this.fill="auto",this.iterationStart=0,this.iterations=1,this.currentIteration=null,this.progress=null}get easing(){return this._easing}set easing(t){this.easingFunction=$(t),this._easing=t}}function ot(t,i){if(null===t)return[];Array.isArray(t)||(t=function(t){var i=[];for(var e in t)if(!(e in["easing","offset","composite"])){var n=t[e];Array.isArray(n)||(n=[n]);for(var r=n.length,s=0;r>s;s++){if(!i[s]){var a={};"offset"in t&&(a.offset=Number(t.offset)),"easing"in t&&(a.easing=t.easing),"composite"in t&&(a.composite=t.composite),i[s]=a}null!=n[s]&&(i[s][e]=n[s])}}return i.sort((function(t,i){return(t.computedOffset||0)-(i.computedOffset||0)})),i}(t));for(var e=t.map((t=>{var e={};for(var n in null!=i&&i.composite&&(e.composite="auto"),t){var r=t[n];if("offset"===n){if(null!==r){if(!isFinite(r=Number(r)))throw Error("Keyframe offsets must be numbers.");if(0>r||r>1)throw Error("Keyframe offsets must be between 0 and 1.");e.computedOffset=r}}else if("composite"===n&&-1===["replace","add","accumulate","auto"].indexOf(r))throw Error("".concat(r," compositing is not supported"));e[n]=r}return void 0===e.offset&&(e.offset=null),void 0===e.easing&&(e.easing=(null==i?void 0:i.easing)||"linear"),void 0===e.composite&&(e.composite="auto"),e})),n=!0,r=-1/0,s=0;e.length>s;s++){var a=e[s].offset;if(p(a))n=!1;else{if(r>a)throw new TypeError("Keyframes are not loosely sorted by offset. Sort or specify offsets.");r=a}}return e=e.filter((t=>Number(t.offset)>=0&&1>=Number(t.offset))),n||function(){var t,i,n=e.length;e[n-1].computedOffset=Number(null!==(t=e[n-1].offset)&&void 0!==t?t:1),n>1&&(e[0].computedOffset=Number(null!==(i=e[0].offset)&&void 0!==i?i:0));for(var r=0,s=Number(e[0].computedOffset),a=1;n>a;a++){var o=e[a].computedOffset;if(!p(o)&&!p(s)){for(var h=1;a-r>h;h++)e[r+h].computedOffset=s+(Number(o)-s)*h/(a-r);r=a,s=Number(o)}}}(),e}var ht="backwards|forwards|both|none".split("|"),ut="reverse|alternate|alternate-reverse".split("|");function lt(t,i){var e=new at;return i&&(e.fill="both",e.duration="auto"),"number"!=typeof t||isNaN(t)?void 0!==t&&Object.keys(t).forEach((i=>{if(null!=t[i]&&"auto"!==t[i]){if(("number"==typeof e[i]||"duration"===i)&&("number"!=typeof t[i]||isNaN(t[i])))return;if("fill"===i&&-1===ht.indexOf(t[i]))return;if("direction"===i&&-1===ut.indexOf(t[i]))return;e[i]=t[i]}})):e.duration=t,e}function mt(t,i){var e;return lt(t=ct(null!==(e=t)&&void 0!==e?e:{duration:"auto"}),i)}function ct(t){return"number"==typeof t&&(t=isNaN(t)?{duration:"auto"}:{duration:t}),t}class ft{constructor(t,e,n){this.composite="replace",this.iterationComposite="replace",this.target=t,this.timing=mt(n,!1),this.timing.effect=this,this.timing.activeDuration=B(this.timing),this.timing.endTime=Math.max(0,this.timing.delay+this.timing.activeDuration+this.timing.endDelay),this.normalizedKeyframes=ot(e,this.timing),this.interpolations=it(this.normalizedKeyframes,this.timing,this.target);var r=i.runtime.globalThis.Proxy;this.computedTiming=r?new r(this.timing,{get:(t,i)=>"duration"===i?"auto"===t.duration?0:t.duration:"fill"===i?"auto"===t.fill?"none":t.fill:"localTime"===i?this.animation&&this.animation.currentTime||null:"currentIteration"===i?this.animation&&"running"===this.animation.playState?t.currentIteration||0:null:"progress"===i?this.animation&&"running"===this.animation.playState?t.progress||0:null:t[i],set:()=>!0}):this.timing}applyInterpolations(){this.interpolations(this.target,Number(this.timeFraction))}update(t){return null!==t&&(this.timeFraction=tt(this.timing.activeDuration,t,this.timing),null!==this.timeFraction)}getKeyframes(){return this.normalizedKeyframes}setKeyframes(t){this.normalizedKeyframes=ot(t)}getComputedTiming(){return this.computedTiming}getTiming(){return this.timing}updateTiming(t){Object.keys(t||{}).forEach((i=>{this.timing[i]=t[i]}))}}function dt(t,i){return Number(t.id)-Number(i.id)}class pt{constructor(t){this.animations=[],this.ticking=!1,this.timelineTicking=!1,this.hasRestartedThisFrame=!1,this.animationsWithPromises=[],this.inTick=!1,this.pendingEffects=[],this.currentTime=null,this.rafId=0,this.rafCallbacks=[],this.webAnimationsNextTick=t=>{this.currentTime=t,this.discardAnimations(),0===this.animations.length?this.timelineTicking=!1:this.requestAnimationFrame(this.webAnimationsNextTick)},this.processRafCallbacks=t=>{var i=this.rafCallbacks;this.rafCallbacks=[],Number(this.currentTime)>t&&(t=Number(this.currentTime)),this.animations.sort(dt),this.animations=this.tick(t,!0,this.animations)[0],i.forEach((i=>{i[1](t)})),this.applyPendingEffects()},this.document=t}getAnimations(){return this.discardAnimations(),this.animations.slice()}isTicking(){return this.inTick}play(t,i,e){var n=new ft(t,i,e),s=new r(n,this);return this.animations.push(s),this.restartWebAnimationsNextTick(),s.updatePromises(),s.play(),s.updatePromises(),s}applyDirtiedAnimation(t){if(!this.inTick){t.markTarget();var i=t.targetAnimations();i.sort(dt),this.tick(Number(this.currentTime),!1,i.slice())[1].forEach((t=>{var i=this.animations.indexOf(t);-1!==i&&this.animations.splice(i,1)})),this.applyPendingEffects()}}restart(){return this.ticking||(this.ticking=!0,this.requestAnimationFrame((()=>{})),this.hasRestartedThisFrame=!0),this.hasRestartedThisFrame}destroy(){this.document.defaultView.cancelAnimationFrame(this.frameId)}applyPendingEffects(){this.pendingEffects.forEach((t=>{null==t||t.applyInterpolations()})),this.pendingEffects=[]}updateAnimationsPromises(){this.animationsWithPromises=this.animationsWithPromises.filter((t=>t.updatePromises()))}discardAnimations(){this.updateAnimationsPromises(),this.animations=this.animations.filter((t=>"finished"!==t.playState&&"idle"!==t.playState))}restartWebAnimationsNextTick(){this.timelineTicking||(this.timelineTicking=!0,this.requestAnimationFrame(this.webAnimationsNextTick))}rAF(t){var i=this.rafId++;return 0===this.rafCallbacks.length&&(this.frameId=this.document.defaultView.requestAnimationFrame(this.processRafCallbacks)),this.rafCallbacks.push([i,t]),i}requestAnimationFrame(t){return this.rAF((i=>{this.updateAnimationsPromises(),t(i),this.updateAnimationsPromises()}))}tick(t,i,e){this.inTick=!0,this.hasRestartedThisFrame=!1,this.currentTime=t,this.ticking=!1;var n=[],r=[],s=[],a=[];return e.forEach((e=>{e.tick(t,i),e._inEffect?(r.push(e.effect),e.markTarget()):(n.push(e.effect),e.unmarkTarget()),e._needsTick&&(this.ticking=!0);var o=e._inEffect||e._needsTick;e._inTimeline=o,o?s.push(e):a.push(e)})),this.pendingEffects.push(...n),this.pendingEffects.push(...r),this.ticking&&this.requestAnimationFrame((()=>{})),this.inTick=!1,[s,a]}}i.runtime.EasingFunction=$,i.runtime.AnimationTimeline=pt,t.Animation=r,t.AnimationEvent=e,t.AnimationTimeline=pt,t.EasingFunctions=C,t.KeyframeEffect=ft,t.compareAnimations=dt,t.makeTiming=lt,t.normalizeKeyframes=ot,t.normalizeTimingInput=mt,t.numericTimingToObject=ct}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],i):i(((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.WebAnimationsAPI={}),t.window.G)}(this,(function(t,i){"use strict";function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function r(t){var i=function(t,i){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,i||"default");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(t)}(t,"string");return"symbol"==n(i)?i:i+""}function s(t,i){for(var e=0;i.length>e;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function a(t,i,e){return i&&s(t.prototype,i),e&&s(t,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function o(t){return o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},o(t)}function u(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(u=function(){return!!t})()}function f(t,i){if(i&&("object"==n(i)||"function"==typeof i))return i;if(void 0!==i)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function c(t,i){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,i){return t.__proto__=i,t},c(t,i)}var h=function(t){function i(t,n,r,s){var a,c,h,l;return e(this,i),c=this,l=[t],h=o(h=i),(a=f(c,u()?Reflect.construct(h,l||[],o(c).constructor):h.apply(c,l))).currentTime=r,a.timelineTime=s,a.target=n,a.type="finish",a.bubbles=!1,a.currentTarget=n,a.defaultPrevented=!1,a.eventPhase=a.AT_TARGET,a.timeStamp=Date.now(),a.currentTime=r,a.timelineTime=s,a}return function(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(i&&i.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),i&&c(t,i)}(i,t),a(i)}(i.FederatedEvent),l=0,m=function(){return a((function t(i,n){var r;e(this,t),this.currentTimePending=!1,this._idle=!0,this._paused=!1,this._finishedFlag=!0,this._currentTime=0,this._playbackRate=1,this._inTimeline=!0,this.effect=i,i.animation=this,this.timeline=n,this.id="".concat(l++),this._inEffect=!!this.effect.update(0),this._totalDuration=Number(null===(r=this.effect)||void 0===r?void 0:r.getComputedTiming().endTime),this._holdTime=0,this._paused=!1,this.oldPlayState="idle",this.updatePromises()}),[{key:"pending",get:function(){return null===this._startTime&&!this._paused&&0!==this.playbackRate||this.currentTimePending}},{key:"playState",get:function(){return this._idle?"idle":this._isFinished?"finished":this._paused?"paused":"running"}},{key:"ready",get:function(){var t=this;return this.readyPromise||(-1===this.timeline.animationsWithPromises.indexOf(this)&&this.timeline.animationsWithPromises.push(this),this.readyPromise=new Promise((function(i,e){t.resolveReadyPromise=function(){i(t)},t.rejectReadyPromise=function(){e(Error())}})),this.pending||this.resolveReadyPromise()),this.readyPromise}},{key:"finished",get:function(){var t=this;return this.finishedPromise||(-1===this.timeline.animationsWithPromises.indexOf(this)&&this.timeline.animationsWithPromises.push(this),this.finishedPromise=new Promise((function(i,e){t.resolveFinishedPromise=function(){i(t)},t.rejectFinishedPromise=function(){e(Error())}})),"finished"===this.playState&&this.resolveFinishedPromise()),this.finishedPromise}},{key:"currentTime",get:function(){return this.updatePromises(),this._idle||this.currentTimePending?null:this._currentTime},set:function(t){if(!isNaN(t=Number(t))){var i;if(this.timeline.restart(),!this._paused&&null!==this._startTime)this._startTime=Number(null===(i=this.timeline)||void 0===i?void 0:i.currentTime)-t/this.playbackRate;this.currentTimePending=!1,this._currentTime!==t&&(this._idle&&(this._idle=!1,this._paused=!0),this.tickCurrentTime(t,!0),this.timeline.applyDirtiedAnimation(this))}}},{key:"startTime",get:function(){return this._startTime},set:function(t){if(null!==t){if(this.updatePromises(),isNaN(t=Number(t)))return;if(this._paused||this._idle)return;this._startTime=t,this.tickCurrentTime((Number(this.timeline.currentTime)-this._startTime)*this.playbackRate),this.timeline.applyDirtiedAnimation(this),this.updatePromises()}}},{key:"playbackRate",get:function(){return this._playbackRate},set:function(t){if(t!==this._playbackRate){this.updatePromises();var i=this.currentTime;this._playbackRate=t,this.startTime=null,"paused"!==this.playState&&"idle"!==this.playState&&(this._finishedFlag=!1,this._idle=!1,this.ensureAlive(),this.timeline.applyDirtiedAnimation(this)),null!==i&&(this.currentTime=i),this.updatePromises()}}},{key:"_isFinished",get:function(){return!this._idle&&(this._playbackRate>0&&Number(this._currentTime)>=this._totalDuration||0>this._playbackRate&&0>=Number(this._currentTime))}},{key:"totalDuration",get:function(){return this._totalDuration}},{key:"_needsTick",get:function(){return this.pending||"running"===this.playState||!this._finishedFlag}},{key:"updatePromises",value:function(){var t=this.oldPlayState,i=this.pending?"pending":this.playState;return this.readyPromise&&i!==t&&("idle"===i?(this.rejectReadyPromise(),this.readyPromise=void 0):"pending"===t?this.resolveReadyPromise():"pending"===i&&(this.readyPromise=void 0)),this.finishedPromise&&i!==t&&("idle"===i?(this.rejectFinishedPromise(),this.finishedPromise=void 0):"finished"===i?this.resolveFinishedPromise():"finished"===t&&(this.finishedPromise=void 0)),this.oldPlayState=i,this.readyPromise||this.finishedPromise}},{key:"play",value:function(){this.updatePromises(),this._paused=!1,(this._isFinished||this._idle)&&(this.rewind(),this._startTime=null),this._finishedFlag=!1,this._idle=!1,this.ensureAlive(),this.timeline.applyDirtiedAnimation(this),-1===this.timeline.animations.indexOf(this)&&this.timeline.animations.push(this),this.updatePromises()}},{key:"pause",value:function(){this.updatePromises(),this.currentTime&&(this._holdTime=this.currentTime),this._isFinished||this._paused||this._idle?this._idle&&(this.rewind(),this._idle=!1):this.currentTimePending=!0,this._startTime=null,this._paused=!0,this.updatePromises()}},{key:"finish",value:function(){this.updatePromises(),this._idle||(this.currentTime=this._playbackRate>0?this._totalDuration:0,this._startTime=this._totalDuration-this.currentTime,this.currentTimePending=!1,this.timeline.applyDirtiedAnimation(this),this.updatePromises())}},{key:"cancel",value:function(){var t=this;if(this.updatePromises(),this._inEffect&&(this._inEffect=!1,this._idle=!0,this._paused=!1,this._finishedFlag=!0,this._currentTime=0,this._startTime=null,this.effect.update(null),this.timeline.applyDirtiedAnimation(this),this.updatePromises(),this.oncancel)){var i=new h(null,this,this.currentTime,null);setTimeout((function(){t.oncancel(i)}))}}},{key:"reverse",value:function(){this.updatePromises();var t=this.currentTime;this.playbackRate*=-1,this.play(),null!==t&&(this.currentTime=t),this.updatePromises()}},{key:"updatePlaybackRate",value:function(t){this.playbackRate=t}},{key:"targetAnimations",value:function(){var t;return(null===(t=this.effect)||void 0===t?void 0:t.target).getAnimations()}},{key:"markTarget",value:function(){var t=this.targetAnimations();-1===t.indexOf(this)&&t.push(this)}},{key:"unmarkTarget",value:function(){var t=this.targetAnimations(),i=t.indexOf(this);-1!==i&&t.splice(i,1)}},{key:"tick",value:function(t,i){this._idle||this._paused||(null===this._startTime?i&&(this.startTime=t-this._currentTime/this.playbackRate):this._isFinished||this.tickCurrentTime((t-this._startTime)*this.playbackRate)),i&&(this.currentTimePending=!1,this.fireEvents(t))}},{key:"rewind",value:function(){if(this.playbackRate<0){if(this._totalDuration>=1/0)throw Error("Unable to rewind negative playback rate animation with infinite duration");this.currentTime=this._totalDuration}else this.currentTime=0}},{key:"persist",value:function(){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}},{key:"addEventListener",value:function(t,e,n){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}},{key:"removeEventListener",value:function(t,e,n){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}},{key:"dispatchEvent",value:function(t){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}},{key:"commitStyles",value:function(){throw Error(i.ERROR_MSG_METHOD_NOT_IMPLEMENTED)}},{key:"ensureAlive",value:function(){var t,i;0>this.playbackRate&&0===this.currentTime?this._inEffect=!(null===(t=this.effect)||void 0===t||!t.update(-1)):this._inEffect=!(null===(i=this.effect)||void 0===i||!i.update(this.currentTime));this._inTimeline||!this._inEffect&&this._finishedFlag||(this._inTimeline=!0,this.timeline.animations.push(this))}},{key:"tickCurrentTime",value:function(t,i){t!==this._currentTime&&(this._currentTime=t,this._isFinished&&!i&&(this._currentTime=this._playbackRate>0?this._totalDuration:0),this.ensureAlive())}},{key:"fireEvents",value:function(t){var i=this;if(this._isFinished){if(!this._finishedFlag){if(this.onfinish){var e=new h(null,this,this.currentTime,t);setTimeout((function(){i.onfinish&&i.onfinish(e)}))}this._finishedFlag=!0}}else{if(this.onframe&&"running"===this.playState){var n=new h(null,this,this.currentTime,t);this.onframe(n)}this._finishedFlag=!1}}}])}();function d(t,i){(null==i||i>t.length)&&(i=t.length);for(var e=0,n=Array(i);i>e;e++)n[e]=t[e];return n}function p(t,i){if(t){if("string"==typeof t)return d(t,i);var e={}.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?d(t,i):void 0}}function y(t){return function(t){if(Array.isArray(t))return d(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||p(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var v=.1,g="function"==typeof Float32Array,b=function(t,i){return 1-3*i+3*t},T=function(t,i){return 3*i-6*t},_=function(t){return 3*t},k=function(t,i,e){return((b(i,e)*t+T(i,e))*t+_(i))*t},P=function(t,i,e){return 3*b(i,e)*t*t+2*T(i,e)*t+_(i)},E=function(t,i,e,n){if(0>t||t>1||0>e||e>1)throw Error("bezier x values must be in [0, 1] range");if(t===i&&e===n)return function(t){return t};for(var r=g?new Float32Array(11):[,,,,,,,,,,,],s=0;11>s;++s)r[s]=k(s*v,t,e);var a=function(i){for(var n=0,s=1;10!==s&&i>=r[s];++s)n+=v;--s;var a=n+(i-r[s])/(r[s+1]-r[s])*v,o=P(a,t,e);return.001>o?0===o?a:function(t,i,e,n,r){var s,a,o=0;do{(s=k(a=i+(e-i)/2,n,r)-t)>0?e=a:i=a}while(Math.abs(s)>1e-7&&10>++o);return a}(i,n,n+v,t,e):function(t,i,e,n){for(var r=0;4>r;++r){var s=P(i,e,n);if(0===s)return i;i-=(k(i,e,n)-t)/s}return i}(i,a,t,e)};return function(t){return 0===t||1===t?t:k(a(t),i,n)}};function w(t,i){return function(t){if(Array.isArray(t))return t}(t)||function(t,i){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=e){var n,r,s,a,o=[],u=!0,f=!1;try{if(s=(e=e.call(t)).next,0===i){if(Object(e)!==e)return;u=!1}else for(;!(u=(n=s.call(e)).done)&&(o.push(n.value),o.length!==i);u=!0);}catch(t){f=!0,r=t}finally{try{if(!u&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(f)throw r}}return o}}(t,i)||p(t,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var A=function(t){return null==t},O={}.toString,M=function(t,i){return O.call(t)==="[object "+i+"]"},N=function(t,i,e){return i>t?i:t>e?e:t},F=function(t){return M(t,"Number")},R=function(t){return Math.pow(t,2)},S=function(t){return Math.pow(t,3)},x=function(t){return Math.pow(t,4)},D=function(t){return Math.pow(t,5)},j=function(t){return Math.pow(t,6)},I=function(t){return 1-Math.cos(t*Math.PI/2)},q=function(t){return 1-Math.sqrt(1-t*t)},C=function(t){return t*t*(3*t-2)},K=function(t){for(var i,e=4;t<((i=Math.pow(2,--e))-1)/11;);return 1/Math.pow(4,3-e)-7.5625*Math.pow((3*i-2)/22-t,2)},G=function(t){var i=w(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],2),e=i[0],n=i[1],r=void 0===n?.5:n,s=N(Number(void 0===e?1:e),1,10),a=N(Number(r),.1,2);return 0===t||1===t?t:-s*Math.pow(2,10*(t-1))*Math.sin(2*Math.PI*(t-1-a/(2*Math.PI)*Math.asin(1/s))/a)},W=function(t){var i=arguments.length>2?arguments[2]:void 0,e=w(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],4),n=e[0],r=void 0===n?1:n,s=e[1],a=void 0===s?100:s,o=e[2],u=void 0===o?10:o,f=e[3],c=void 0===f?0:f;r=N(r,.1,1e3),a=N(a,.1,1e3),u=N(u,.1,1e3),c=N(c,.1,1e3);var h=Math.sqrt(a/r),l=u/(2*Math.sqrt(a*r)),m=1>l?h*Math.sqrt(1-l*l):0,d=1>l?(l*h-c)/m:-c+h,p=i?i*t/1e3:t;return p=1>l?Math.exp(-p*l*h)*(1*Math.cos(m*p)+d*Math.sin(m*p)):(1+d*p)*Math.exp(-p*h),0===t||1===t?t:1-p},z=function(t){var i=w(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],2),e=i[0],n=void 0===e?10:e;return("start"===i[1]?Math.ceil:Math.floor)(N(t,0,1)*n)/n},L=function(t){var i=w(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],4);return E(i[0],i[1],i[2],i[3])(t)},H=E(.42,0,1,1),V=function(t){return function(i){return 1-t(1-i,arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],arguments.length>2?arguments[2]:void 0)}},B=function(t){return function(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0;return.5>i?t(2*i,e,n)/2:1-t(-2*i+2,e,n)/2}},U=function(t){return function(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0;return.5>i?(1-t(1-2*i,e,n))/2:(t(2*i-1,e,n)+1)/2}},Z={steps:z,"step-start":function(t){return z(t,[1,"start"])},"step-end":function(t){return z(t,[1,"end"])},linear:function(t){return t},"cubic-bezier":L,ease:function(t){return L(t,[.25,.1,.25,1])},in:H,out:V(H),"in-out":B(H),"out-in":U(H),"in-quad":R,"out-quad":V(R),"in-out-quad":B(R),"out-in-quad":U(R),"in-cubic":S,"out-cubic":V(S),"in-out-cubic":B(S),"out-in-cubic":U(S),"in-quart":x,"out-quart":V(x),"in-out-quart":B(x),"out-in-quart":U(x),"in-quint":D,"out-quint":V(D),"in-out-quint":B(D),"out-in-quint":U(D),"in-expo":j,"out-expo":V(j),"in-out-expo":B(j),"out-in-expo":U(j),"in-sine":I,"out-sine":V(I),"in-out-sine":B(I),"out-in-sine":U(I),"in-circ":q,"out-circ":V(q),"in-out-circ":B(q),"out-in-circ":U(q),"in-back":C,"out-back":V(C),"in-out-back":B(C),"out-in-back":U(C),"in-bounce":K,"out-bounce":V(K),"in-out-bounce":B(K),"out-in-bounce":U(K),"in-elastic":G,"out-elastic":V(G),"in-out-elastic":B(G),"out-in-elastic":U(G),spring:W,"spring-in":W,"spring-out":V(W),"spring-in-out":B(W),"spring-out-in":U(W)},$=function(t){return Z[function(t){return(i=t,"-"===(i=i.replace(/([A-Z])/g,(function(t){return"-".concat(t.toLowerCase())}))).charAt(0)?i.substring(1):i).replace(/^ease-/,"").replace(/(\(|\s).+/,"").toLowerCase().trim();var i}(t)]||Z.linear},J=function(t){return t},Q=1,X=.5,Y=0;function tt(t,i){return function(e){if(e>=1)return 1;var n=1/t;return(e+=i*n)-e%n}}var it="\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*",et=RegExp("cubic-bezier\\(".concat(it,",").concat(it,",").concat(it,",").concat(it,"\\)")),nt=/steps\(\s*(\d+)\s*\)/,rt=/steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;function st(t){var i=et.exec(t);if(i)return E.apply(void 0,y(i.slice(1).map(Number)));var e=nt.exec(t);if(e)return tt(Number(e[1]),Y);var n=rt.exec(t);return n?tt(Number(n[1]),{start:Q,middle:X,end:Y}[n[2]]):$(t)}function at(t){return Math.abs(function(t){var i;if(0===t.duration||0===t.iterations)return 0;return("auto"===t.duration?0:Number(t.duration))*(null!==(i=t.iterations)&&void 0!==i?i:1)}(t)/(t.playbackRate||1))}var ot=0,ut=1,ft=2,ct=3;function ht(t,i,e){var n=function(t,i,e){if(null===i)return ot;var n=e.endTime;return Math.min(e.delay,n)>i?ut:Math.min(e.delay+t+e.endDelay,n)>i?ct:ft}(t,i,e),r=function(t,i,e,n,r){switch(n){case ut:return"backwards"===i||"both"===i?0:null;case ct:return e-r;case ft:return"forwards"===i||"both"===i?t:null;case ot:return null}}(t,e.fill,i,n,e.delay);if(null===r)return null;var s="auto"===e.duration?0:e.duration,a=function(t,i,e,n,r){var s=r;return 0===t?i!==ut&&(s+=e):s+=n/t,s}(s,n,e.iterations,r,e.iterationStart),o=function(t,i,e,n,r,s){var a=t===1/0?i%1:t%1;return 0!==a||e!==ft||0===n||0===r&&0!==s||(a=1),a}(a,e.iterationStart,n,e.iterations,r,s),u=function(t,i,e,n){return t===ft&&i===1/0?1/0:1===e?Math.floor(n)-1:Math.floor(n)}(n,e.iterations,o,a),f=function(t,i,e){var n=t;if("normal"!==t&&"reverse"!==t){var r=i;"alternate-reverse"===t&&(r+=1),n="normal",r!==1/0&&r%2!=0&&(n="reverse")}return"normal"===n?e:1-e}(e.direction,u,o);return e.currentIteration=u,e.progress=f,e.easingFunction(f)}function lt(t,i,e){var n=function(t,i){for(var e={},n=0;t.length>n;n++)for(var r in t[n])if(mt(r)){var s={offset:t[n].offset,computedOffset:t[n].computedOffset,easing:t[n].easing,easingFunction:st(t[n].easing)||i.easingFunction,value:t[n][r]};e[r]=e[r]||[],e[r].push(s)}return e}(t,i),r=function(t,i){var e=[];for(var n in t)for(var r=t[n],s=0;r.length-1>s;s++){var a=s,o=s+1,u=r[a].computedOffset,f=r[o].computedOffset,c=u,h=f;0===s&&(c=-1/0,0===f&&(o=a)),s===r.length-2&&(h=1/0,1===u&&(a=o)),e.push({applyFrom:c,applyTo:h,startOffset:r[a].computedOffset,endOffset:r[o].computedOffset,easingFunction:r[a].easingFunction,property:n,interpolation:pt(n,r[a].value,r[o].value,i)})}return e.sort((function(t,i){return t.startOffset-i.startOffset})),e}(n,e);return function(t,i){if(null!==i)r.filter((function(t){return i>=t.applyFrom&&t.applyTo>i})).forEach((function(e){var n=e.endOffset-e.startOffset;t.setAttribute(e.property,e.interpolation(0===n?0:(i-e.startOffset)/n),!1,!1)}));else for(var e in n)mt(e)&&t.setAttribute(e,null)}}function mt(t){return"offset"!==t&&"easing"!==t&&"composite"!==t&&"computedOffset"!==t}var dt=function(t,i,e){return function(n){var r=yt(t,i,n);return F(r)?r:e(r)}};function pt(t,e,n,r){var s=i.propertyMetadataCache[t];if(s&&s.syntax&&s.int){var a=i.runtime.styleValueRegistry.getPropertySyntax(s.syntax);if(a){var o=a.parser,u=o?o(e,r):e,f=o?o(n,r):n,c=a.mixer(u,f,r);if(c){var h=dt.apply(void 0,y(c));return function(t){return 0===t?e:1===t?n:h(t)}}}}return dt(!1,!0,(function(t){return t?n:e}))}function yt(t,i,e){if("number"==typeof t&&"number"==typeof i)return t*(1-e)+i*e;if("boolean"==typeof t&&"boolean"==typeof i||"string"==typeof t&&"string"==typeof i)return.5>e?t:i;if(Array.isArray(t)&&Array.isArray(i)){for(var n=t.length,r=i.length,s=Math.max(n,r),a=[],o=0;s>o;o++)a.push(yt(t[n>o?o:n-1],i[r>o?o:r-1],e));return a}throw Error("Mismatched interpolation arguments ".concat(t,":").concat(i))}var vt=function(){return a((function t(){e(this,t),this.delay=0,this.direction="normal",this.duration="auto",this._easing="linear",this.easingFunction=J,this.endDelay=0,this.fill="auto",this.iterationStart=0,this.iterations=1,this.currentIteration=null,this.progress=null}),[{key:"easing",get:function(){return this._easing},set:function(t){this.easingFunction=st(t),this._easing=t}}])}();function gt(t,i){if(null===t)return[];Array.isArray(t)||(t=function(t){var i=[];for(var e in t)if(!(e in["easing","offset","composite"])){var n=t[e];Array.isArray(n)||(n=[n]);for(var r=n.length,s=0;r>s;s++){if(!i[s]){var a={};"offset"in t&&(a.offset=Number(t.offset)),"easing"in t&&(a.easing=t.easing),"composite"in t&&(a.composite=t.composite),i[s]=a}null!=n[s]&&(i[s][e]=n[s])}}return i.sort((function(t,i){return(t.computedOffset||0)-(i.computedOffset||0)})),i}(t));for(var e=t.map((function(t){var e={};for(var n in null!=i&&i.composite&&(e.composite="auto"),t){var r=t[n];if("offset"===n){if(null!==r){if(!isFinite(r=Number(r)))throw Error("Keyframe offsets must be numbers.");if(0>r||r>1)throw Error("Keyframe offsets must be between 0 and 1.");e.computedOffset=r}}else if("composite"===n&&-1===["replace","add","accumulate","auto"].indexOf(r))throw Error("".concat(r," compositing is not supported"));e[n]=r}return void 0===e.offset&&(e.offset=null),void 0===e.easing&&(e.easing=(null==i?void 0:i.easing)||"linear"),void 0===e.composite&&(e.composite="auto"),e})),n=!0,r=-1/0,s=0;e.length>s;s++){var a=e[s].offset;if(A(a))n=!1;else{if(r>a)throw new TypeError("Keyframes are not loosely sorted by offset. Sort or specify offsets.");r=a}}return e=e.filter((function(t){return Number(t.offset)>=0&&1>=Number(t.offset)})),n||function(){var t,i,n=e.length;e[n-1].computedOffset=Number(null!==(t=e[n-1].offset)&&void 0!==t?t:1),n>1&&(e[0].computedOffset=Number(null!==(i=e[0].offset)&&void 0!==i?i:0));for(var r=0,s=Number(e[0].computedOffset),a=1;n>a;a++){var o=e[a].computedOffset;if(!A(o)&&!A(s)){for(var u=1;a-r>u;u++)e[r+u].computedOffset=s+(Number(o)-s)*u/(a-r);r=a,s=Number(o)}}}(),e}var bt="backwards|forwards|both|none".split("|"),Tt="reverse|alternate|alternate-reverse".split("|");function _t(t,i){var e=new vt;return i&&(e.fill="both",e.duration="auto"),"number"!=typeof t||isNaN(t)?void 0!==t&&Object.keys(t).forEach((function(i){if(null!=t[i]&&"auto"!==t[i]){if(("number"==typeof e[i]||"duration"===i)&&("number"!=typeof t[i]||isNaN(t[i])))return;if("fill"===i&&-1===bt.indexOf(t[i]))return;if("direction"===i&&-1===Tt.indexOf(t[i]))return;e[i]=t[i]}})):e.duration=t,e}function kt(t,i){var e;return _t(t=Pt(null!==(e=t)&&void 0!==e?e:{duration:"auto"}),i)}function Pt(t){return"number"==typeof t&&(t=isNaN(t)?{duration:"auto"}:{duration:t}),t}var Et=function(){return a((function t(n,r,s){var a=this;e(this,t),this.composite="replace",this.iterationComposite="replace",this.target=n,this.timing=kt(s,!1),this.timing.effect=this,this.timing.activeDuration=at(this.timing),this.timing.endTime=Math.max(0,this.timing.delay+this.timing.activeDuration+this.timing.endDelay),this.normalizedKeyframes=gt(r,this.timing),this.interpolations=lt(this.normalizedKeyframes,this.timing,this.target);var o=i.runtime.globalThis.Proxy;this.computedTiming=o?new o(this.timing,{get:function(t,i){return"duration"===i?"auto"===t.duration?0:t.duration:"fill"===i?"auto"===t.fill?"none":t.fill:"localTime"===i?a.animation&&a.animation.currentTime||null:"currentIteration"===i?a.animation&&"running"===a.animation.playState?t.currentIteration||0:null:"progress"===i?a.animation&&"running"===a.animation.playState?t.progress||0:null:t[i]},set:function(){return!0}}):this.timing}),[{key:"applyInterpolations",value:function(){this.interpolations(this.target,Number(this.timeFraction))}},{key:"update",value:function(t){return null!==t&&(this.timeFraction=ht(this.timing.activeDuration,t,this.timing),null!==this.timeFraction)}},{key:"getKeyframes",value:function(){return this.normalizedKeyframes}},{key:"setKeyframes",value:function(t){this.normalizedKeyframes=gt(t)}},{key:"getComputedTiming",value:function(){return this.computedTiming}},{key:"getTiming",value:function(){return this.timing}},{key:"updateTiming",value:function(t){var i=this;Object.keys(t||{}).forEach((function(e){i.timing[e]=t[e]}))}}])}();function wt(t,i){return Number(t.id)-Number(i.id)}var At=function(){return a((function t(i){var n=this;e(this,t),this.animations=[],this.ticking=!1,this.timelineTicking=!1,this.hasRestartedThisFrame=!1,this.animationsWithPromises=[],this.inTick=!1,this.pendingEffects=[],this.currentTime=null,this.rafId=0,this.rafCallbacks=[],this.webAnimationsNextTick=function(t){n.currentTime=t,n.discardAnimations(),0===n.animations.length?n.timelineTicking=!1:n.requestAnimationFrame(n.webAnimationsNextTick)},this.processRafCallbacks=function(t){var i=n.rafCallbacks;n.rafCallbacks=[],Number(n.currentTime)>t&&(t=Number(n.currentTime)),n.animations.sort(wt),n.animations=n.tick(t,!0,n.animations)[0],i.forEach((function(i){i[1](t)})),n.applyPendingEffects()},this.document=i}),[{key:"getAnimations",value:function(){return this.discardAnimations(),this.animations.slice()}},{key:"isTicking",value:function(){return this.inTick}},{key:"play",value:function(t,i,e){var n=new Et(t,i,e),r=new m(n,this);return this.animations.push(r),this.restartWebAnimationsNextTick(),r.updatePromises(),r.play(),r.updatePromises(),r}},{key:"applyDirtiedAnimation",value:function(t){var i=this;if(!this.inTick){t.markTarget();var e=t.targetAnimations();e.sort(wt),this.tick(Number(this.currentTime),!1,e.slice())[1].forEach((function(t){var e=i.animations.indexOf(t);-1!==e&&i.animations.splice(e,1)})),this.applyPendingEffects()}}},{key:"restart",value:function(){return this.ticking||(this.ticking=!0,this.requestAnimationFrame((function(){})),this.hasRestartedThisFrame=!0),this.hasRestartedThisFrame}},{key:"destroy",value:function(){this.document.defaultView.cancelAnimationFrame(this.frameId)}},{key:"applyPendingEffects",value:function(){this.pendingEffects.forEach((function(t){null==t||t.applyInterpolations()})),this.pendingEffects=[]}},{key:"updateAnimationsPromises",value:function(){this.animationsWithPromises=this.animationsWithPromises.filter((function(t){return t.updatePromises()}))}},{key:"discardAnimations",value:function(){this.updateAnimationsPromises(),this.animations=this.animations.filter((function(t){return"finished"!==t.playState&&"idle"!==t.playState}))}},{key:"restartWebAnimationsNextTick",value:function(){this.timelineTicking||(this.timelineTicking=!0,this.requestAnimationFrame(this.webAnimationsNextTick))}},{key:"rAF",value:function(t){var i=this.rafId++;return 0===this.rafCallbacks.length&&(this.frameId=this.document.defaultView.requestAnimationFrame(this.processRafCallbacks)),this.rafCallbacks.push([i,t]),i}},{key:"requestAnimationFrame",value:function(t){var i=this;return this.rAF((function(e){i.updateAnimationsPromises(),t(e),i.updateAnimationsPromises()}))}},{key:"tick",value:function(t,i,e){var n,r,s=this;this.inTick=!0,this.hasRestartedThisFrame=!1,this.currentTime=t,this.ticking=!1;var a=[],o=[],u=[],f=[];return e.forEach((function(e){e.tick(t,i),e._inEffect?(o.push(e.effect),e.markTarget()):(a.push(e.effect),e.unmarkTarget()),e._needsTick&&(s.ticking=!0);var n=e._inEffect||e._needsTick;e._inTimeline=n,n?u.push(e):f.push(e)})),(n=this.pendingEffects).push.apply(n,a),(r=this.pendingEffects).push.apply(r,o),this.ticking&&this.requestAnimationFrame((function(){})),this.inTick=!1,[u,f]}}])}();i.runtime.EasingFunction=st,i.runtime.AnimationTimeline=At,t.Animation=m,t.AnimationEvent=h,t.AnimationTimeline=At,t.EasingFunctions=Z,t.KeyframeEffect=Et,t.compareAnimations=wt,t.makeTiming=_t,t.normalizeKeyframes=gt,t.normalizeTimingInput=kt,t.numericTimingToObject=Pt}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "@antv/g-web-animations-api",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A simple implementation of Web Animations API.",
@@ -41,3 +41,3 @@ "keywords": [
     "tslib": "^2.5.3",
-    "@antv/g-lite": "2.1.1"
+    "@antv/g-lite": "2.1.2"
   },
@@ -44,0 +44,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

568832

increased by7.35%

Lines of code

3964

increased by10.08%

Dependency changes

• + Added@antv/g-lite@2.1.2(transitive)

• - Removed@antv/g-lite@2.1.1(transitive)

• Updated@antv/g-lite@2.1.2