@visactor/vrender 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/index.js

@@ -1226,6 +1226,9 @@
     };
     var isArrayLike$1 = isArrayLike;
 
+    const isDate = value => isType$1(value, "Date");
+    var isDate$1 = isDate;
+
     const isNumber = function (value) {
       let fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
       const type = typeof value;
@@ -1246,6 +1249,22 @@
       has = (object, key) => null != object && hasOwnProperty.call(object, key);
     var has$1 = has;
 
+    function cloneDeep(value, ignoreWhen, excludeKeys) {
+      let result;
+      if (!isValid$1(value) || "object" != typeof value || ignoreWhen && ignoreWhen(value)) return value;
+      const isArr = isArray$1(value),
+        length = value.length;
+      result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$1(value) || isNumber$1(value) || isString$1(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
+      const props = isArr ? void 0 : Object.keys(Object(value));
+      let index = -1;
+      if (result) for (; ++index < (props || value).length;) {
+        const key = props ? props[index] : index,
+          subValue = value[key];
+        excludeKeys && excludeKeys.includes(key.toString()) ? result[key] = subValue : result[key] = cloneDeep(subValue, ignoreWhen, excludeKeys);
+      }
+      return result;
+    }
+
     function baseMerge(target, source) {
       let shallowArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
       let skipTargetArray = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
@@ -16850,6 +16869,12 @@
       get eventSystem() {
         return this._eventSystem;
       }
+      get ticker() {
+        return this._ticker;
+      }
+      set ticker(ticker) {
+        ticker.bindStage(this), this._ticker && this._ticker.removeListener("tick", this.afterTickCb), ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
+      }
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a, _b;
@@ -16866,7 +16891,7 @@
         }, this.afterRender = stage => {
           this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
-          this.tickedBeforeRender = !0, "rendering" !== this.state && this.render();
+          this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
           afterRender: new SyncHook(["stage"])
@@ -16889,10 +16914,10 @@
       }
       initAnimate(params) {
         var _a;
-        this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
+        this.createTicker && this.createTimeline && (this._ticker = params.ticker || this.createTicker(this), this._ticker.bindStage(this), "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this._ticker.setFPS(30), this.timeline = this.createTimeline(), this._ticker.addTimeline(this.timeline), this._ticker.on("tick", this.afterTickCb));
       }
       startAnimate() {
-        this.ticker && this.timeline && (this.ticker.start(), this.timeline.resume());
+        this._ticker && this.timeline && (this._ticker.start(), this.timeline.resume());
       }
       pauseRender() {
         let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -17225,7 +17250,7 @@
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this.ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this.ticker) || void 0 === _b || _b.removeListener("afterTick", this.afterTickCb), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -30164,7 +30189,7 @@
       tryPreventConflict() {
         const animate = this.animate;
         this.target.animates.forEach(a => {
-          if (a === animate || a.priority > animate.priority) return;
+          if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
           const fromProps = a.getStartProps();
           this.propKeys.forEach(key => {
             null != fromProps[key] && a.preventAttr(key);
@@ -30210,6 +30235,13 @@
       constructor(type, props, duration, easing) {
         super(type, props, duration, easing);
       }
+      onStart() {
+        super.onStart();
+      }
+      onFirstRun() {
+        const fromProps = this.getFromProps();
+        this.target.setAttributes(fromProps);
+      }
       update(end, ratio, out) {
         this.onStart();
       }
@@ -30218,19 +30250,29 @@
 
     class DefaultTimeline {
       get animateCount() {
-        return this.animates.length;
+        return this._animateCount;
       }
       constructor() {
-        this.animates = [], this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._endAnimatePtr = -1, this.id = Generator.GenAutoIncrementId(), this.animates = [], this.paused = !1;
+        this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
       }
       isRunning() {
-        return !this.paused && this._endAnimatePtr >= 0;
+        return !this.paused && this._animateCount > 0;
       }
       forEachAccessAnimate(cb) {
-        for (let i = 0; i <= this._endAnimatePtr; i++) cb(this.animates[i], i);
+        let current = this.head,
+          index = 0;
+        for (; current;) {
+          const next = current.next;
+          cb(current.animate, index), index++, current = next;
+        }
       }
       addAnimate(animate) {
-        this.animates.push(animate), this._endAnimatePtr++, this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr], this.animates[this._endAnimatePtr] = animate, this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+        const newNode = {
+          animate: animate,
+          next: null,
+          prev: null
+        };
+        this.head ? this.tail && (this.tail.next = newNode, newNode.prev = this.tail, this.tail = newNode) : (this.head = newNode, this.tail = newNode), this.animateMap.set(animate, newNode), this._animateCount++, this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
       }
       pause() {
         this.paused = !0;
@@ -30242,21 +30284,21 @@
         if (this.paused) return;
         const scaledDelta = delta * this._playSpeed;
         this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
-          animate.status === exports.AnimateStatus.END ? this.removeAnimate(animate, !0, i) : animate.status !== exports.AnimateStatus.RUNNING && animate.status !== exports.AnimateStatus.INITIAL || animate.advance(scaledDelta);
+          animate.status === exports.AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== exports.AnimateStatus.RUNNING && animate.status !== exports.AnimateStatus.INITIAL || animate.advance(scaledDelta);
         });
       }
       clear() {
         this.forEachAccessAnimate(animate => {
           animate.release();
-        }), this.animates = [], this._totalDuration = 0;
+        }), this.head = null, this.tail = null, this.animateMap.clear(), this._animateCount = 0, this._totalDuration = 0;
       }
       removeAnimate(animate) {
         let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-        let index = arguments.length > 2 ? arguments[2] : undefined;
-        this._endAnimatePtr < 0 || (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), index = null != index ? index : this.animates.indexOf(animate), this.animates[index] = this.animates[this._endAnimatePtr], this._endAnimatePtr--);
+        const node = this.animateMap.get(animate);
+        node && (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), node.prev ? node.prev.next = node.next : this.head = node.next, node.next ? node.next.prev = node.prev : this.tail = node.prev, this.animateMap.delete(animate), this._animateCount--, animate.getStartTime() + animate.getDuration() >= this._totalDuration && this.recalculateTotalDuration());
       }
       recalculateTotalDuration() {
-        this._totalDuration = 0, this.animates.forEach(animate => {
+        this._totalDuration = 0, this.forEachAccessAnimate(animate => {
           this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
         });
       }
@@ -30441,11 +30483,11 @@
         return this._bounce = b, this;
       }
       advance(delta) {
-        var _a;
+        var _a, _b, _c;
         if (this.status === exports.AnimateStatus.END) return void console.warn("aaa 动画已经结束，不能推进");
         const nextTime = this.currentTime + delta;
         if (nextTime < this._startTime) return void (this.currentTime = nextTime);
-        if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(), this.onEnd(), void (this.status = exports.AnimateStatus.END);
+        if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), void (this.status = exports.AnimateStatus.END);
         this.status = exports.AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
         let cycleTime = nextTime - this._startTime,
           newLoop = !1,
@@ -30470,9 +30512,10 @@
           }
         }
         if (!targetStep) return;
+        targetStep !== this.lastRunStep && (null === (_c = this.lastRunStep) || void 0 === _c || _c.onEnd()), this.lastRunStep = targetStep;
         const ratio = (cycleTime - targetStep.getStartTime()) / targetStep.getDuration(),
           isEnd = ratio >= 1;
-        targetStep.update(isEnd, ratio, {}), isEnd && targetStep.onEnd();
+        targetStep.update(isEnd, ratio, {}), isEnd && (targetStep.onEnd(), this.lastRunStep = null);
       }
       updateDuration() {
         this._lastStep ? (this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration(), this._totalDuration = this._duration * (this._loopCount + 1)) : this._duration = 0;
@@ -30504,10 +30547,7 @@
     }
     class DefaultTicker extends EventEmitter {
       constructor(stage) {
-        super(), this.timelines = [], this.frameTimeHistory = [], this.checkSkip = delta => {
-          if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
-          return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
-        }, this.handleTick = (handler, params) => {
+        super(), this.timelines = [], this.frameTimeHistory = [], this.handleTick = (handler, params) => {
           const {
             once = !1
           } = null != params ? params : {};
@@ -30523,6 +30563,9 @@
           }), this.emit("tick", delta));
         }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.stage = stage, this.autoStop = !0, this.interval = 16, this.computeTimeOffsetAndJitter();
       }
