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

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();
     }
@@ -560,32 +567,52 @@ class WaitStep extends Step {
 
 class DefaultTimeline {
     get animateCount() {
-        return this.animates.length;
+        return this._animateCount;
     }
     constructor() {
-        this.animates = [];
+        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._endAnimatePtr = -1;
         this.id = Generator.GenAutoIncrementId();
-        this.animates = [];
         this.paused = false;
     }
     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;
+        let index = 0;
+        while (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;
+        const newNode = {
+            animate,
+            next: null,
+            prev: null
+        };
+        if (!this.head) {
+            this.head = newNode;
+            this.tail = newNode;
+        }
+        else {
+            if (this.tail) {
+                this.tail.next = newNode;
+                newNode.prev = this.tail;
+                this.tail = newNode;
+            }
+        }
+        this.animateMap.set(animate, newNode);
+        this._animateCount++;
         this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
     }
     pause() {
@@ -602,7 +629,7 @@ class DefaultTimeline {
         this._currentTime += scaledDelta;
         this.forEachAccessAnimate((animate, i) => {
             if (animate.status === AnimateStatus.END) {
-                this.removeAnimate(animate, true, i);
+                this.removeAnimate(animate, true);
             }
             else if (animate.status === AnimateStatus.RUNNING || animate.status === AnimateStatus.INITIAL) {
                 animate.advance(scaledDelta);
@@ -613,25 +640,43 @@ class DefaultTimeline {
         this.forEachAccessAnimate(animate => {
             animate.release();
         });
-        this.animates = [];
+        this.head = null;
+        this.tail = null;
+        this.animateMap.clear();
+        this._animateCount = 0;
         this._totalDuration = 0;
     }
-    removeAnimate(animate, release = true, index) {
-        if (this._endAnimatePtr < 0) {
+    removeAnimate(animate, release = true) {
+        const node = this.animateMap.get(animate);
+        if (!node) {
             return;
         }
         if (release) {
             animate._onRemove && animate._onRemove.forEach(cb => cb());
             animate.release();
         }
-        index = index !== null && index !== void 0 ? index : this.animates.indexOf(animate);
-        this.animates[index] = this.animates[this._endAnimatePtr];
-        this._endAnimatePtr--;
+        if (node.prev) {
+            node.prev.next = node.next;
+        }
+        else {
+            this.head = node.next;
+        }
+        if (node.next) {
+            node.next.prev = node.prev;
+        }
+        else {
+            this.tail = node.prev;
+        }
+        this.animateMap.delete(animate);
+        this._animateCount--;
+        if (animate.getStartTime() + animate.getDuration() >= this._totalDuration) {
+            this.recalculateTotalDuration();
+        }
         return;
     }
     recalculateTotalDuration() {
         this._totalDuration = 0;
-        this.animates.forEach(animate => {
+        this.forEachAccessAnimate(animate => {
             this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
         });
     }
@@ -957,7 +1002,7 @@ class Animate {
         return this;
     }
     advance(delta) {
-        var _a;
+        var _a, _b, _c;
         if (this.status === AnimateStatus.END) {
             console.warn('aaa 动画已经结束，不能推进');
             return;
@@ -968,7 +1013,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 +1060,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 +1071,7 @@ class Animate {
         targetStep.update(isEnd, ratio, {});
         if (isEnd) {
             targetStep.onEnd();
+            this.lastRunStep = null;
         }
     }
     updateDuration() {
@@ -1064,13 +1115,6 @@ class DefaultTicker extends EventEmitter {
         super();
         this.timelines = [];
         this.frameTimeHistory = [];
-        this.checkSkip = (delta) => {
-            if (this.stage.params.optimize.tickRenderMode === 'performance') {
-                return false;
-            }
-            const skip = delta < this.interval + (Math.random() - 0.5) * 2 * this._jitter;
-            return skip;
-        };
         this.handleTick = (handler, params) => {
             const { once = false } = params !== null && params !== void 0 ? params : {};
             if (this.ifCanStop()) {
@@ -1113,6 +1157,9 @@ class DefaultTicker extends EventEmitter {
         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(this.interval * 0.2, 6), this.interval * 0.7);
@@ -1238,19 +1285,25 @@ class DefaultTicker extends EventEmitter {
         this.tickerHandler = null;
         this.lastFrameTime = -1;
     }
+    checkSkip(delta) {
+        if (this.stage.params.optimize.tickRenderMode === 'performance') {
+            return false;
+        }
+        const skip = delta < this.interval + (Math.random() - 0.5) * 2 * this._jitter;
+        return skip;
+    }
 }
 
 class ManualTickHandler {
     constructor() {
         this.released = false;
-        this.startTime = -1;
         this.currentTime = -1;
     }
     tick(interval, cb) {
-        if (this.startTime < 0) {
-            this.startTime = 0;
+        if (this.currentTime < 0) {
+            this.currentTime = 0;
         }
-        this.currentTime = this.startTime + interval;
+        this.currentTime += interval;
         cb(this);
     }
     release() {
@@ -1259,8 +1312,20 @@ class ManualTickHandler {
     getTime() {
         return this.currentTime;
     }
+    tickTo(time, cb) {
+        if (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 = STATUS.RUNNING;
+    }
     setupTickHandler() {
         const handler = new ManualTickHandler();
         if (this.tickerHandler) {
@@ -1269,9 +1334,33 @@ class ManualTicker extends DefaultTicker {
         this.tickerHandler = handler;
         return true;
     }
+    checkSkip(delta) {
+        return false;
+    }
     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 +1545,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 +1561,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 +1574,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 +1645,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 +1693,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 +1711,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 +1731,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 +1739,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 +1791,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 +1809,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 +1842,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 +1857,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 +1880,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 +2183,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 +2894,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 +2913,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 +2965,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 +3024,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 +3038,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 +3650,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 +3662,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 +3691,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 +3704,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 +3712,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 +3729,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 +3758,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 +3771,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 +3779,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 +3796,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;
@@ -4273,10 +4382,10 @@ class InputRichText extends ACustomAnimate {
         this.showCursor = false;
         this.cursorChar = '|';
         this.blinkCursor = true;
-        this.beforeText = '';
-        this.afterText = '';
         this.fadeInChars = false;
         this.fadeInDuration = 0.3;
+        this.strokeFirst = false;
+        this.strokeToFillRatio = 0.3;
         if ((params === null || params === void 0 ? void 0 : params.showCursor) !== undefined) {
             this.showCursor = params.showCursor;
         }
@@ -4286,18 +4395,18 @@ class InputRichText extends ACustomAnimate {
         if ((params === null || params === void 0 ? void 0 : params.blinkCursor) !== undefined) {
             this.blinkCursor = params.blinkCursor;
         }
-        if ((params === null || params === void 0 ? void 0 : params.beforeText) !== undefined) {
-            this.beforeText = params.beforeText;
-        }
-        if ((params === null || params === void 0 ? void 0 : params.afterText) !== undefined) {
-            this.afterText = params.afterText;
-        }
         if ((params === null || params === void 0 ? void 0 : params.fadeInChars) !== undefined) {
             this.fadeInChars = params.fadeInChars;
         }
         if ((params === null || params === void 0 ? void 0 : params.fadeInDuration) !== undefined) {
             this.fadeInDuration = params.fadeInDuration;
         }
+        if ((params === null || params === void 0 ? void 0 : params.strokeFirst) !== undefined) {
+            this.strokeFirst = params.strokeFirst;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.strokeToFillRatio) !== undefined) {
+            this.strokeToFillRatio = params.strokeToFillRatio;
+        }
     }
     onFirstRun() {
         const fromProps = this.getLastProps();
@@ -4346,11 +4455,30 @@ class InputRichText extends ACustomAnimate {
         }
         else {
             currentTextConfig = this.toTextConfig.slice(0, currentLength).map((item, index) => {
-                if (this.fadeInChars && 'text' in item) {
-                    const appearTime = (index / totalItems) * maxTextShowRatio;
-                    const fadeProgress = (ratio - appearTime) / this.fadeInDuration;
-                    const 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;
+                        const itemLifetime = Math.max(0, ratio - appearTime);
+                        const maxLifetime = 1 - appearTime;
+                        const fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));
+                        if ('fill' in newItem && newItem.fill) {
+                            newItem.stroke = newItem.fill;
+                            if (fillProgress < 1) {
+                                newItem.fillOpacity = fillProgress;
+                            }
+                        }
+                        if (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 appearTime = (index / totalItems) * maxTextShowRatio;
+                        const fadeProgress = (ratio - appearTime) / this.fadeInDuration;
+                        newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
+                    }
+                    return newItem;
                 }
                 return item;
             });
@@ -4959,7 +5087,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 +5120,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);
@@ -5228,6 +5358,155 @@ class SpinIn extends ACustomAnimate {
         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;
+        super.onBind();
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.target.type === 'rect') {
+            const attr = this.target.attribute;
+            const width = (_a = attr.width) !== null && _a !== void 0 ? _a : 100;
+            const height = (_b = attr.height) !== null && _b !== void 0 ? _b : 100;
+            this.perimeter = 2 * (width + height);
+        }
+        else if (this.target.type === 'circle') {
+            const attr = this.target.attribute;
+            const radius = (_c = attr.radius) !== null && _c !== void 0 ? _c : 50;
+            this.perimeter = 2 * Math.PI * radius;
+        }
+        else if (this.target.type === 'ellipse') {
+            const attr = this.target.attribute;
+            const radiusX = (_d = attr.radiusX) !== null && _d !== void 0 ? _d : 50;
+            const radiusY = (_e = attr.radiusY) !== null && _e !== void 0 ? _e : 50;
+            this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        }
+        else {
+            this.perimeter = 1000;
+        }
+        const lineWidth = (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.lineWidth) !== null && _g !== void 0 ? _g : 2;
+        const strokeColor = (_j = (_h = this.params) === null || _h === void 0 ? void 0 : _h.strokeColor) !== null && _j !== void 0 ? _j : 'black';
+        const fromOpacity = (_l = (_k = this.params) === null || _k === void 0 ? void 0 : _k.fromOpacity) !== null && _l !== void 0 ? _l : 1;
+        const dashLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.dashLength) !== null && _o !== void 0 ? _o : this.perimeter;
+        const showFill = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.showFill) !== null && _q !== void 0 ? _q : false;
+        const fillOpacity = (_s = (_r = this.params) === null || _r === void 0 ? void 0 : _r.fillOpacity) !== null && _s !== void 0 ? _s : 0;
+        this.from = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: dashLength,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        this.to = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: 0,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        if (showFill) {
+            this.from.fillOpacity = fillOpacity;
+            this.to.fillOpacity = (_t = this.originalAttributes.fillOpacity) !== null && _t !== void 0 ? _t : 1;
+        }
+        else {
+            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;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.showFill) {
+            attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio;
+        }
+    }
+    onEnd() {
+        var _a;
+        super.onEnd();
+        if (!((_a = this.params) === null || _a === void 0 ? 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;
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.target.type === 'rect') {
+            const attr = this.target.attribute;
+            const width = (_a = attr.width) !== null && _a !== void 0 ? _a : 100;
+            const height = (_b = attr.height) !== null && _b !== void 0 ? _b : 100;
+            this.perimeter = 2 * (width + height);
+        }
+        else if (this.target.type === 'circle') {
+            const attr = this.target.attribute;
+            const radius = (_c = attr.radius) !== null && _c !== void 0 ? _c : 50;
+            this.perimeter = 2 * Math.PI * radius;
+        }
+        else if (this.target.type === 'ellipse') {
+            const attr = this.target.attribute;
+            const radiusX = (_d = attr.radiusX) !== null && _d !== void 0 ? _d : 50;
+            const radiusY = (_e = attr.radiusY) !== null && _e !== void 0 ? _e : 50;
+            this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        }
+        else {
+            this.perimeter = 1000;
+        }
+        const lineWidth = (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.lineWidth) !== null && _g !== void 0 ? _g : 2;
+        const strokeColor = (_j = (_h = this.params) === null || _h === void 0 ? void 0 : _h.strokeColor) !== null && _j !== void 0 ? _j : 'black';
+        const fromOpacity = (_l = (_k = this.params) === null || _k === void 0 ? void 0 : _k.fromOpacity) !== null && _l !== void 0 ? _l : 1;
+        const dashLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.dashLength) !== null && _o !== void 0 ? _o : this.perimeter;
+        const showFill = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.showFill) !== null && _q !== void 0 ? _q : false;
+        this.from = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: 0,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        this.to = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: -dashLength,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        if (showFill) {
+            this.from.fillOpacity = (_r = this.originalAttributes.fillOpacity) !== null && _r !== void 0 ? _r : 1;
+            this.to.fillOpacity = 0;
+        }
+        else {
+            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;
+        if ((_a = this.params) === null || _a === void 0 ? 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;
@@ -5506,6 +5785,121 @@ class MoveRotateOut extends ACustomAnimate {
     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 = 0.3;
+        this.pulseScale = 1.05;
+        this.pulseColor = null;
+        this.pulseColorIntensity = 0.2;
+        this.strokeOnly = false;
+        this.fillOnly = false;
+        this.useScale = true;
+        this.useOpacity = true;
+        this.useStroke = true;
+        this.useFill = true;
+        this.useColor = false;
+        this.originalFill = null;
+        this.originalStroke = null;
+        if ((params === null || params === void 0 ? void 0 : params.pulseCount) !== undefined) {
+            this.pulseCount = params.pulseCount;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseScale) !== undefined) {
+            this.pulseScale = params.pulseScale;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseColor) !== undefined) {
+            this.pulseColor = params.pulseColor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseColorIntensity) !== undefined) {
+            this.pulseColorIntensity = params.pulseColorIntensity;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.strokeOnly) !== undefined) {
+            this.strokeOnly = params.strokeOnly;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.fillOnly) !== undefined) {
+            this.fillOnly = params.fillOnly;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useScale) !== undefined) {
+            this.useScale = params.useScale;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useOpacity) !== undefined) {
+            this.useOpacity = params.useOpacity;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useStroke) !== undefined) {
+            this.useStroke = params.useStroke;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useFill) !== undefined) {
+            this.useFill = params.useFill;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useColor) !== undefined) {
+            this.useColor = params.useColor;
+        }
+    }
+    onBind() {
+        super.onBind();
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.useColor) {
+            this.originalFill = this.originalAttributes.fill || null;
+            this.originalStroke = this.originalAttributes.stroke || null;
+            if (!this.pulseColor) {
+                if (this.fillOnly && this.originalFill) {
+                    this.pulseColor = this.originalFill;
+                }
+                else if (this.strokeOnly && this.originalStroke) {
+                    this.pulseColor = this.originalStroke;
+                }
+                else if (this.originalFill) {
+                    this.pulseColor = this.originalFill;
+                }
+                else if (this.originalStroke) {
+                    this.pulseColor = this.originalStroke;
+                }
+                else {
+                    this.pulseColor = '#FFFFFF';
+                }
+            }
+        }
+    }
+    onUpdate(end, ratio, out) {
+        const angle = ratio * Math.PI * this.pulseCount;
+        const pulseValue = Math.abs(Math.sin(angle));
+        const attribute = this.target.attribute;
+        if (this.useOpacity) {
+            const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
+            if (this.useStroke) {
+                attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity;
+            }
+            if (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;
+        }
+        if (this.useColor && this.pulseColor) {
+            this.applyColorPulse(attribute, pulseValue);
+        }
+        this.target.addUpdateShapeAndBoundsTag();
+        this.target.addUpdatePositionTag();
+    }
+    applyColorPulse(attribute, pulseValue) {
+        const colorRatio = this.pulseColorIntensity * pulseValue;
+        if (this.useFill && this.originalFill && this.pulseColor) {
+            attribute.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, true);
+        }
+        if (this.useStroke && this.originalStroke && this.pulseColor) {
+            attribute.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, true);
+        }
+    }
+    onEnd() {
+        super.onEnd();
+        this.target.setAttributes(this.originalAttributes);
+    }
+}
 
 class Update extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
@@ -5551,20 +5945,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 +5983,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 +6029,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 +6040,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 +6115,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 +6126,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 +6181,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 +6189,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;
@@ -6114,13 +6518,16 @@ const registerCustomAnimate = () => {
     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);
 };
 
-export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, OutputRichText, PoptipAppear, PoptipDisappear, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, OutputRichText, PoptipAppear, PoptipDisappear, PulseAnimate, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, StrokeIn, StrokeOut, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };