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

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) {
+        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;
@@ -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), "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();
       }
@@ -30441,11 +30473,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 +30502,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;
@@ -30619,8 +30652,16 @@
       getTime() {
         return this.currentTime;
       }
+      tickTo(time, cb) {
+        this.startTime < 0 && (this.startTime = 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;
@@ -30628,6 +30669,19 @@
       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 +30792,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 +30855,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 +30897,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 +30949,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 +30962,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 +30986,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 +30998,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 +31222,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 +31672,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 +31719,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 +31767,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 +31780,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 +32288,7 @@
     }
     class GrowPointsIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32229,7 +32296,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 +32321,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 +32343,7 @@
         const attrs = graphic.getFinalAttribute();
         return {
           from: {
-            points: changePointsX(graphic, options, animationParameters)
+            points: changePointsX(graphic, options)
           },
           to: {
             points: attrs.points
@@ -32286,6 +32352,7 @@
       };
     class GrowPointsXIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32293,7 +32360,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 +32371,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 +32407,7 @@
         const attrs = graphic.getFinalAttribute();
         return {
           from: {
-            points: changePointsY(graphic, options, animationParameters)
+            points: changePointsY(graphic, options)
           },
           to: {
             points: attrs.points
@@ -32350,6 +32416,7 @@
       };
     class GrowPointsYIn extends GworPointsBase {
       onBind() {
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
@@ -32357,7 +32424,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 +32434,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;
       }
     }
 
@@ -33346,7 +33413,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 +33443,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);
@@ -33824,8 +33891,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 +33938,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 +33990,7 @@
     }
     class MoveIn extends MoveBase {
       onBind() {
+        var _a;
         super.onBind();
         const {
           from: from,
@@ -33931,7 +33998,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 +34051,7 @@
     }
     class RotateIn extends RotateBase {
       onBind() {
+        var _a;
         super.onBind();
         const {
           from: from,
@@ -33991,7 +34059,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 +34100,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;
@@ -34247,7 +34316,7 @@
       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);
     };
 
-    const version = "1.0.0-alpha.3";
+    const version = "1.0.0-alpha.4";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);