+      bindStage(stage) {
+        this.stage = stage;
+      }
       computeTimeOffsetAndJitter() {
         this.timeOffset = Math.floor(Math.random() * this.interval), this._jitter = Math.min(Math.max(.2 * this.interval, 6), .7 * this.interval);
       }
@@ -30604,14 +30647,18 @@
         var _a;
         this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
       }
+      checkSkip(delta) {
+        if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
+        return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
+      }
     }
 
     class ManualTickHandler {
       constructor() {
-        this.released = !1, this.startTime = -1, this.currentTime = -1;
+        this.released = !1, this.currentTime = -1;
       }
       tick(interval, cb) {
-        this.startTime < 0 && (this.startTime = 0), this.currentTime = this.startTime + interval, cb(this);
+        this.currentTime < 0 && (this.currentTime = 0), this.currentTime += interval, cb(this);
       }
       release() {
         this.released = !0;
@@ -30619,15 +30666,39 @@
       getTime() {
         return this.currentTime;
       }
+      tickTo(time, cb) {
+        this.currentTime < 0 && (this.currentTime = 0);
+        const interval = time - this.currentTime;
+        this.tick(interval, cb);
+      }
     }
     class ManualTicker extends DefaultTicker {
+      constructor(stage) {
+        super(stage), this.lastFrameTime = 0, this.status = exports.STATUS.RUNNING;
+      }
       setupTickHandler() {
         const handler = new ManualTickHandler();
         return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
       }
+      checkSkip(delta) {
+        return !1;
+      }
       getTime() {
         return this.tickerHandler.getTime();
       }
+      tickAt(time) {
+        this.tickTo(time);
+      }
+      start() {
+        let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+        if (this.status === exports.STATUS.RUNNING) return !1;
+        if (!this.tickerHandler) return !1;
+        if (!force) {
+          if (this.status === exports.STATUS.PAUSE) return !1;
+          if (this.ifCanStop()) return !1;
+        }
+        return this.status = exports.STATUS.RUNNING, !0;
+      }
     }
 
     function generatorPathEasingFunc(path) {
@@ -30738,47 +30809,49 @@
           index >= 0 && this._animates.splice(index, 1), 0 === this._activeCount && this._started && (this._started = !1, this.onEnd());
         });
       }
