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

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText, divideCubic } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose, PointService } from '@visactor/vutils';
+import { pi2, isString, EventEmitter, cloneDeep, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose, PointService } from '@visactor/vutils';
 
 class Easing {
     constructor() {
@@ -477,7 +477,7 @@ class Step {
         const animate = this.animate;
         const target = this.target;
         target.animates.forEach((a) => {
-            if (a === animate || a.priority > animate.priority) {
+            if (a === animate || a.priority > animate.priority || a.priority === Infinity) {
                 return;
             }
             const fromProps = a.getStartProps();
@@ -550,6 +550,13 @@ class WaitStep extends Step {
     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();
     }
@@ -957,7 +964,7 @@ class Animate {
         return this;
     }
     advance(delta) {
-        var _a;
+        var _a, _b, _c;
         if (this.status === AnimateStatus.END) {
             console.warn('aaa 动画已经结束，不能推进');
             return;
@@ -968,7 +975,8 @@ class Animate {
             return;
         }
         if (nextTime >= this._startTime + this._totalDuration) {
-            (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onEnd();
+            (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onUpdate(true, 1, {});
+            (_b = this._lastStep) === null || _b === void 0 ? void 0 : _b.onEnd();
             this.onEnd();
             this.status = AnimateStatus.END;
             return;
@@ -1014,6 +1022,10 @@ class Animate {
         if (!targetStep) {
             return;
         }
+        if (targetStep !== this.lastRunStep) {
+            (_c = this.lastRunStep) === null || _c === void 0 ? void 0 : _c.onEnd();
+        }
+        this.lastRunStep = targetStep;
         const stepStartTime = targetStep.getStartTime();
         const stepDuration = targetStep.getDuration();
         const ratio = (cycleTime - stepStartTime) / stepDuration;
@@ -1021,6 +1033,7 @@ class Animate {
         targetStep.update(isEnd, ratio, {});
         if (isEnd) {
             targetStep.onEnd();
+            this.lastRunStep = null;
         }
     }
     updateDuration() {
@@ -1259,8 +1272,21 @@ class ManualTickHandler {
     getTime() {
         return this.currentTime;
     }
+    tickTo(time, cb) {
+        if (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 = STATUS.RUNNING;
+    }
     setupTickHandler() {
         const handler = new ManualTickHandler();
         if (this.tickerHandler) {
@@ -1272,6 +1298,27 @@ class ManualTicker extends DefaultTicker {
     getTime() {
         return this.tickerHandler.getTime();
     }
+    tickAt(time) {
+        this.tickTo(time);
+    }
+    start(force = false) {
+        if (this.status === STATUS.RUNNING) {
+            return false;
+        }
+        if (!this.tickerHandler) {
+            return false;
+        }
+        if (!force) {
+            if (this.status === STATUS.PAUSE) {
+                return false;
+            }
+            if (this.ifCanStop()) {
+                return false;
+            }
+        }
+        this.status = STATUS.RUNNING;
+        return true;
+    }
 }
 
 function generatorPathEasingFunc(path) {
@@ -1456,15 +1503,15 @@ class AnimateExecutor {
             }
         });
     }
-    parseParams(params, isTimeline) {
+    parseParams(params, isTimeline, child) {
         var _a, _b;
         const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
         const startTime = this.resolveValue(params.startTime, undefined, 0);
-        const parsedParams = Object.assign({}, params);
+        const parsedParams = cloneDeep(params);
         parsedParams.oneByOneDelay = 0;
         parsedParams.startTime = startTime;
         parsedParams.totalTime = totalTime;
-        const oneByOne = this.resolveValue(params.oneByOne, undefined, false);
+        const oneByOne = this.resolveValue(params.oneByOne, child, false);
         if (isTimeline) {
             const timeSlices = parsedParams.timeSlices;
             if (!isArray(timeSlices)) {
@@ -1472,9 +1519,9 @@ class AnimateExecutor {
             }
             let sliceTime = 0;
             parsedParams.timeSlices.forEach(slice => {
-                slice.delay = this.resolveValue(slice.delay, undefined, 0);
-                slice.delayAfter = this.resolveValue(slice.delayAfter, undefined, 0);
-                slice.duration = this.resolveValue(slice.duration, undefined, 300);
+                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;
@@ -1485,31 +1532,32 @@ class AnimateExecutor {
             }
             parsedParams.oneByOne = oneByOneTime;
             parsedParams.oneByOneDelay = oneByOneDelay;
+            let scale = 1;
             if (totalTime) {
                 const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
-                const scale = totalTime ? totalTime / _totalTime : 1;
-                parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
-                    let effects = slice.effects;
-                    if (!Array.isArray(effects)) {
-                        effects = [effects];
-                    }
-                    return 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 = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = effect.type) !== null && _b !== void 0 ? _b : 'fromTo'];
-                            const customType = custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0;
-                            return Object.assign(Object.assign({}, effect), { custom,
-                                customType });
-                        }) });
-                });
-                parsedParams.oneByOne = oneByOneTime * scale;
-                parsedParams.oneByOneDelay = oneByOneDelay * scale;
-                parsedParams.startTime = startTime * scale;
+                scale = totalTime ? totalTime / _totalTime : 1;
             }
+            parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+                let effects = slice.effects;
+                if (!Array.isArray(effects)) {
+                    effects = [effects];
+                }
+                return 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 = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = effect.type) !== null && _b !== void 0 ? _b : 'fromTo'];
+                        const customType = custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0;
+                        return Object.assign(Object.assign({}, effect), { custom,
+                            customType });
+                    }) });
+            });
+            parsedParams.oneByOne = oneByOneTime * scale;
+            parsedParams.oneByOneDelay = oneByOneDelay * scale;
+            parsedParams.startTime = startTime * scale;
         }
         else {
-            const delay = this.resolveValue(params.delay, undefined, 0);
-            const delayAfter = this.resolveValue(params.delayAfter, undefined, 0);
-            const duration = this.resolveValue(params.duration, undefined, 300);
+            const delay = this.resolveValue(params.delay, child, 0);
+            const delayAfter = this.resolveValue(params.delayAfter, child, 0);
+            const duration = this.resolveValue(params.duration, child, 300);
             let oneByOneDelay = 0;
             let oneByOneTime = 0;
             if (oneByOne) {
@@ -1555,26 +1603,27 @@ class AnimateExecutor {
         let filteredChildren;
         if (isTimeline && params.partitioner) {
             filteredChildren = (filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren()).filter(child => {
-                var _a;
-                return params.partitioner((_a = child.context) === null || _a === void 0 ? void 0 : _a.data, child, {});
+                var _a, _b;
+                return params.partitioner((_b = (_a = child.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], child, {});
             });
         }
         if (isTimeline && params.sort) {
             filteredChildren = filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren();
             filteredChildren.sort((a, b) => {
-                var _a, _b;
-                return params.sort((_a = a.context) === null || _a === void 0 ? void 0 : _a.data, (_b = b.context) === null || _b === void 0 ? void 0 : _b.data, a, b, {});
+                var _a, _b, _c, _d;
+                return params.sort((_b = (_a = a.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], (_d = (_c = b.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], a, b, {});
             });
         }
-        const parsedParams = this.parseParams(params, isTimeline);
         const cb = isTimeline
             ? (child, index, count) => {
+                const parsedParams = this.parseParams(params, isTimeline, child);
                 const animate = this.executeTimelineItem(parsedParams, child, index, count);
                 if (animate) {
                     this._trackAnimation(animate);
                 }
             }
             : (child, index, count) => {
+                const parsedParams = this.parseParams(params, isTimeline, child);
                 const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
                 if (animate) {
                     this._trackAnimation(animate);
@@ -1602,8 +1651,8 @@ class AnimateExecutor {
         if (datum && indexKey) {
             index = (_f = datum[indexKey]) !== null && _f !== void 0 ? _f : index;
         }
-        animate.startAt(startTime + delayValue);
-        const wait = index * oneByOneDelay;
+        animate.startAt(startTime);
+        const wait = index * oneByOneDelay + delayValue;
         wait > 0 && animate.wait(wait);
         let parsedFromProps = null;
         let props = params.to;
@@ -1620,13 +1669,17 @@ class AnimateExecutor {
             }
             from = parsedFromProps.from;
         }
-        this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
+        this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        let totalDelay = 0;
         if (oneByOneDelay) {
-            animate.wait(oneByOneDelay * (count - index - 1));
+            totalDelay = oneByOneDelay * (count - index - 1);
         }
         const delayAfterValue = isFunction(delayAfter) ? delayAfter((_h = (_g = graphic.context) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h[0], graphic, {}) : delayAfter;
         if (delayAfterValue > 0) {
-            animate.wait(delayAfterValue);
+            totalDelay += delayAfterValue;
+        }
+        if (totalDelay > 0) {
+            animate.wait(totalDelay);
         }
         if (loop && loop > 0) {
             animate.loop(loop);
@@ -1636,7 +1689,7 @@ class AnimateExecutor {
         }
         return 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, {});
@@ -1644,6 +1697,7 @@ class AnimateExecutor {
                 ? options.call(null, (_b = (customParams && ((_a = customParams.data) === null || _a === void 0 ? void 0 : _a[0]))) !== null && _b !== void 0 ? _b : (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, customParams)
                 : options;
             customParams.options = objOptions;
+            customParams.controlOptions = controlOptions;
             if (customType === 1) {
                 this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams);
             }
@@ -1695,7 +1749,7 @@ class AnimateExecutor {
         }
         const effectsArray = Array.isArray(effects) ? effects : [effects];
         effectsArray.forEach(effect => {
-            var _a, _b;
+            var _a;
             const { type = 'fromTo', channel, customParameters, easing = 'linear', options } = effect;
             let parsedFromProps = null;
             let props = effect.to;
@@ -1713,8 +1767,8 @@ class AnimateExecutor {
                 from = parsedFromProps.from;
             }
             const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
-            const customType = (_b = effect.customType) !== null && _b !== void 0 ? _b : (custom && isFunction(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);
+            const customType = effect.customType;
+            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, null, options, type, graphic);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -1746,11 +1800,11 @@ class AnimateExecutor {
         }
         if (!Array.isArray(channel)) {
             Object.keys(channel).forEach(key => {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 const config = channel[key];
                 if (config.to !== undefined) {
                     if (typeof config.to === 'function') {
-                        props[key] = config.to((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+                        props[key] = config.to((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {});
                     }
                     else {
                         props[key] = config.to;
@@ -1761,7 +1815,7 @@ class AnimateExecutor {
                         from = {};
                     }
                     if (typeof config.from === 'function') {
-                        from[key] = config.from((_b = graphic.context) === null || _b === void 0 ? void 0 : _b.data, graphic, {});
+                        from[key] = config.from((_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, {});
                     }
                     else {
                         from[key] = config.from;
@@ -1784,12 +1838,12 @@ class AnimateExecutor {
         };
     }
     resolveValue(value, graphic, defaultValue) {
-        var _a;
+        var _a, _b;
         if (value === undefined) {
             return defaultValue;
         }
         if (typeof value === 'function' && graphic) {
-            return value((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+            return value((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {});
         }
         return value;
     }
@@ -2087,6 +2141,12 @@ class AnimateExtension {
     getFinalAttribute() {
         return this.finalAttribute;
     }
+    getGraphicAttribute(key, prev = false) {
+        if (!prev && this.finalAttribute) {
+            return this.finalAttribute[key];
+        }
+        return this.attribute[key];
+    }
 }
 
 function registerAnimate() {
@@ -2792,16 +2852,16 @@ class CommonIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
+        var _a, _b, _c;
         super.onBind();
         const attrs = this.target.getFinalAttribute();
         const fromAttrs = (_a = this.target.attribute) !== null && _a !== void 0 ? _a : {};
         const to = {};
-        const from = {};
+        const from = (_b = this.from) !== null && _b !== void 0 ? _b : {};
         this.keys.forEach(key => {
-            var _a, _b;
+            var _a, _b, _c;
             to[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
-            from[key] = (_b = fromAttrs[key]) !== null && _b !== void 0 ? _b : 0;
+            from[key] = (_c = (_b = from[key]) !== null && _b !== void 0 ? _b : fromAttrs[key]) !== null && _c !== void 0 ? _c : 0;
         });
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
@@ -2811,10 +2871,9 @@ class CommonIn extends ACustomAnimate {
         this.propKeys = this.keys;
         this.from = from;
         this.to = to;
-        this.target.setAttributes(from);
-    }
-    onEnd(cb) {
-        super.onEnd(cb);
+        if (((_c = this.params.controlOptions) === null || _c === void 0 ? void 0 : _c.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
     onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -2864,6 +2923,7 @@ class GroupFadeIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.keys = ['baseOpacity'];
+        this.from = { baseOpacity: 0 };
     }
 }
 class GroupFadeOut extends CommonOut {
@@ -2922,6 +2982,7 @@ class ClipIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.keys = ['clipRange'];
+        this.from = { clipRange: 0 };
     }
 }
 class ClipOut extends CommonOut {
@@ -2935,6 +2996,7 @@ class FadeIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.keys = ['opacity'];
+        this.from = { opacity: 0 };
     }
 }
 class FadeOut extends CommonOut {
@@ -3546,6 +3608,7 @@ class GworPointsBase extends ACustomAnimate {
 }
 class GrowPointsIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsIn(this.target, this.params.options, this.params);
@@ -3557,7 +3620,9 @@ class GrowPointsIn extends GworPointsBase {
             if (finalAttribute) {
                 Object.assign(this.target.attribute, finalAttribute);
             }
-            this.target.setAttributes(from);
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
+            }
         }
         else {
             this.valid = false;
@@ -3584,12 +3649,10 @@ const changePointsX = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     const points = attrs.points;
     return points.map((point) => {
-        var _a;
         if (options && options.orient === 'negative') {
-            let groupRight = animationParameters.width;
-            if (animationParameters.group) {
-                groupRight = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
-                animationParameters.groupWidth = groupRight;
+            let groupRight = graphic.stage.viewWidth;
+            if (graphic.parent.parent.parent) {
+                groupRight = graphic.parent.parent.parent.AABBBounds.width();
             }
             return Object.assign(Object.assign({}, point), { x: groupRight, y: point.y, x1: groupRight, y1: point.y1, defined: point.defined !== false });
         }
@@ -3599,7 +3662,7 @@ const changePointsX = (graphic, options, animationParameters) => {
 const growPointsXIn = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
-        from: { points: changePointsX(graphic, options, animationParameters) },
+        from: { points: changePointsX(graphic, options) },
         to: { points: attrs.points }
     };
 };
@@ -3607,11 +3670,12 @@ const growPointsXOut = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
         from: { points: attrs.points },
-        to: { points: changePointsX(graphic, options, animationParameters) }
+        to: { points: changePointsX(graphic, options) }
     };
 };
 class GrowPointsXIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
@@ -3623,7 +3687,9 @@ class GrowPointsXIn extends GworPointsBase {
             if (finalAttribute) {
                 Object.assign(this.target.attribute, finalAttribute);
             }
-            this.target.setAttributes(from);
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
+            }
         }
         else {
             this.valid = false;
@@ -3650,12 +3716,10 @@ const changePointsY = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     const points = attrs.points;
     return points.map((point) => {
-        var _a;
         if (options && options.orient === 'negative') {
-            let groupBottom = animationParameters.height;
-            if (animationParameters.group) {
-                groupBottom = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
-                animationParameters.groupHeight = groupBottom;
+            let groupBottom = graphic.stage.viewHeight;
+            if (graphic.parent.parent.parent) {
+                groupBottom = graphic.parent.parent.parent.AABBBounds.height();
             }
             return Object.assign(Object.assign({}, point), { x: point.x, y: groupBottom, x1: point.x1, y1: groupBottom, defined: point.defined !== false });
         }
@@ -3665,7 +3729,7 @@ const changePointsY = (graphic, options, animationParameters) => {
 const growPointsYIn = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
-        from: { points: changePointsY(graphic, options, animationParameters) },
+        from: { points: changePointsY(graphic, options) },
         to: { points: attrs.points }
     };
 };
@@ -3673,11 +3737,12 @@ const growPointsYOut = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
         from: { points: attrs.points },
-        to: { points: changePointsY(graphic, options, animationParameters) }
+        to: { points: changePointsY(graphic, options) }
     };
 };
 class GrowPointsYIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
@@ -3689,7 +3754,9 @@ class GrowPointsYIn extends GworPointsBase {
             if (finalAttribute) {
                 Object.assign(this.target.attribute, finalAttribute);
             }
-            this.target.setAttributes(from);
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
+            }
         }
         else {
             this.valid = false;
@@ -4959,7 +5026,7 @@ class ScaleIn extends ACustomAnimate {
         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;
         super.onBind();
         let from;
         let to;
@@ -4992,7 +5059,9 @@ class ScaleIn extends ACustomAnimate {
         this.props = to;
         this.from = from;
         this.to = to;
-        this.target.setAttributes(from);
+        if (((_l = this.params.controlOptions) === null || _l === void 0 ? void 0 : _l.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
     onEnd(cb) {
         super.onEnd(cb);
@@ -5551,20 +5620,14 @@ const moveIn = (graphic, options, animationParameters) => {
     let changedX = 0;
     let changedY = 0;
     if (orient === 'negative') {
-        if (animationParameters.group) {
-            changedX = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
-            changedY = (_b = animationParameters.groupHeight) !== null && _b !== void 0 ? _b : animationParameters.group.getBounds().height();
-            animationParameters.groupWidth = changedX;
-            animationParameters.groupHeight = changedY;
-        }
-        else {
-            changedX = animationParameters.width;
-            changedY = animationParameters.height;
-        }
+        changedX = graphic.stage.viewWidth;
+        changedY = graphic.stage.viewHeight;
     }
     changedX += offset;
     changedY += offset;
-    const point = isFunction(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt;
+    const point = isFunction(pointOpt)
+        ? pointOpt.call(null, (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, animationParameters)
+        : pointOpt;
     const fromX = point && isValidNumber(point.x) ? point.x : changedX;
     const fromY = point && isValidNumber(point.y) ? point.y : changedY;
     const finalAttrs = graphic.getFinalAttribute();
@@ -5595,12 +5658,13 @@ const moveIn = (graphic, options, animationParameters) => {
 const moveOut = (graphic, options, animationParameters) => {
     var _a, _b;
     const { offset = 0, orient, direction, point: pointOpt } = options !== null && options !== void 0 ? options : {};
-    const groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null;
-    const groupWidth = (_a = groupBounds === null || groupBounds === void 0 ? void 0 : groupBounds.width()) !== null && _a !== void 0 ? _a : animationParameters.width;
-    const groupHeight = (_b = groupBounds === null || groupBounds === void 0 ? void 0 : groupBounds.height()) !== null && _b !== void 0 ? _b : animationParameters.height;
+    const groupWidth = graphic.stage.viewWidth;
+    const groupHeight = graphic.stage.viewHeight;
     const changedX = (orient === 'negative' ? groupWidth : 0) + offset;
     const changedY = (orient === 'negative' ? groupHeight : 0) + offset;
-    const point = isFunction(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt;
+    const point = isFunction(pointOpt)
+        ? pointOpt.call(null, (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, animationParameters)
+        : pointOpt;
     const fromX = point && isValidNumber(point.x) ? point.x : changedX;
     const fromY = point && isValidNumber(point.y) ? point.y : changedY;
     switch (direction) {
@@ -5640,6 +5704,7 @@ class MoveBase extends ACustomAnimate {
 }
 class MoveIn extends MoveBase {
     onBind() {
+        var _a;
         super.onBind();
         const { from, to } = moveIn(this.target, this.params.options, this.params);
         this.props = to;
@@ -5650,7 +5715,9 @@ class MoveIn extends MoveBase {
         if (finalAttribute) {
             Object.assign(this.target.attribute, finalAttribute);
         }
-        this.target.setAttributes(from);
+        if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
 }
 class MoveOut extends MoveBase {
@@ -5723,6 +5790,7 @@ class RotateBase extends ACustomAnimate {
 }
 class RotateIn extends RotateBase {
     onBind() {
+        var _a;
         super.onBind();
         const { from, to } = rotateIn(this.target, this.params.options);
         this.props = to;
@@ -5733,7 +5801,9 @@ class RotateIn extends RotateBase {
         if (finalAttribute) {
             Object.assign(this.target.attribute, finalAttribute);
         }
-        this.target.setAttributes(from);
+        if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
 }
 class RotateOut extends RotateBase {
@@ -5786,6 +5856,7 @@ class FromTo extends ACustomAnimate {
         this.from = from !== null && from !== void 0 ? from : {};
     }
     onBind() {
+        var _a, _b;
         super.onBind();
         const finalAttribute = this.target.getFinalAttribute();
         Object.keys(this.from).forEach(key => {
@@ -5793,6 +5864,14 @@ class FromTo extends ACustomAnimate {
                 this.props[key] = finalAttribute[key];
             }
         });
+        if (((_a = this.target.context) === null || _a === void 0 ? void 0 : _a.animationState) === 'appear') {
+            if (finalAttribute) {
+                Object.assign(this.target.attribute, finalAttribute);
+            }
+        }
+        if (((_b = this.params.controlOptions) === null || _b === void 0 ? void 0 : _b.immediatelyApply) !== false) {
+            this.target.setAttributes(this.from);
+        }
     }
     onFirstRun() {
         var _a;

package/es/animate-extension.d.ts

@@ -18,4 +18,5 @@ export declare class AnimateExtension {
     executeAnimation(config: IAnimationConfig): this;
     executeAnimations(configs: IAnimationConfig[]): this;
     protected getFinalAttribute(): Record<string, any>;
+    getGraphicAttribute(key: string, prev?: boolean): any;
 }

package/es/animate-extension.js

@@ -49,4 +49,7 @@ export class AnimateExtension {
     getFinalAttribute() {
         return this.finalAttribute;
     }
+    getGraphicAttribute(key, prev = !1) {
+        return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
+    }
 }