-      parseParams(params, isTimeline) {
+      parseParams(params, isTimeline, child) {
         var _a, _b;
         const totalTime = this.resolveValue(params.totalTime, void 0, void 0),
           startTime = this.resolveValue(params.startTime, void 0, 0),
-          parsedParams = Object.assign({}, params);
+          parsedParams = cloneDeep(params);
         parsedParams.oneByOneDelay = 0, parsedParams.startTime = startTime, parsedParams.totalTime = totalTime;
-        const oneByOne = this.resolveValue(params.oneByOne, void 0, !1);
+        const oneByOne = this.resolveValue(params.oneByOne, child, !1);
         if (isTimeline) {
           const timeSlices = parsedParams.timeSlices;
           isArray$1(timeSlices) || (parsedParams.timeSlices = [timeSlices]);
           let sliceTime = 0;
           parsedParams.timeSlices.forEach(slice => {
-            slice.delay = this.resolveValue(slice.delay, void 0, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, void 0, 0), slice.duration = this.resolveValue(slice.duration, void 0, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
+            slice.delay = this.resolveValue(slice.delay, child, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, child, 0), slice.duration = this.resolveValue(slice.duration, child, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
           });
           let oneByOneDelay = 0,
             oneByOneTime = 0;
-          if (oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, totalTime) {
-            const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2),
-              scale = totalTime ? totalTime / _totalTime : 1;
-            parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
-              let effects = slice.effects;
-              return Array.isArray(effects) || (effects = [effects]), Object.assign(Object.assign({}, slice), {
-                delay: slice.delay * scale,
-                delayAfter: slice.delayAfter * scale,
-                duration: slice.duration * scale,
-                effects: effects.map(effect => {
-                  var _a, _b;
-                  const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = effect.type) && void 0 !== _b ? _b : "fromTo"],
-                    customType = custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
-                  return Object.assign(Object.assign({}, effect), {
-                    custom: custom,
-                    customType: customType
-                  });
-                })
-              });
-            }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
+          oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay;
+          let scale = 1;
+          if (totalTime) {
+            const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
+            scale = totalTime ? totalTime / _totalTime : 1;
           }
+          parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+            let effects = slice.effects;
+            return Array.isArray(effects) || (effects = [effects]), Object.assign(Object.assign({}, slice), {
+              delay: slice.delay * scale,
+              delayAfter: slice.delayAfter * scale,
+              duration: slice.duration * scale,
+              effects: effects.map(effect => {
+                var _a, _b;
+                const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = effect.type) && void 0 !== _b ? _b : "fromTo"],
+                  customType = custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
+                return Object.assign(Object.assign({}, effect), {
+                  custom: custom,
+                  customType: customType
+                });
+              })
+            });
+          }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
         } else {
-          const delay = this.resolveValue(params.delay, void 0, 0),
-            delayAfter = this.resolveValue(params.delayAfter, void 0, 0),
-            duration = this.resolveValue(params.duration, void 0, 300);
+          const delay = this.resolveValue(params.delay, child, 0),
+            delayAfter = this.resolveValue(params.delayAfter, child, 0),
+            duration = this.resolveValue(params.duration, child, 300);
           let oneByOneDelay = 0,
             oneByOneTime = 0;
           oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = duration + oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, parsedParams.custom = null !== (_a = params.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = params.type) && void 0 !== _b ? _b : "fromTo"];
@@ -30799,20 +30872,21 @@
         const isTimeline = ("timeSlices" in params);
         let filteredChildren;
         isTimeline && params.partitioner && (filteredChildren = (null != filteredChildren ? filteredChildren : this._target.getChildren()).filter(child => {
-          var _a;
-          return params.partitioner(null === (_a = child.context) || void 0 === _a ? void 0 : _a.data, child, {});
-        })), isTimeline && params.sort && (filteredChildren = null != filteredChildren ? filteredChildren : this._target.getChildren(), filteredChildren.sort((a, b) => {
           var _a, _b;
-          return params.sort(null === (_a = a.context) || void 0 === _a ? void 0 : _a.data, null === (_b = b.context) || void 0 === _b ? void 0 : _b.data, a, b, {});
+          return params.partitioner(null === (_b = null === (_a = child.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], child, {});
+        })), isTimeline && params.sort && (filteredChildren = null != filteredChildren ? filteredChildren : this._target.getChildren(), filteredChildren.sort((a, b) => {
+          var _a, _b, _c, _d;
+          return params.sort(null === (_b = null === (_a = a.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], null === (_d = null === (_c = b.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], a, b, {});
         }));
-        const parsedParams = this.parseParams(params, isTimeline),
-          cb = isTimeline ? (child, index, count) => {
-            const animate = this.executeTimelineItem(parsedParams, child, index, count);
-            animate && this._trackAnimation(animate);
-          } : (child, index, count) => {
-            const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
-            animate && this._trackAnimation(animate);
-          };
+        const cb = isTimeline ? (child, index, count) => {
+          const parsedParams = this.parseParams(params, isTimeline, child),
+            animate = this.executeTimelineItem(parsedParams, child, index, count);
+          animate && this._trackAnimation(animate);
+        } : (child, index, count) => {
+          const parsedParams = this.parseParams(params, isTimeline, child),
+            animate = this.executeTypeConfigItem(parsedParams, child, index, count);
+          animate && this._trackAnimation(animate);
+        };
         filteredChildren ? filteredChildren.forEach((child, index) => cb(child, index, filteredChildren.length)) : this._target.count <= 1 ? cb(this._target, 0, 1) : this._target.forEachChildren((child, index) => cb(child, index, this._target.count - 1));
       }
       executeTypeConfigItem(params, graphic, index, count) {
@@ -30840,22 +30914,24 @@
         const delayValue = isFunction$1(delay) ? delay(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : delay,
           datum = null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0],
           indexKey = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.indexKey;
-        datum && indexKey && (index = null !== (_f = datum[indexKey]) && void 0 !== _f ? _f : index), animate.startAt(startTime + delayValue);
-        const wait = index * oneByOneDelay;
+        datum && indexKey && (index = null !== (_f = datum[indexKey]) && void 0 !== _f ? _f : index), animate.startAt(startTime);
+        const wait = index * oneByOneDelay + delayValue;
         wait > 0 && animate.wait(wait);
         let parsedFromProps = null,
           props = params.to,
           from = params.from;
-        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic), oneByOneDelay && animate.wait(oneByOneDelay * (count - index - 1));
+        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        let totalDelay = 0;
+        oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
         const delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
-        return delayAfterValue > 0 && animate.wait(delayAfterValue), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
+        return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
       }
-      _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic) {
+      _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
         var _a, _b, _c, _d;
         if (custom && customType) {
           const customParams = this.resolveValue(customParameters, graphic, {}),
             objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
-          customParams.options = objOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
+          customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
         } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
       }
       executeTimelineItem(params, graphic, index, count) {
@@ -30890,7 +30966,7 @@
           delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : delayAfter;
         delayValue > 0 && animate.wait(delayValue);
         (Array.isArray(effects) ? effects : [effects]).forEach(effect => {
-          var _a, _b;
+          var _a;
           const {
             type = "fromTo",
             channel: channel,
@@ -30903,8 +30979,8 @@
             from = effect.from;
           props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
           const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
-            customType = null !== (_b = effect.customType) && void 0 !== _b ? _b : custom && isFunction$1(custom) ? /^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2 : 0;
-          this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
+            customType = effect.customType;
+          this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, null, options, type, graphic);
         }), delayAfterValue > 0 && animate.wait(delayAfterValue);
       }
       createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
@@ -30927,9 +31003,9 @@
           const value = null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs) || void 0 === _b ? void 0 : _b[key];
           void 0 !== value && (props[key] = value);
         }) : Object.keys(channel).forEach(key => {
-          var _a, _b;
+          var _a, _b, _c, _d;
           const config = channel[key];
-          void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_b = graphic.context) || void 0 === _b ? void 0 : _b.data, graphic, {}) : from[key] = config.from);
+          void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
         }), {
           from: from,
           props: props
@@ -30939,8 +31015,8 @@
         };
       }
       resolveValue(value, graphic, defaultValue) {
-        var _a;
-        return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data, graphic, {}) : value;
+        var _a, _b;
+        return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
       }
       executeItem(params, graphic) {
         let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -31163,6 +31239,10 @@
       getFinalAttribute() {
         return this.finalAttribute;
       }
+      getGraphicAttribute(key) {
+        let prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
+      }
     }
 
     function registerAnimate() {
@@ -31609,21 +31689,18 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a;
+        var _a, _b, _c;
         super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
           to = {},
-          from = {};
+          from = null !== (_b = this.from) && void 0 !== _b ? _b : {};
         this.keys.forEach(key => {
-          var _a, _b;
-          to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_b = fromAttrs[key]) && void 0 !== _b ? _b : 0;
+          var _a, _b, _c;
+          to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_c = null !== (_b = from[key]) && void 0 !== _b ? _b : fromAttrs[key]) && void 0 !== _c ? _c : 0;
         });
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, this.target.setAttributes(from);
-      }
-      onEnd(cb) {
-        super.onEnd(cb);
+        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -31659,7 +31736,9 @@
 
     class GroupFadeIn extends CommonIn {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.keys = ["baseOpacity"];
+        super(from, to, duration, easing, params), this.keys = ["baseOpacity"], this.from = {
+          baseOpacity: 0
+        };
       }
     }
     class GroupFadeOut extends CommonOut {
@@ -31705,7 +31784,9 @@
 
     class ClipIn extends CommonIn {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.keys = ["clipRange"];
+        super(from, to, duration, easing, params), this.keys = ["clipRange"], this.from = {
+          clipRange: 0
+        };
       }
     }
     class ClipOut extends CommonOut {
@@ -31716,7 +31797,9 @@
 
     class FadeIn extends CommonIn {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.keys = ["opacity"];
+        super(from, to, duration, easing, params), this.keys = ["opacity"], this.from = {
+          opacity: 0
+        };
       }
     }
     class FadeOut extends CommonOut {
@@ -32222,6 +32305,7 @@
     }
     class GrowPointsIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32229,7 +32313,7 @@
           } = growPointsIn(this.target, this.params.options, this.params);
           this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
           const finalAttribute = this.target.getFinalAttribute();
-          finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+          finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
         } else this.valid = !1;
       }
     }
@@ -32254,10 +32338,9 @@
       }
     }
     const changePointsX = (graphic, options, animationParameters) => graphic.getFinalAttribute().points.map(point => {
-        var _a;
         if (options && "negative" === options.orient) {
-          let groupRight = animationParameters.width;
-          return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), Object.assign(Object.assign({}, point), {
+          let groupRight = graphic.stage.viewWidth;
+          return graphic.parent.parent.parent && (groupRight = graphic.parent.parent.parent.AABBBounds.width()), Object.assign(Object.assign({}, point), {
             x: groupRight,
             y: point.y,
             x1: groupRight,
@@ -32277,7 +32360,7 @@
         const attrs = graphic.getFinalAttribute();
         return {
           from: {
-            points: changePointsX(graphic, options, animationParameters)
+            points: changePointsX(graphic, options)
           },
           to: {
             points: attrs.points
@@ -32286,6 +32369,7 @@
       };
     class GrowPointsXIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32293,7 +32377,7 @@
           } = growPointsXIn(this.target, this.params.options, this.params);
           this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
           const finalAttribute = this.target.getFinalAttribute();
-          finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+          finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
         } else this.valid = !1;
       }
     }
@@ -32304,24 +32388,23 @@
             {
               from: from,
               to: to
-            } = (graphic = this.target, options = this.params.options, animationParameters = this.params, {
+            } = (graphic = this.target, options = this.params.options, this.params, {
               from: {
                 points: graphic.getFinalAttribute().points
               },
               to: {
-                points: changePointsX(graphic, options, animationParameters)
+                points: changePointsX(graphic, options)
               }
             });
           this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from || attrs, this.to = to;
         } else this.valid = !1;
-        var graphic, options, animationParameters;
+        var graphic, options;
       }
     }
     const changePointsY = (graphic, options, animationParameters) => graphic.getFinalAttribute().points.map(point => {
-        var _a;
         if (options && "negative" === options.orient) {
-          let groupBottom = animationParameters.height;
-          return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), Object.assign(Object.assign({}, point), {
+          let groupBottom = graphic.stage.viewHeight;
+          return graphic.parent.parent.parent && (groupBottom = graphic.parent.parent.parent.AABBBounds.height()), Object.assign(Object.assign({}, point), {
             x: point.x,
             y: groupBottom,
             x1: point.x1,
@@ -32341,7 +32424,7 @@
         const attrs = graphic.getFinalAttribute();
         return {
           from: {
-            points: changePointsY(graphic, options, animationParameters)
+            points: changePointsY(graphic, options)
           },
           to: {
             points: attrs.points
@@ -32350,6 +32433,7 @@
       };
     class GrowPointsYIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32357,7 +32441,7 @@
           } = growPointsYIn(this.target, this.params.options, this.params);
           this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
           const finalAttribute = this.target.getFinalAttribute();
-          finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+          finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
         } else this.valid = !1;
       }
     }
@@ -32367,17 +32451,17 @@
           const {
             from: from,
             to: to
-          } = (graphic = this.target, options = this.params.options, animationParameters = this.params, {
+          } = (graphic = this.target, options = this.params.options, this.params, {
             from: {
               points: graphic.getFinalAttribute().points
             },
             to: {
-              points: changePointsY(graphic, options, animationParameters)
+              points: changePointsY(graphic, options)
             }
           });
           this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = null != from ? from : this.target.attribute, this.to = to;
         } else this.valid = !1;
-        var graphic, options, animationParameters;
+        var graphic, options;
       }
     }
 
@@ -32958,7 +33042,7 @@
 
     class InputRichText extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, this.beforeText = "", this.afterText = "", this.fadeInChars = !1, this.fadeInDuration = .3, void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText), void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText), void 0 !== (null == params ? void 0 : params.fadeInChars) && (this.fadeInChars = params.fadeInChars), void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration);
+        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, this.fadeInChars = !1, this.fadeInDuration = .3, this.strokeFirst = !1, this.strokeToFillRatio = .3, void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), void 0 !== (null == params ? void 0 : params.fadeInChars) && (this.fadeInChars = params.fadeInChars), void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration), void 0 !== (null == params ? void 0 : params.strokeFirst) && (this.strokeFirst = params.strokeFirst), void 0 !== (null == params ? void 0 : params.strokeToFillRatio) && (this.strokeToFillRatio = params.strokeToFillRatio);
       }
       onFirstRun() {
         const fromProps = this.getLastProps(),
@@ -32979,12 +33063,22 @@
           currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);
         } else currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);
         if (currentTextConfig = fromItems > totalItems ? this.fromTextConfig.slice(0, currentLength) : this.toTextConfig.slice(0, currentLength).map((item, index) => {
-          if (this.fadeInChars && "text" in item) {
-            const fadeProgress = (ratio - index / totalItems * maxTextShowRatio) / this.fadeInDuration,
-              opacity = Math.max(0, Math.min(1, fadeProgress));
-            return Object.assign(Object.assign({}, item), {
-              opacity: opacity
-            });
+          if ("text" in item) {
+            const newItem = Object.assign({}, item);
+            if (this.strokeFirst) {
+              const appearTime = index / totalItems * maxTextShowRatio,
+                itemLifetime = Math.max(0, ratio - appearTime),
+                maxLifetime = 1 - appearTime,
+                fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));
+              if ("fill" in newItem && newItem.fill && (newItem.stroke = newItem.fill, fillProgress < 1 && (newItem.fillOpacity = fillProgress)), this.fadeInChars) {
+                const fadeProgress = Math.min(1, itemLifetime / (this.fadeInDuration * maxLifetime));
+                newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
+              }
+            } else if (this.fadeInChars) {
+              const fadeProgress = (ratio - index / totalItems * maxTextShowRatio) / this.fadeInDuration;
+              newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
+            }
+            return newItem;
           }
           return item;
         }), this.showCursor && currentLength < totalItems) {
@@ -33346,7 +33440,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         let from, to;
         super.onBind();
         const attrs = this.target.getFinalAttribute(),
@@ -33376,7 +33470,7 @@
             }, this._updateFunction = this.updateXY;
         }
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.from = from, this.to = to, this.target.setAttributes(from);
+        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.props = to, this.from = from, this.to = to, !1 !== (null === (_l = this.params.controlOptions) || void 0 === _l ? void 0 : _l.immediatelyApply) && this.target.setAttributes(from);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -33550,6 +33644,104 @@
         }), this.target.addUpdatePositionTag(), this.target.addUpdateShapeAndBoundsTag();
       }
     }
+    class StrokeIn extends ACustomAnimate {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
+      }
+      onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        if (super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()), "rect" === this.target.type) {
+          const attr = this.target.attribute,
+            width = null !== (_a = attr.width) && void 0 !== _a ? _a : 100,
+            height = null !== (_b = attr.height) && void 0 !== _b ? _b : 100;
+          this.perimeter = 2 * (width + height);
+        } else if ("circle" === this.target.type) {
+          const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
+          this.perimeter = 2 * Math.PI * radius;
+        } else if ("ellipse" === this.target.type) {
+          const attr = this.target.attribute,
+            radiusX = null !== (_d = attr.radiusX) && void 0 !== _d ? _d : 50,
+            radiusY = null !== (_e = attr.radiusY) && void 0 !== _e ? _e : 50;
+          this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        } else this.perimeter = 1e3;
+        const lineWidth = null !== (_g = null === (_f = this.params) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 2,
+          strokeColor = null !== (_j = null === (_h = this.params) || void 0 === _h ? void 0 : _h.strokeColor) && void 0 !== _j ? _j : "black",
+          fromOpacity = null !== (_l = null === (_k = this.params) || void 0 === _k ? void 0 : _k.fromOpacity) && void 0 !== _l ? _l : 1,
+          dashLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.dashLength) && void 0 !== _o ? _o : this.perimeter,
+          showFill = null !== (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.showFill) && void 0 !== _q && _q,
+          fillOpacity = null !== (_s = null === (_r = this.params) || void 0 === _r ? void 0 : _r.fillOpacity) && void 0 !== _s ? _s : 0;
+        this.from = {
+          lineDash: [dashLength, dashLength],
+          lineDashOffset: dashLength,
+          lineWidth: lineWidth,
+          stroke: strokeColor,
+          strokeOpacity: fromOpacity
+        }, this.to = {
+          lineDash: [dashLength, dashLength],
+          lineDashOffset: 0,
+          lineWidth: lineWidth,
+          stroke: strokeColor,
+          strokeOpacity: fromOpacity
+        }, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, this.target.setAttributes(this.from);
+      }
+      onUpdate(end, ratio, out) {
+        var _a;
+        const attribute = this.target.attribute;
+        attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio, (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
+      }
+      onEnd() {
+        var _a;
+        if (super.onEnd(), !(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill)) {
+          const originalAttrs = Object.assign({}, this.originalAttributes);
+          originalAttrs.fillOpacity = 0, this.target.setAttributes(originalAttrs);
+        }
+      }
+    }
+    class StrokeOut extends ACustomAnimate {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
+      }
+      onFirstRun() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        if (this.originalAttributes = Object.assign({}, this.target.getAttributes()), "rect" === this.target.type) {
+          const attr = this.target.attribute,
+            width = null !== (_a = attr.width) && void 0 !== _a ? _a : 100,
+            height = null !== (_b = attr.height) && void 0 !== _b ? _b : 100;
+          this.perimeter = 2 * (width + height);
+        } else if ("circle" === this.target.type) {
+          const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
+          this.perimeter = 2 * Math.PI * radius;
+        } else if ("ellipse" === this.target.type) {
+          const attr = this.target.attribute,
+            radiusX = null !== (_d = attr.radiusX) && void 0 !== _d ? _d : 50,
+            radiusY = null !== (_e = attr.radiusY) && void 0 !== _e ? _e : 50;
+          this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        } else this.perimeter = 1e3;
+        const lineWidth = null !== (_g = null === (_f = this.params) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 2,
+          strokeColor = null !== (_j = null === (_h = this.params) || void 0 === _h ? void 0 : _h.strokeColor) && void 0 !== _j ? _j : "black",
+          fromOpacity = null !== (_l = null === (_k = this.params) || void 0 === _k ? void 0 : _k.fromOpacity) && void 0 !== _l ? _l : 1,
+          dashLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.dashLength) && void 0 !== _o ? _o : this.perimeter,
+          showFill = null !== (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.showFill) && void 0 !== _q && _q;
+        this.from = {
+          lineDash: [dashLength, dashLength],
+          lineDashOffset: 0,
+          lineWidth: lineWidth,
+          stroke: strokeColor,
+          strokeOpacity: fromOpacity
+        }, this.to = {
+          lineDash: [dashLength, dashLength],
+          lineDashOffset: -dashLength,
+          lineWidth: lineWidth,
+          stroke: strokeColor,
+          strokeOpacity: fromOpacity
+        }, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1, this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, this.target.setAttributes(this.from);
+      }
+      onUpdate(end, ratio, out) {
+        var _a;
+        const attribute = this.target.attribute;
+        attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio, (null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
+      }
+    }
     class MoveScaleIn extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
         var _a;
@@ -33784,6 +33976,35 @@
       }
       onUpdate(end, ratio, out) {}
     }
+    class PulseAnimate extends ACustomAnimate {
+      constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.originalAttributes = {}, this.pulseCount = 3, this.pulseOpacity = .3, this.pulseScale = 1.05, this.pulseColor = null, this.pulseColorIntensity = .2, this.strokeOnly = !1, this.fillOnly = !1, this.useScale = !0, this.useOpacity = !0, this.useStroke = !0, this.useFill = !0, this.useColor = !1, this.originalFill = null, this.originalStroke = null, void 0 !== (null == params ? void 0 : params.pulseCount) && (this.pulseCount = params.pulseCount), void 0 !== (null == params ? void 0 : params.pulseScale) && (this.pulseScale = params.pulseScale), void 0 !== (null == params ? void 0 : params.pulseColor) && (this.pulseColor = params.pulseColor), void 0 !== (null == params ? void 0 : params.pulseColorIntensity) && (this.pulseColorIntensity = params.pulseColorIntensity), void 0 !== (null == params ? void 0 : params.strokeOnly) && (this.strokeOnly = params.strokeOnly), void 0 !== (null == params ? void 0 : params.fillOnly) && (this.fillOnly = params.fillOnly), void 0 !== (null == params ? void 0 : params.useScale) && (this.useScale = params.useScale), void 0 !== (null == params ? void 0 : params.useOpacity) && (this.useOpacity = params.useOpacity), void 0 !== (null == params ? void 0 : params.useStroke) && (this.useStroke = params.useStroke), void 0 !== (null == params ? void 0 : params.useFill) && (this.useFill = params.useFill), void 0 !== (null == params ? void 0 : params.useColor) && (this.useColor = params.useColor);
+      }
+      onBind() {
+        super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()), this.useColor && (this.originalFill = this.originalAttributes.fill || null, this.originalStroke = this.originalAttributes.stroke || null, this.pulseColor || (this.fillOnly && this.originalFill ? this.pulseColor = this.originalFill : this.strokeOnly && this.originalStroke ? this.pulseColor = this.originalStroke : this.originalFill ? this.pulseColor = this.originalFill : this.originalStroke ? this.pulseColor = this.originalStroke : this.pulseColor = "#FFFFFF"));
+      }
+      onUpdate(end, ratio, out) {
+        const angle = ratio * Math.PI * this.pulseCount,
+          pulseValue = Math.abs(Math.sin(angle)),
+          attribute = this.target.attribute;
+        if (this.useOpacity) {
+          const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
+          this.useStroke && (attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity), this.useFill && (attribute.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity);
+        }
+        if (this.useScale) {
+          const scale = 1 + (this.pulseScale - 1) * pulseValue;
+          attribute.scaleX = (this.originalAttributes.scaleX || 1) * scale, attribute.scaleY = (this.originalAttributes.scaleY || 1) * scale;
+        }
+        this.useColor && this.pulseColor && this.applyColorPulse(attribute, pulseValue), this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag();
+      }
+      applyColorPulse(attribute, pulseValue) {
+        const colorRatio = this.pulseColorIntensity * pulseValue;
+        this.useFill && this.originalFill && this.pulseColor && (attribute.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, !0)), this.useStroke && this.originalStroke && this.pulseColor && (attribute.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, !0));
+      }
+      onEnd() {
+        super.onEnd(), this.target.setAttributes(this.originalAttributes);
+      }
+    }
 
     class Update extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
@@ -33824,8 +34045,8 @@
       } = null != options ? options : {};
       let changedX = 0,
         changedY = 0;
-      "negative" === orient && (animationParameters.group ? (changedX = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), changedY = null !== (_b = animationParameters.groupHeight) && void 0 !== _b ? _b : animationParameters.group.getBounds().height(), animationParameters.groupWidth = changedX, animationParameters.groupHeight = changedY) : (changedX = animationParameters.width, changedY = animationParameters.height)), changedX += offset, changedY += offset;
-      const point = isFunction$1(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt,
+      "negative" === orient && (changedX = graphic.stage.viewWidth, changedY = graphic.stage.viewHeight), changedX += offset, changedY += offset;
+      const point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, animationParameters) : pointOpt,
         fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
         fromY = point && isValidNumber$1(point.y) ? point.y : changedY,
         finalAttrs = graphic.getFinalAttribute(),
@@ -33871,12 +34092,11 @@
           direction: direction,
           point: pointOpt
         } = null != options ? options : {},
-        groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null,
-        groupWidth = null !== (_a = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width,
-        groupHeight = null !== (_b = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height,
+        groupWidth = graphic.stage.viewWidth,
+        groupHeight = graphic.stage.viewHeight,
         changedX = ("negative" === orient ? groupWidth : 0) + offset,
         changedY = ("negative" === orient ? groupHeight : 0) + offset,
-        point = isFunction$1(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt,
+        point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, animationParameters) : pointOpt,
         fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
         fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
       switch (direction) {
@@ -33924,6 +34144,7 @@
     }
     class MoveIn extends MoveBase {
       onBind() {
+        var _a;
         super.onBind();
         const {
           from: from,
@@ -33931,7 +34152,7 @@
         } = moveIn(this.target, this.params.options, this.params);
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+        finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
       }
     }
     class MoveOut extends MoveBase {
@@ -33984,6 +34205,7 @@
     }
     class RotateIn extends RotateBase {
       onBind() {
+        var _a;
         super.onBind();
         const {
           from: from,
@@ -33991,7 +34213,7 @@
         } = rotateIn(this.target, this.params.options);
         this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && Object.assign(this.target.attribute, finalAttribute), this.target.setAttributes(from);
+        finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
       }
     }
     class RotateOut extends RotateBase {
@@ -34032,11 +34254,12 @@
         super(from, to, duration, easing, params), this.from = null != from ? from : {};
       }
       onBind() {
+        var _a, _b;
         super.onBind();
         const finalAttribute = this.target.getFinalAttribute();
         Object.keys(this.from).forEach(key => {
           null == this.props[key] && (this.props[key] = finalAttribute[key]);
-        });
+        }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && finalAttribute && Object.assign(this.target.attribute, finalAttribute), !1 !== (null === (_b = this.params.controlOptions) || void 0 === _b ? void 0 : _b.immediatelyApply) && this.target.setAttributes(this.from);
       }
       onFirstRun() {
         var _a;
@@ -34244,10 +34467,10 @@
     }
 
     const registerCustomAnimate = () => {
-      AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
+      AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
     };
 
-    const version = "1.0.0-alpha.3";
+    const version = "1.0.0-alpha.5";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);
@@ -34535,6 +34758,7 @@
     exports.PolygonRenderContribution = PolygonRenderContribution;
     exports.PoptipAppear = PoptipAppear;
     exports.PoptipDisappear = PoptipDisappear;
+    exports.PulseAnimate = PulseAnimate;
     exports.Pyramid3d = Pyramid3d;
     exports.Pyramid3dRender = Pyramid3dRender;
     exports.REACT_TO_CANOPUS_EVENTS = REACT_TO_CANOPUS_EVENTS;
@@ -34580,6 +34804,8 @@
     exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
     exports.Step = Step$1;
     exports.StreamLight = StreamLight;
+    exports.StrokeIn = StrokeIn;
+    exports.StrokeOut = StrokeOut;
     exports.Symbol = Symbol$1;
     exports.SymbolRender = SymbolRender;
     exports.SymbolRenderContribution = SymbolRenderContribution;