@visactor/vrender-animate 0.23.0-alpha.3 → 1.0.0-alpha.2

package/dist/index.es.js

@@ -1,26 +1,5 @@
-import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, ColorStore, ColorType, Generator, AnimateStatus as AnimateStatus$1, PerformanceRAF, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil } from '@visactor/vutils';
-
-var AnimateMode;
-(function (AnimateMode) {
-    AnimateMode[AnimateMode["NORMAL"] = 0] = "NORMAL";
-    AnimateMode[AnimateMode["SET_ATTR_IMMEDIATELY"] = 1] = "SET_ATTR_IMMEDIATELY";
-})(AnimateMode || (AnimateMode = {}));
-
-var AnimateStepType;
-(function (AnimateStepType) {
-    AnimateStepType["wait"] = "wait";
-    AnimateStepType["from"] = "from";
-    AnimateStepType["to"] = "to";
-    AnimateStepType["customAnimate"] = "customAnimate";
-})(AnimateStepType || (AnimateStepType = {}));
-var AnimateStatus;
-(function (AnimateStatus) {
-    AnimateStatus[AnimateStatus["INITIAL"] = 0] = "INITIAL";
-    AnimateStatus[AnimateStatus["RUNNING"] = 1] = "RUNNING";
-    AnimateStatus[AnimateStatus["PAUSED"] = 2] = "PAUSED";
-    AnimateStatus[AnimateStatus["END"] = 3] = "END";
-})(AnimateStatus || (AnimateStatus = {}));
+import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText } from '@visactor/vrender-core';
+import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose } from '@visactor/vutils';
 
 class Easing {
     constructor() {
@@ -231,6 +210,9 @@ class InterpolateUpdateStore {
         this.opacity = (key, from, to, ratio, step, target) => {
             target.attribute.opacity = interpolateNumber(from, to, ratio);
         };
+        this.baseOpacity = (key, from, to, ratio, step, target) => {
+            target.attribute.baseOpacity = interpolateNumber(from, to, ratio);
+        };
         this.fillOpacity = (key, from, to, ratio, step, target) => {
             target.attribute.fillOpacity = interpolateNumber(from, to, ratio);
         };
@@ -367,6 +349,9 @@ class Step {
     constructor(type, props, duration, easing) {
         this._startTime = 0;
         this._hasFirstRun = false;
+        this._syncAttributeUpdate = () => {
+            this.target.setAttributes(this.target.attribute);
+        };
         this.type = type;
         this.props = props;
         this.duration = duration;
@@ -379,11 +364,14 @@ class Step {
         if (type === 'wait') {
             this.onUpdate = noop;
         }
+        this.id = Generator.GenAutoIncrementId();
+        this.syncAttributeUpdate = noop;
     }
     bind(target, animate) {
         this.target = target;
         this.animate = animate;
         this.onBind();
+        this.syncAttributeUpdate();
     }
     append(step) {
         this.next = step;
@@ -463,6 +451,9 @@ class Step {
         return this._startTime;
     }
     onBind() {
+        if (this.target.type === 'glyph') {
+            this.syncAttributeUpdate = this._syncAttributeUpdate;
+        }
     }
     onFirstRun() {
     }
@@ -530,6 +521,7 @@ class Step {
                 func(key, fromValue, toValue, easedRatio, this, this.target);
             });
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
     onUpdate(end, ratio, out) {
     }
@@ -609,10 +601,10 @@ class DefaultTimeline {
         const scaledDelta = delta * this._playSpeed;
         this._currentTime += scaledDelta;
         this.forEachAccessAnimate((animate, i) => {
-            if (animate.status === AnimateStatus$1.END) {
+            if (animate.status === AnimateStatus.END) {
                 this.removeAnimate(animate, true, i);
             }
-            else if (animate.status === AnimateStatus$1.RUNNING || animate.status === AnimateStatus$1.INITIAL) {
+            else if (animate.status === AnimateStatus.RUNNING || animate.status === AnimateStatus.INITIAL) {
                 animate.advance(scaledDelta);
             }
         });
@@ -1047,13 +1039,6 @@ class Animate {
     }
 }
 
-var STATUS;
-(function (STATUS) {
-    STATUS[STATUS["INITIAL"] = 0] = "INITIAL";
-    STATUS[STATUS["RUNNING"] = 1] = "RUNNING";
-    STATUS[STATUS["PAUSE"] = 2] = "PAUSE";
-})(STATUS || (STATUS = {}));
-
 const performanceRAF = new PerformanceRAF();
 class RAFTickHandler {
     constructor() {
@@ -1080,6 +1065,9 @@ class DefaultTicker extends EventEmitter {
         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;
         };
@@ -1469,7 +1457,7 @@ class AnimateExecutor {
         });
     }
     parseParams(params, isTimeline) {
-        var _a;
+        var _a, _b;
         const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
         const startTime = this.resolveValue(params.startTime, undefined, 0);
         const parsedParams = Object.assign({}, params);
@@ -1506,8 +1494,8 @@ class AnimateExecutor {
                         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;
-                            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[effect.type];
+                            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 });
@@ -1531,7 +1519,7 @@ class AnimateExecutor {
             parsedParams.oneByOne = oneByOneTime;
             parsedParams.oneByOneDelay = oneByOneDelay;
             parsedParams.custom =
-                (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[params.type];
+                (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = params.type) !== null && _b !== void 0 ? _b : 'fromTo'];
             const customType = parsedParams.custom && isFunction(parsedParams.custom)
                 ? /^class\s/.test(Function.prototype.toString.call(parsedParams.custom))
                     ? 1
@@ -1552,8 +1540,16 @@ class AnimateExecutor {
         return parsedParams;
     }
     execute(params) {
+        if (Array.isArray(params)) {
+            params.forEach(param => this._execute(param));
+        }
+        else {
+            this._execute(params);
+        }
+    }
+    _execute(params) {
         if (params.selfOnly) {
-            return this.executeItem(params, this._target, 0, 1);
+            return this._executeItem(params, this._target, 0, 1);
         }
         const isTimeline = 'timeSlices' in params;
         let filteredChildren;
@@ -1596,29 +1592,41 @@ class AnimateExecutor {
         return;
     }
     executeTypeConfigItem(params, graphic, index, count) {
-        var _a, _b, _c, _d, _e;
-        const { type, channel, customParameters, easing = 'linear', delay = 0, delayAfter = 0, duration = 300, startTime = 0, oneByOneDelay = 0, loop, bounce, priority = 0, options, custom, customType, controlOptions } = params;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { type = 'fromTo', channel, customParameters, easing = 'linear', delay = 0, delayAfter = 0, duration = 300, startTime = 0, oneByOneDelay = 0, loop, bounce, priority = 0, options, custom, customType, controlOptions } = params;
         const animate = graphic.animate();
         animate.priority = priority;
-        const delayValue = delay;
-        const datum = (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0];
-        const indexKey = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.indexKey;
+        const delayValue = isFunction(delay) ? delay((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {}) : delay;
+        const datum = (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0];
+        const indexKey = (_e = graphic.context) === null || _e === void 0 ? void 0 : _e.indexKey;
         if (datum && indexKey) {
-            index = (_d = datum[indexKey]) !== null && _d !== void 0 ? _d : index;
+            index = (_f = datum[indexKey]) !== null && _f !== void 0 ? _f : index;
         }
-        animate.startAt(startTime);
+        animate.startAt(startTime + delayValue);
         const wait = index * oneByOneDelay;
         wait > 0 && animate.wait(wait);
-        if (delayValue > 0) {
-            animate.wait(delayValue);
+        let parsedFromProps = null;
+        let props = params.to;
+        let from = params.from;
+        if (!props) {
+            if (!parsedFromProps) {
+                parsedFromProps = this.createPropsFromChannel(channel, graphic);
+            }
+            props = parsedFromProps.props;
+        }
+        if (!from) {
+            if (!parsedFromProps) {
+                parsedFromProps = this.createPropsFromChannel(channel, graphic);
+            }
+            from = parsedFromProps.from;
         }
-        const props = (_e = params.to) !== null && _e !== void 0 ? _e : this.createPropsFromChannel(channel, graphic);
-        this._handleRunAnimate(animate, custom, customType, props, duration, easing, customParameters, options, type, graphic);
+        this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
         if (oneByOneDelay) {
             animate.wait(oneByOneDelay * (count - index - 1));
         }
-        if (delayAfter > 0) {
-            animate.wait(delayAfter);
+        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);
         }
         if (loop && loop > 0) {
             animate.loop(loop);
@@ -1628,15 +1636,16 @@ class AnimateExecutor {
         }
         return animate;
     }
-    _handleRunAnimate(animate, custom, customType, props, duration, easing, customParameters, options, type, graphic) {
+    _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic) {
+        var _a, _b, _c, _d;
         if (custom && customType) {
             const customParams = this.resolveValue(customParameters, graphic, {});
             const objOptions = isFunction(options)
-                ? options.call(null, customParameters.data && customParameters.data[0], graphic, customParameters)
+                ? options.call(null, (_b = (customParameters && ((_a = customParameters.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, customParameters)
                 : options;
             customParams.options = objOptions;
             if (customType === 1) {
-                this.createCustomAnimation(animate, custom, props, duration, easing, customParams);
+                this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams);
             }
             else if (customType === 2) {
                 this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
@@ -1677,18 +1686,35 @@ class AnimateExecutor {
         return animate;
     }
     applyTimeSliceToAnimate(slice, animate, graphic) {
+        var _a, _b, _c, _d;
         const { effects, duration = 300, delay = 0, delayAfter = 0 } = slice;
-        const delayValue = delay;
-        const delayAfterValue = delayAfter;
+        const delayValue = isFunction(delay) ? delay((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {}) : delay;
+        const delayAfterValue = isFunction(delayAfter) ? delayAfter((_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, {}) : delayAfter;
         if (delayValue > 0) {
             animate.wait(delayValue);
         }
         const effectsArray = Array.isArray(effects) ? effects : [effects];
         effectsArray.forEach(effect => {
-            var _a;
-            const { type = 'to', channel, customParameters, easing = 'linear', options } = effect;
-            const props = (_a = effect.to) !== null && _a !== void 0 ? _a : this.createPropsFromChannel(channel, graphic);
-            this._handleRunAnimate(animate, effect.custom, effect.customType, props, duration, easing, customParameters, options, type, graphic);
+            var _a, _b;
+            const { type = 'fromTo', channel, customParameters, easing = 'linear', options } = effect;
+            let parsedFromProps = null;
+            let props = effect.to;
+            let from = effect.from;
+            if (!props) {
+                if (!parsedFromProps) {
+                    parsedFromProps = this.createPropsFromChannel(channel, graphic);
+                }
+                props = parsedFromProps.props;
+            }
+            if (!from) {
+                if (!parsedFromProps) {
+                    parsedFromProps = this.createPropsFromChannel(channel, graphic);
+                }
+                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);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -1704,19 +1730,23 @@ class AnimateExecutor {
         };
         animate.to(props, duration, easing);
     }
-    createCustomAnimation(animate, CustomAnimateConstructor, props, duration, easing, customParams) {
+    createCustomAnimation(animate, CustomAnimateConstructor, from, props, duration, easing, customParams) {
         const to = props;
-        const customAnimate = new CustomAnimateConstructor(null, to, duration, easing, customParams);
+        const customAnimate = new CustomAnimateConstructor(from, to, duration, easing, customParams);
         animate.play(customAnimate);
     }
     createPropsFromChannel(channel, graphic) {
         const props = {};
+        let from = null;
         if (!channel) {
-            return props;
+            return {
+                from,
+                props
+            };
         }
         if (!Array.isArray(channel)) {
             Object.entries(channel).forEach(([key, config]) => {
-                var _a;
+                var _a, _b;
                 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, {});
@@ -1725,9 +1755,32 @@ class AnimateExecutor {
                         props[key] = config.to;
                     }
                 }
+                if (config.from !== undefined) {
+                    if (!from) {
+                        from = {};
+                    }
+                    if (typeof config.from === 'function') {
+                        from[key] = config.from((_b = graphic.context) === null || _b === void 0 ? void 0 : _b.data, graphic, {});
+                    }
+                    else {
+                        from[key] = config.from;
+                    }
+                }
+            });
+        }
+        else {
+            channel.forEach(key => {
+                var _a, _b;
+                const value = (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.diffAttrs) === null || _b === void 0 ? void 0 : _b[key];
+                if (value !== undefined) {
+                    props[key] = value;
+                }
             });
         }
-        return props;
+        return {
+            from,
+            props
+        };
     }
     resolveValue(value, graphic, defaultValue) {
         var _a;
@@ -1740,6 +1793,12 @@ class AnimateExecutor {
         return value;
     }
     executeItem(params, graphic, index = 0, count = 1) {
+        if (Array.isArray(params)) {
+            return params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean);
+        }
+        return [this._executeItem(params, graphic, index, count)].filter(Boolean);
+    }
+    _executeItem(params, graphic, index = 0, count = 1) {
         if (!graphic) {
             return null;
         }
@@ -1813,7 +1872,9 @@ class AnimationStateManager {
             nextState.forEach((state, index) => {
                 shouldApplyState.push({
                     state,
-                    animationConfig: animationConfig[index].animation,
+                    animationConfig: isArray(animationConfig[index])
+                        ? animationConfig[index].map(item => item.animation)
+                        : animationConfig[index].animation,
                     executor: new AnimateExecutor(this.graphic)
                 });
             });
@@ -1831,7 +1892,9 @@ class AnimationStateManager {
                 if (result.allowTransition) {
                     shouldApplyState.push({
                         state,
-                        animationConfig: animationConfig[index].animation,
+                        animationConfig: isArray(animationConfig[index])
+                            ? animationConfig[index].map(item => item.animation)
+                            : animationConfig[index].animation,
                         executor: new AnimateExecutor(this.graphic)
                     });
                     this.stateList.forEach(currState => {
@@ -1961,15 +2024,6 @@ class GraphicStateExtension {
 }
 
 class AnimateExtension {
-    setAttributesAndPreventAnimate(attributes) {
-        this.setAttributes(attributes);
-        this.animates &&
-            this.animates.forEach(animate => {
-                Object.keys(attributes).forEach(key => {
-                    animate.preventAttr(key);
-                });
-            });
-    }
     getAttributes(final = false) {
         if (final && this.finalAttribute) {
             return this.finalAttribute;
@@ -2053,6 +2107,7 @@ class ACustomAnimate extends Step {
         }
         const easedRatio = this.easing(ratio);
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
     setProps(props) {
         this.props = props;
@@ -2061,14 +2116,107 @@ class ACustomAnimate extends Step {
     }
 }
 class AComponentAnimate extends ACustomAnimate {
-    onFirstRun() {
+    completeBind(animator) {
+        this.setStartTime(0);
         this._animator && this._animator.start();
+        this.setDuration(animator.getDuration());
     }
     stop() {
         this._animator && this._animator.stop();
     }
 }
 
+class ComponentAnimator {
+    constructor(component) {
+        this.tasks = [];
+        this.started = false;
+        this.completed = 0;
+        this.totalDuration = 0;
+        this.onStartCallbacks = [];
+        this.onEndCallbacks = [];
+        this.onUpdateCallbacks = [];
+        this.component = component;
+    }
+    animate(graphic, config) {
+        if (this.started) {
+            console.warn('Cannot add animations after animation has started');
+            return this;
+        }
+        this.tasks.push({
+            graphic,
+            config
+        });
+        return this;
+    }
+    onStart(callback) {
+        this.onStartCallbacks.push(callback);
+        return this;
+    }
+    onEnd(callback) {
+        this.onEndCallbacks.push(callback);
+        return this;
+    }
+    onUpdate(callback) {
+        this.onUpdateCallbacks.push(callback);
+        return this;
+    }
+    start() {
+        if (this.started) {
+            console.warn('Animation has already started');
+            return this;
+        }
+        this.started = true;
+        this.completed = 0;
+        this.onStartCallbacks.forEach(callback => callback());
+        if (this.tasks.length === 0) {
+            setTimeout(() => {
+                this.onEndCallbacks.forEach(callback => callback());
+            }, 0);
+            return this;
+        }
+        this.tasks.forEach(task => {
+            const executor = new AnimateExecutor(task.graphic);
+            executor.onEnd(() => {
+                this.completed++;
+                if (this.completed === this.tasks.length) {
+                    this.onEndCallbacks.forEach(callback => callback());
+                }
+            });
+            const animate = executor.executeItem(task.config, task.graphic);
+            task.animate = animate;
+            animate.forEach(animate => {
+                this.totalDuration = Math.max(this.totalDuration, animate.getStartTime() + animate.getDuration());
+            });
+        });
+        return this;
+    }
+    deleteSelfAttr(key) {
+        this.tasks.forEach(task => {
+            if (task.animate) {
+                task.animate.forEach(animate => animate.preventAttr(key));
+            }
+        });
+    }
+    stop(type) {
+        this.tasks.forEach(task => {
+            if (task.animate) {
+                task.animate.forEach(animate => animate.stop(type));
+            }
+        });
+        if (this.started && this.completed !== this.tasks.length) {
+            this.onEndCallbacks.forEach(callback => callback());
+            this.completed = this.tasks.length;
+        }
+        return this;
+    }
+    getDuration() {
+        return this.totalDuration;
+    }
+}
+function createComponentAnimator(component) {
+    return new ComponentAnimator(component);
+}
+
 class IncreaseCount extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
@@ -2341,6 +2489,7 @@ class ClipGraphicAnimate extends ACustomAnimate {
         this._clipGraphic = params === null || params === void 0 ? void 0 : params.clipGraphic;
     }
     onBind() {
+        super.onBind();
         if (this._group && this._clipGraphic) {
             this._lastClip = this._group.attribute.clip;
             this._lastPath = this._group.attribute.path;
@@ -2509,6 +2658,12 @@ class TagPointsUpdate extends ACustomAnimate {
         return [];
     }
     onBind() {
+        super.onBind();
+        const { points, segments } = this.target.attribute;
+        const { points: pointsTo, segments: segmentsTo } = this.target.getFinalAttribute();
+        this.from = { points, segments };
+        this.to = { points: pointsTo, segments: segmentsTo };
+        this.props = this.to;
         const originFromPoints = this.getPoints(this.from);
         const originToPoints = this.getPoints(this.to, true);
         this.fromPoints = !originFromPoints ? [] : !Array.isArray(originFromPoints) ? [originFromPoints] : originFromPoints;
@@ -2611,77 +2766,109 @@ class TagPointsUpdate extends ACustomAnimate {
                 }
                 return;
             }
-            out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+            this.target.setAttributes({ clipRange: this.clipRange + (1 - this.clipRange) * ratio });
         }
         if (this.segmentsCache && this.to.segments) {
             let start = 0;
-            out.segments = this.to.segments.map((segment, index) => {
+            const segments = this.to.segments.map((segment, index) => {
                 const end = start + this.segmentsCache[index];
                 const points = this.points.slice(start, end);
                 start = end;
                 return Object.assign(Object.assign({}, segment), { points });
             });
+            this.target.attribute.points = segments;
         }
         else {
-            out.points = this.points;
+            this.target.attribute.points = this.points;
         }
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 
-class GroupFadeIn extends ACustomAnimate {
-    getEndProps() {
-        return {};
+class CommonIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
     }
     onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
+        var _a;
+        super.onBind();
+        const attrs = this.target.getFinalAttribute();
+        const fromAttrs = (_a = this.target.attribute) !== null && _a !== void 0 ? _a : {};
+        const to = {};
+        const from = {};
+        this.keys.forEach(key => {
+            var _a, _b;
+            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;
         });
-        return;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (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() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
-        });
-        return;
+    onEnd(cb) {
+        super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: ratio
-            }
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
-class GroupFadeOut extends ACustomAnimate {
-    getEndProps() {
-        return {};
+class CommonOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
     }
     onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
+        super.onBind();
+        const attrs = this.target.attribute;
+        const to = {};
+        const from = {};
+        this.keys.forEach(key => {
+            var _a;
+            to[key] = 0;
+            from[key] = (_a = attrs[key]) !== null && _a !== void 0 ? _a : 1;
         });
-        return;
+        this.props = to;
+        this.propKeys = this.keys;
+        this.from = from;
+        this.to = to;
+        Object.assign(this.target.attribute, from);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
     }
-    onEnd() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
-        });
-        return;
+    onEnd(cb) {
+        super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: 1 - ratio
-            }
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+
+class GroupFadeIn extends CommonIn {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['baseOpacity'];
+    }
+}
+class GroupFadeOut extends CommonOut {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['baseOpacity'];
     }
 }
 
@@ -2700,6 +2887,7 @@ class RotateBySphereAnimate extends ACustomAnimate {
         this.phi = phi;
     }
     onBind() {
+        super.onBind();
         return;
     }
     onEnd() {
@@ -2729,99 +2917,29 @@ class RotateBySphereAnimate extends ACustomAnimate {
     }
 }
 
-class CommonIn extends ACustomAnimate {
+class ClipIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
+        this.keys = ['clipRange'];
     }
-    onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            this.target.setAttributes(this.params.diffAttrs);
-        }
-        const attrs = this.target.getAttributes(true);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : {};
-        const to = {};
-        const from = {};
-        this.keys.forEach(key => {
-            var _a, _b;
-            to[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
-            from[key] = (_b = fromAttrs === null || fromAttrs === void 0 ? void 0 : fromAttrs[key]) !== null && _b !== void 0 ? _b : 0;
-        });
-        this.props = to;
-        this.propKeys = this.keys;
-        this.animate.reSyncProps();
-        this.from = from;
-        this.to = to;
-        this.target.setAttributes(from);
-    }
-    onEnd(cb) {
-        super.onEnd(cb);
+}
+class ClipOut extends CommonOut {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['clipRange'];
     }
-    onUpdate(end, ratio, out) {
-        const attribute = this.target.attribute;
-        this.propKeys.forEach(key => {
-            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-        });
-        this.target.addUpdatePositionTag();
-        this.target.addUpdateShapeAndBoundsTag();
+}
+
+class FadeIn extends CommonIn {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.keys = ['opacity'];
     }
 }
-class CommonOut extends ACustomAnimate {
+class FadeOut extends CommonOut {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
-    }
-    onBind() {
-        const attrs = this.target.getFinalAttribute();
-        const to = {};
-        const from = {};
-        this.keys.forEach(key => {
-            var _a;
-            to[key] = 0;
-            from[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
-        });
-        this.props = to;
-        this.propKeys = this.keys;
-        this.animate.reSyncProps();
-        this.from = from;
-        this.to = to;
-        this.target.setAttributes(from);
-    }
-    onEnd(cb) {
-        super.onEnd(cb);
-    }
-    onUpdate(end, ratio, out) {
-        const attribute = this.target.attribute;
-        this.propKeys.forEach(key => {
-            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-        });
-        this.target.addUpdatePositionTag();
-        this.target.addUpdateShapeAndBoundsTag();
-    }
-}
-
-class ClipIn extends CommonIn {
-    constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params);
-        this.keys = ['clipRange'];
-    }
-}
-class ClipOut extends CommonOut {
-    constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params);
-        this.keys = ['clipRange'];
-    }
-}
-
-class FadeIn extends CommonIn {
-    constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params);
-        this.keys = ['opacity'];
-    }
-}
-class FadeOut extends CommonOut {
-    constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params);
-        this.keys = ['opacity'];
+        this.keys = ['opacity'];
     }
 }
 
@@ -2872,7 +2990,7 @@ const growAngleIn = (graphic, options, animationParameters) => {
         : growAngleInIndividual(graphic, options);
 };
 const growAngleOutIndividual = (graphic, options, animationParameters) => {
-    const attrs = graphic.getFinalAttribute();
+    const attrs = graphic.attribute;
     if (options && options.orient === 'anticlockwise') {
         return {
             from: { startAngle: attrs.startAngle },
@@ -2885,7 +3003,7 @@ const growAngleOutIndividual = (graphic, options, animationParameters) => {
     };
 };
 const growAngleOutOverall = (graphic, options, animationParameters) => {
-    const attrs = graphic.getFinalAttribute();
+    const attrs = graphic.attribute;
     if (options && options.orient === 'anticlockwise') {
         const overallValue = isNumber(options.overall) ? options.overall : Math.PI * 2;
         return {
@@ -2938,6 +3056,26 @@ class GrowAngleBase extends ACustomAnimate {
             this.valid = false;
         }
     }
+    deleteSelfAttr(key) {
+        delete this.props[key];
+        this.fromProps && delete this.fromProps[key];
+        const index = this.propKeys.indexOf(key);
+        if (index !== -1) {
+            this.propKeys.splice(index, 1);
+        }
+        if (this.propKeys && this.propKeys.length > 1) {
+            this._updateFunction = this.updateAngle;
+        }
+        else if (this.propKeys[0] === 'startAngle') {
+            this._updateFunction = this.updateStartAngle;
+        }
+        else if (this.propKeys[0] === 'endAngle') {
+            this._updateFunction = this.updateEndAngle;
+        }
+        else {
+            this._updateFunction = null;
+        }
+    }
     updateStartAngle(ratio) {
         this.target.attribute.startAngle =
             this.from.startAngle + (this.to.startAngle - this.from.startAngle) * ratio;
@@ -2950,41 +3088,39 @@ class GrowAngleBase extends ACustomAnimate {
         this.updateEndAngle(ratio);
     }
     onUpdate(end, ratio, out) {
-        this._updateFunction(ratio);
-        this.target.addUpdateShapeAndBoundsTag();
+        if (this._updateFunction) {
+            this._updateFunction(ratio);
+            this.target.addUpdateShapeAndBoundsTag();
+        }
     }
 }
 class GrowAngleIn extends GrowAngleBase {
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            Object.assign(this.target.attribute, this.params.diffAttrs);
-        }
+        var _a, _b;
+        super.onBind();
         const { from, to } = growAngleIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
+        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
         this.from = fromAttrs;
         this.to = to;
-        Object.assign(this.target.attribute, fromAttrs);
-        this.target.addUpdatePositionTag();
-        this.target.addUpdateBoundTag();
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
+        this.target.setAttributes(fromAttrs);
         this.determineUpdateFunction();
     }
 }
 class GrowAngleOut extends GrowAngleBase {
     onBind() {
-        var _a, _b;
+        super.onBind();
         const { from, to } = growAngleOut(this.target, this.params.options, this.params);
-        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
+        const fromAttrs = from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
-        this.from = fromAttrs;
+        this.from = fromAttrs !== null && fromAttrs !== void 0 ? fromAttrs : this.target.attribute;
         this.to = to;
-        Object.assign(this.target.attribute, fromAttrs);
-        this.target.addUpdatePositionTag();
-        this.target.addUpdateBoundTag();
         this.determineUpdateFunction();
     }
 }
@@ -3067,7 +3203,7 @@ const growCenterIn = (graphic, options, animationParameters) => {
     }
 };
 const growCenterOut = (graphic, options, animationParameters) => {
-    const attrs = graphic.getFinalAttribute();
+    const attrs = graphic.attribute;
     switch (options === null || options === void 0 ? void 0 : options.direction) {
         case 'x': {
             const x = attrs.x;
@@ -3145,17 +3281,18 @@ class GrowCenterIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            this.target.setAttributes(this.params.diffAttrs);
-        }
+        var _a, _b;
+        super.onBind();
         const { from, to } = growCenterIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
+        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
         this.from = fromAttrs;
         this.to = to;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
         this.target.setAttributes(fromAttrs);
     }
     onEnd(cb) {
@@ -3175,12 +3312,11 @@ class GrowCenterOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        const attrs = this.target.getFinalAttribute();
+        super.onBind();
         const { from, to } = growCenterOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
-        this.from = from || attrs;
+        this.from = from !== null && from !== void 0 ? from : this.target.attribute;
         this.to = to;
     }
     onEnd(cb) {
@@ -3252,19 +3388,19 @@ class GrowHeightIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            Object.assign(this.target.attribute, this.params.diffAttrs);
-        }
+        var _a, _b;
+        super.onBind();
         const { from, to } = growHeightIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
+        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
         this.from = fromAttrs;
         this.to = to;
-        Object.assign(this.target.attribute, fromAttrs);
-        this.target.addUpdatePositionTag();
-        this.target.addUpdateBoundTag();
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
+        this.target.setAttributes(fromAttrs);
     }
     onEnd(cb) {
         super.onEnd(cb);
@@ -3330,12 +3466,11 @@ class GrowHeightOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        const attrs = this.target.getFinalAttribute();
+        super.onBind();
         const { from, to } = growHeightOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
-        this.from = from || attrs;
+        this.from = from !== null && from !== void 0 ? from : this.target.attribute;
         this.to = to;
     }
     onEnd(cb) {
@@ -3389,7 +3524,7 @@ const growPointsOut = (graphic, options, animationParameters) => {
         to: { points: getCenterPoints(graphic, options) }
     };
 };
-let GworPointsBase$1 = class GworPointsBase extends ACustomAnimate {
+class GworPointsBase extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
@@ -3407,33 +3542,35 @@ let GworPointsBase$1 = class GworPointsBase extends ACustomAnimate {
         this.target.addUpdatePositionTag();
         this.target.addUpdateShapeAndBoundsTag();
     }
-};
-class GrowPointsIn extends GworPointsBase$1 {
+}
+class GrowPointsIn extends GworPointsBase {
     onBind() {
-        var _a, _b;
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
-            this.from = fromAttrs;
+            this.from = from;
             this.to = to;
-            this.target.setAttributes(fromAttrs);
+            const finalAttribute = this.target.getFinalAttribute();
+            if (finalAttribute) {
+                Object.assign(this.target.attribute, finalAttribute);
+            }
+            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
         }
     }
 }
-class GrowPointsOut extends GworPointsBase$1 {
+class GrowPointsOut extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line'].includes(this.target.type)) {
             const attrs = this.target.getFinalAttribute();
             const { from, to } = growPointsOut(this.target, this.params.options, this.params);
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
             this.from = from || attrs;
             this.to = to;
         }
@@ -3472,32 +3609,34 @@ const growPointsXOut = (graphic, options, animationParameters) => {
         to: { points: changePointsX(graphic, options, animationParameters) }
     };
 };
-class GrowPointsXIn extends GworPointsBase$1 {
+class GrowPointsXIn extends GworPointsBase {
     onBind() {
-        var _a, _b;
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
-            this.from = fromAttrs;
+            this.from = from;
             this.to = to;
-            this.target.setAttributes(fromAttrs);
+            const finalAttribute = this.target.getFinalAttribute();
+            if (finalAttribute) {
+                Object.assign(this.target.attribute, finalAttribute);
+            }
+            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
         }
     }
 }
-class GrowPointsXOut extends GworPointsBase$1 {
+class GrowPointsXOut extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line'].includes(this.target.type)) {
             const attrs = this.target.getFinalAttribute();
             const { from, to } = growPointsXOut(this.target, this.params.options, this.params);
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
             this.from = from || attrs;
             this.to = to;
         }
@@ -3536,36 +3675,34 @@ const growPointsYOut = (graphic, options, animationParameters) => {
         to: { points: changePointsY(graphic, options, animationParameters) }
     };
 };
-class GrowPointsYIn extends GworPointsBase$1 {
+class GrowPointsYIn extends GworPointsBase {
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            this.target.setAttributes(this.params.diffAttrs);
-        }
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
-            this.from = fromAttrs;
+            this.from = from;
             this.to = to;
-            this.target.setAttributes(fromAttrs);
+            const finalAttribute = this.target.getFinalAttribute();
+            if (finalAttribute) {
+                Object.assign(this.target.attribute, finalAttribute);
+            }
+            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
         }
     }
 }
-class GrowPointsYOut extends GworPointsBase$1 {
+class GrowPointsYOut extends GworPointsBase {
     onBind() {
-        if (['area', 'line'].includes(this.target.type)) {
-            const attrs = this.target.getFinalAttribute();
+        super.onBind();
+        if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYOut(this.target, this.params.options, this.params);
             this.props = to;
             this.propKeys = Object.keys(to).filter(key => to[key] != null);
-            this.animate.reSyncProps();
-            this.from = from || attrs;
+            this.from = from !== null && from !== void 0 ? from : this.target.attribute;
             this.to = to;
         }
         else {
@@ -3640,7 +3777,7 @@ const growRadiusOut = (graphic, options, animationParameters) => {
         ? growRadiusOutOverall(graphic, options)
         : growRadiusOutIndividual(graphic, options);
 };
-class GworPointsBase extends ACustomAnimate {
+class GrowPointsBase extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
@@ -3653,33 +3790,31 @@ class GworPointsBase extends ACustomAnimate {
         this.target.addUpdateShapeAndBoundsTag();
     }
 }
-class GrowRadiusIn extends GworPointsBase {
+class GrowRadiusIn extends GrowPointsBase {
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            this.target.setAttributes(this.params.diffAttrs);
-        }
+        var _a, _b;
+        super.onBind();
         const { from, to } = growRadiusIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
+        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
         this.from = fromAttrs;
         this.to = to;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
         this.target.setAttributes(fromAttrs);
     }
 }
-class GrowRadiusOut extends GworPointsBase {
+class GrowRadiusOut extends GrowPointsBase {
     onBind() {
-        var _a, _b;
-        const { from, to } = growRadiusOut(this.target, this.params.options, this.params);
-        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
+        super.onBind();
+        const { to } = growRadiusOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
-        this.from = fromAttrs;
+        this.from = this.target.attribute;
         this.to = to;
-        this.target.setAttributes(fromAttrs);
     }
 }
 
@@ -3786,17 +3921,18 @@ class GrowWidthIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a, _b, _c;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            this.target.setAttributes(this.params.diffAttrs);
-        }
+        var _a, _b;
+        super.onBind();
         const { from, to } = growWidthIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : from;
+        const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
         this.from = fromAttrs;
         this.to = to;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
         this.target.setAttributes(fromAttrs);
     }
     onEnd(cb) {
@@ -3816,12 +3952,11 @@ class GrowWidthOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        const attrs = this.target.getFinalAttribute();
+        super.onBind();
         const { from, to } = growWidthOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
-        this.animate.reSyncProps();
-        this.from = from || attrs;
+        this.from = from !== null && from !== void 0 ? from : this.target.attribute;
         this.to = to;
     }
     onEnd(cb) {
@@ -3837,189 +3972,9 @@ class GrowWidthOut extends ACustomAnimate {
     }
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-class ComponentAnimator {
-    constructor(component) {
-        this.tasks = [];
-        this.started = false;
-        this.completed = 0;
-        this.totalDuration = 0;
-        this.onStartCallbacks = [];
-        this.onEndCallbacks = [];
-        this.onUpdateCallbacks = [];
-        this.component = component;
-    }
-    animate(graphic, config, delay = 0) {
-        if (this.started) {
-            console.warn('Cannot add animations after animation has started');
-            return this;
-        }
-        this.tasks.push({
-            graphic,
-            config,
-            delay
-        });
-        let configDuration = 300;
-        let configDelay = 0;
-        if ('duration' in config) {
-            const typeConfig = config;
-            configDuration = typeof typeConfig.duration === 'number' ? typeConfig.duration : 300;
-            configDelay = typeof typeConfig.delay === 'number' ? typeConfig.delay : 0;
-        }
-        else if ('timeSlices' in config) {
-            const timelineConfig = config;
-            const timeSlices = Array.isArray(timelineConfig.timeSlices)
-                ? timelineConfig.timeSlices
-                : [timelineConfig.timeSlices];
-            let totalTimeSliceDuration = 0;
-            timeSlices.forEach(slice => {
-                const sliceDuration = typeof slice.duration === 'number' ? slice.duration : 300;
-                const sliceDelay = typeof slice.delay === 'number' ? slice.delay : 0;
-                const sliceDelayAfter = typeof slice.delayAfter === 'number' ? slice.delayAfter : 0;
-                totalTimeSliceDuration += sliceDuration + sliceDelay + sliceDelayAfter;
-            });
-            configDuration = totalTimeSliceDuration;
-        }
-        const duration = configDuration + configDelay + delay;
-        if (duration > this.totalDuration) {
-            this.totalDuration = duration;
-        }
-        return this;
-    }
-    onStart(callback) {
-        this.onStartCallbacks.push(callback);
-        return this;
-    }
-    onEnd(callback) {
-        this.onEndCallbacks.push(callback);
-        return this;
-    }
-    onUpdate(callback) {
-        this.onUpdateCallbacks.push(callback);
-        return this;
-    }
-    start() {
-        if (this.started) {
-            console.warn('Animation has already started');
-            return this;
-        }
-        this.started = true;
-        this.completed = 0;
-        this.onStartCallbacks.forEach(callback => callback());
-        if (this.tasks.length === 0) {
-            setTimeout(() => {
-                this.onEndCallbacks.forEach(callback => callback());
-            }, 0);
-            return this;
-        }
-        this.tasks.forEach(task => {
-            const executor = new AnimateExecutor(task.graphic);
-            executor.onEnd(() => {
-                this.completed++;
-                if (this.completed === this.tasks.length) {
-                    this.onEndCallbacks.forEach(callback => callback());
-                }
-            });
-            if (task.delay > 0) {
-                setTimeout(() => {
-                    const animate = executor.executeItem(task.config, task.graphic);
-                    task.animate = animate;
-                }, task.delay);
-            }
-            else {
-                const animate = executor.executeItem(task.config, task.graphic);
-                task.animate = animate;
-            }
-        });
-        return this;
-    }
-    stop(jumpToEnd = true) {
-        this.tasks.forEach(task => {
-            if (task.animate) {
-                task.animate.stop(jumpToEnd ? 'end' : 'start');
-            }
-        });
-        if (this.started && this.completed !== this.tasks.length) {
-            this.onEndCallbacks.forEach(callback => callback());
-            this.completed = this.tasks.length;
-        }
-        return this;
-    }
-    getDuration() {
-        return this.totalDuration;
-    }
-}
-function createComponentAnimator(component) {
-    return new ComponentAnimator(component);
-}
-
-class LabelUpdate extends AComponentAnimate {
-    onBind() {
-        const animator = createComponentAnimator(this.target);
-        this._animator = animator;
-        const duration = this.duration;
-        const easing = this.easing;
-        const { prevText, curText, prevLabelLine, curLabelLine } = this.params;
-        const diff = {};
-        for (const key in curText.attribute) {
-            if (prevText.attribute[key] !== curText.attribute[key]) {
-                diff[key] = curText.attribute[key];
-            }
-        }
-        const rest = __rest(diff, ["text"]);
-        animator.animate(prevText, {
-            type: 'to',
-            to: rest,
-            duration,
-            easing
-        });
-        animator.animate(prevText, {
-            type: 'increaseCount',
-            to: {
-                text: curText.attribute.text
-            },
-            duration,
-            easing
-        });
-        if (prevLabelLine) {
-            animator.animate(prevLabelLine, {
-                type: 'to',
-                to: curLabelLine.attribute,
-                duration,
-                easing
-            });
-        }
-    }
-}
-
 class LabelItemAppear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4140,10 +4095,12 @@ class LabelItemAppear extends AComponentAnimate {
                 });
             });
         }
+        this.completeBind(animator);
     }
 }
 class LabelItemDisappear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4210,11 +4167,13 @@ class LabelItemDisappear extends AComponentAnimate {
                 easing
             });
         }
+        this.completeBind(animator);
     }
 }
 
 class PoptipAppear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4283,10 +4242,12 @@ class PoptipAppear extends AComponentAnimate {
                 ]
             });
         }
+        this.completeBind(animator);
     }
 }
 class PoptipDisappear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4298,104 +4259,1164 @@ class PoptipDisappear extends AComponentAnimate {
             duration,
             easing
         });
+        this.completeBind(animator);
     }
 }
 
-class ScaleIn extends ACustomAnimate {
+class InputRichText extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
-    }
-    onBind() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-            Object.assign(this.target.attribute, this.params.diffAttrs);
-        }
-        let from;
-        let to;
-        const attrs = this.target.getFinalAttribute();
-        const fromAttrs = (_c = (_b = this.target.context) === null || _b === void 0 ? void 0 : _b.lastAttrs) !== null && _c !== void 0 ? _c : {};
-        switch ((_d = this.params) === null || _d === void 0 ? void 0 : _d.direction) {
+        this.fromTextConfig = [];
+        this.toTextConfig = [];
+        this.originalTextConfig = [];
+        this.showCursor = false;
+        this.cursorChar = '|';
+        this.blinkCursor = true;
+        this.beforeText = '';
+        this.afterText = '';
+        this.fadeInChars = false;
+        this.fadeInDuration = 0.3;
+        if ((params === null || params === void 0 ? void 0 : params.showCursor) !== undefined) {
+            this.showCursor = params.showCursor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.cursorChar) !== undefined) {
+            this.cursorChar = params.cursorChar;
+        }
+        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;
+        }
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        this.originalTextConfig = toProps.textConfig ? [...toProps.textConfig] : [];
+        this.valid = true;
+        if (!this.originalTextConfig || this.originalTextConfig.length === 0) {
+            this.valid = false;
+            return;
+        }
+        this.fromTextConfig =
+            fromProps.textConfig && fromProps.textConfig.length > 0
+                ? RichText.TransformTextConfig2SingleCharacter(fromProps.textConfig)
+                : [];
+        this.toTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            this.target.setAttribute('textConfig', this.originalTextConfig);
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const totalItems = this.toTextConfig.length;
+        const fromItems = this.fromTextConfig.length;
+        const maxTextShowRatio = this.fadeInChars ? 1 - this.fadeInDuration : 1;
+        let currentLength;
+        if (fromItems > totalItems) {
+            currentLength = Math.round(fromItems - (fromItems - totalItems) * ratio);
+        }
+        else {
+            if (this.fadeInChars) {
+                const adjustedRatio = Math.min(1, ratio / maxTextShowRatio);
+                currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);
+            }
+            else {
+                currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);
+            }
+        }
+        let currentTextConfig;
+        if (fromItems > totalItems) {
+            currentTextConfig = this.fromTextConfig.slice(0, currentLength);
+        }
+        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 });
+                }
+                return item;
+            });
+        }
+        if (this.showCursor && currentLength < totalItems) {
+            let shouldShowCursor = true;
+            if (this.blinkCursor) {
+                const blinkRate = 0.1;
+                shouldShowCursor = Math.floor(ratio / blinkRate) % 2 === 0;
+            }
+            if (shouldShowCursor && currentTextConfig.length > 0) {
+                const lastIndex = currentTextConfig.length - 1;
+                const lastItem = currentTextConfig[lastIndex];
+                if ('text' in lastItem) {
+                    currentTextConfig[lastIndex] = Object.assign(Object.assign({}, lastItem), { text: String(lastItem.text) + this.cursorChar });
+                }
+                else {
+                    const cursorItem = {
+                        text: this.cursorChar,
+                        fontSize: 16
+                    };
+                    currentTextConfig.push(cursorItem);
+                }
+            }
+        }
+        this.target.setAttribute('textConfig', currentTextConfig);
+    }
+}
+
+class OutputRichText extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.fromTextConfig = [];
+        this.toTextConfig = [];
+        this.originalTextConfig = [];
+        this.showCursor = false;
+        this.cursorChar = '|';
+        this.blinkCursor = true;
+        this.beforeText = '';
+        this.afterText = '';
+        this.fadeOutChars = false;
+        this.fadeOutDuration = 0.3;
+        this.direction = 'backward';
+        if ((params === null || params === void 0 ? void 0 : params.showCursor) !== undefined) {
+            this.showCursor = params.showCursor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.cursorChar) !== undefined) {
+            this.cursorChar = params.cursorChar;
+        }
+        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.fadeOutChars) !== undefined) {
+            this.fadeOutChars = params.fadeOutChars;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.fadeOutDuration) !== undefined) {
+            this.fadeOutDuration = params.fadeOutDuration;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.direction) !== undefined) {
+            this.direction = params.direction;
+        }
+        this.propKeys = ['textConfig'];
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        this.originalTextConfig = fromProps.textConfig ? [...fromProps.textConfig] : [];
+        this.valid = true;
+        if (!this.originalTextConfig || this.originalTextConfig.length === 0) {
+            this.valid = false;
+            return;
+        }
+        this.fromTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);
+        this.toTextConfig =
+            toProps.textConfig && toProps.textConfig.length > 0
+                ? RichText.TransformTextConfig2SingleCharacter(toProps.textConfig)
+                : [];
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            if (this.toTextConfig.length > 0) {
+                this.target.setAttribute('textConfig', this.toTextConfig);
+            }
+            else {
+                this.target.setAttribute('textConfig', []);
+            }
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const fromItems = this.fromTextConfig.length;
+        const maxTextHideRatio = this.fadeOutChars ? 1 - this.fadeOutDuration : 1;
+        let displayedLength;
+        if (this.direction === 'forward') {
+            if (this.fadeOutChars) {
+                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
+                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
+            }
+            else {
+                displayedLength = Math.round(fromItems * (1 - ratio));
+            }
+            let currentTextConfig = this.direction === 'forward'
+                ? this.fromTextConfig.slice(fromItems - displayedLength)
+                : this.fromTextConfig.slice(0, displayedLength);
+            if (this.fadeOutChars) {
+                currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength);
+            }
+            if (this.showCursor && displayedLength > 0) {
+                currentTextConfig = this.addCursor(currentTextConfig, ratio);
+            }
+            this.target.setAttribute('textConfig', currentTextConfig);
+        }
+        else {
+            if (this.fadeOutChars) {
+                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
+                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
+            }
+            else {
+                displayedLength = Math.round(fromItems * (1 - ratio));
+            }
+            let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);
+            if (this.fadeOutChars) {
+                currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength);
+            }
+            if (this.showCursor && displayedLength > 0) {
+                currentTextConfig = this.addCursor(currentTextConfig, ratio);
+            }
+            this.target.setAttribute('textConfig', currentTextConfig);
+        }
+    }
+    applyFadeEffect(textConfig, ratio, totalItems, displayedLength) {
+        if (this.direction === 'forward') ;
+        const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration;
+        const fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));
+        return textConfig.map((item, index) => {
+            if (this.direction === 'forward') {
+                if (index === 0 && 'text' in item) {
+                    return Object.assign(Object.assign({}, item), { opacity: fadeOpacity });
+                }
+            }
+            else {
+                if (index === textConfig.length - 1 && 'text' in item) {
+                    return Object.assign(Object.assign({}, item), { opacity: fadeOpacity });
+                }
+            }
+            return item;
+        });
+    }
+    addCursor(textConfig, ratio) {
+        let shouldShowCursor = true;
+        if (this.blinkCursor) {
+            const blinkRate = 0.1;
+            shouldShowCursor = Math.floor(ratio / blinkRate) % 2 === 0;
+        }
+        if (shouldShowCursor && textConfig.length > 0) {
+            const cursorIndex = this.direction === 'forward' ? 0 : textConfig.length - 1;
+            const cursorItem = textConfig[cursorIndex];
+            if ('text' in cursorItem) {
+                const result = [...textConfig];
+                if (this.direction === 'forward') {
+                    result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), { text: this.cursorChar + String(cursorItem.text) });
+                }
+                else {
+                    result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), { text: String(cursorItem.text) + this.cursorChar });
+                }
+                return result;
+            }
+        }
+        return textConfig;
+    }
+}
+
+class SlideRichText extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.fromTextConfig = [];
+        this.toTextConfig = [];
+        this.originalTextConfig = [];
+        this.singleCharConfig = [];
+        this.fadeInDuration = 0.3;
+        this.slideDirection = 'right';
+        this.slideDistance = 30;
+        this.wordByWord = false;
+        this.wordRegex = /[a-zA-Z]+(-[a-zA-Z]+)*|[\u4e00-\u9fa5]+|[0-9]+|[^\s\w\u4e00-\u9fa5]/g;
+        this.wordGroups = [];
+        if ((params === null || params === void 0 ? void 0 : params.fadeInDuration) !== undefined) {
+            this.fadeInDuration = params.fadeInDuration;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.slideDirection) !== undefined) {
+            this.slideDirection = params.slideDirection;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.slideDistance) !== undefined) {
+            this.slideDistance = params.slideDistance;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.wordByWord) !== undefined) {
+            this.wordByWord = params.wordByWord;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.wordRegex) !== undefined) {
+            this.wordRegex = params.wordRegex;
+        }
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        this.originalTextConfig = toProps.textConfig ? [...toProps.textConfig] : [];
+        this.valid = true;
+        if (!this.originalTextConfig || this.originalTextConfig.length === 0) {
+            this.valid = false;
+            return;
+        }
+        this.fromTextConfig =
+            fromProps.textConfig && fromProps.textConfig.length > 0
+                ? RichText.TransformTextConfig2SingleCharacter(fromProps.textConfig)
+                : [];
+        this.toTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);
+        this.singleCharConfig = this.toTextConfig.map(item => {
+            if ('text' in item) {
+                return Object.assign(Object.assign({}, item), { opacity: 0, dx: this.getInitialDx(), dy: this.getInitialDy() });
+            }
+            return Object.assign(Object.assign({}, item), { opacity: 0 });
+        });
+        if (this.wordByWord) {
+            this.calculateWordGroups();
+        }
+    }
+    calculateWordGroups() {
+        this.wordGroups = [];
+        let fullText = '';
+        const charMap = {};
+        let fullTextIndex = 0;
+        this.toTextConfig.forEach((item, configIndex) => {
+            if ('text' in item) {
+                const text = String(item.text);
+                fullText += text;
+                charMap[fullTextIndex] = configIndex;
+                fullTextIndex++;
+            }
+        });
+        let match;
+        this.wordRegex.lastIndex = 0;
+        while ((match = this.wordRegex.exec(fullText)) !== null) {
+            const wordStart = match.index;
+            const wordEnd = match.index + match[0].length;
+            const wordIndices = [];
+            for (let i = wordStart; i < wordEnd; i++) {
+                if (charMap[i] !== undefined) {
+                    wordIndices.push(charMap[i]);
+                }
+            }
+            if (wordIndices.length > 0) {
+                this.wordGroups.push(wordIndices);
+            }
+        }
+        const allocatedIndices = new Set();
+        this.wordGroups.forEach(group => {
+            group.forEach(index => allocatedIndices.add(index));
+        });
+        for (let i = 0; i < this.toTextConfig.length; i++) {
+            if ('text' in this.toTextConfig[i] && !allocatedIndices.has(i)) {
+                this.wordGroups.push([i]);
+            }
+        }
+    }
+    getInitialDx() {
+        switch (this.slideDirection) {
+            case 'left':
+                return -this.slideDistance;
+            case 'right':
+                return this.slideDistance;
+            default:
+                return 0;
+        }
+    }
+    getInitialDy() {
+        switch (this.slideDirection) {
+            case 'up':
+                return -this.slideDistance;
+            case 'down':
+                return this.slideDistance;
+            default:
+                return 0;
+        }
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            this.target.setAttribute('textConfig', this.originalTextConfig);
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const maxTextShowRatio = 1 - this.fadeInDuration;
+        let updatedTextConfig;
+        if (this.wordByWord && this.wordGroups.length > 0) {
+            updatedTextConfig = this.updateByWord(ratio, maxTextShowRatio);
+        }
+        else {
+            updatedTextConfig = this.updateByCharacter(ratio, maxTextShowRatio);
+        }
+        this.target.setAttribute('textConfig', updatedTextConfig);
+    }
+    updateByWord(ratio, maxTextShowRatio) {
+        const totalGroups = this.wordGroups.length;
+        const updatedTextConfig = [...this.singleCharConfig];
+        for (let groupIndex = 0; groupIndex < this.wordGroups.length; groupIndex++) {
+            let appearTime;
+            if (this.slideDirection === 'left') {
+                appearTime = ((totalGroups - 1 - groupIndex) / totalGroups) * maxTextShowRatio;
+            }
+            else {
+                appearTime = (groupIndex / totalGroups) * maxTextShowRatio;
+            }
+            if (ratio < appearTime) {
+                for (const charIndex of this.wordGroups[groupIndex]) {
+                    const item = updatedTextConfig[charIndex];
+                    if ('text' in item) {
+                        updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), { opacity: 0, dx: this.getInitialDx(), dy: this.getInitialDy() });
+                    }
+                }
+                continue;
+            }
+            const animProgress = (ratio - appearTime) / this.fadeInDuration;
+            const progress = Math.max(0, Math.min(1, animProgress));
+            const dx = this.getInitialDx() * (1 - progress);
+            const dy = this.getInitialDy() * (1 - progress);
+            for (const charIndex of this.wordGroups[groupIndex]) {
+                const item = updatedTextConfig[charIndex];
+                if ('text' in item) {
+                    updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), { opacity: progress, dx,
+                        dy });
+                }
+            }
+        }
+        return updatedTextConfig;
+    }
+    updateByCharacter(ratio, maxTextShowRatio) {
+        const totalItems = this.toTextConfig.length;
+        const updatedTextConfig = [...this.singleCharConfig];
+        for (let index = 0; index < updatedTextConfig.length; index++) {
+            const item = updatedTextConfig[index];
+            if ('text' in item) {
+                let appearTime;
+                if (this.slideDirection === 'left') {
+                    appearTime = ((totalItems - 1 - index) / totalItems) * maxTextShowRatio;
+                }
+                else {
+                    appearTime = (index / totalItems) * maxTextShowRatio;
+                }
+                if (ratio < appearTime) {
+                    updatedTextConfig[index] = Object.assign(Object.assign({}, item), { opacity: 0, dx: this.getInitialDx(), dy: this.getInitialDy() });
+                    continue;
+                }
+                const animProgress = (ratio - appearTime) / this.fadeInDuration;
+                const progress = Math.max(0, Math.min(1, animProgress));
+                const dx = this.getInitialDx() * (1 - progress);
+                const dy = this.getInitialDy() * (1 - progress);
+                updatedTextConfig[index] = Object.assign(Object.assign({}, item), { opacity: progress, dx,
+                    dy });
+            }
+        }
+        return updatedTextConfig;
+    }
+}
+
+class SlideOutRichText extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.fromTextConfig = [];
+        this.toTextConfig = [];
+        this.originalTextConfig = [];
+        this.singleCharConfig = [];
+        this.fadeOutDuration = 0.3;
+        this.slideDirection = 'right';
+        this.slideDistance = 30;
+        this.wordByWord = false;
+        this.wordRegex = /[a-zA-Z]+(-[a-zA-Z]+)*|[\u4e00-\u9fa5]+|[0-9]+|[^\s\w\u4e00-\u9fa5]/g;
+        this.wordGroups = [];
+        this.reverseOrder = false;
+        if ((params === null || params === void 0 ? void 0 : params.fadeOutDuration) !== undefined) {
+            this.fadeOutDuration = params.fadeOutDuration;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.slideDirection) !== undefined) {
+            this.slideDirection = params.slideDirection;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.slideDistance) !== undefined) {
+            this.slideDistance = params.slideDistance;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.wordByWord) !== undefined) {
+            this.wordByWord = params.wordByWord;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.wordRegex) !== undefined) {
+            this.wordRegex = params.wordRegex;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.reverseOrder) !== undefined) {
+            this.reverseOrder = params.reverseOrder;
+        }
+        this.propKeys = ['textConfig'];
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps();
+        const toProps = this.getEndProps();
+        this.originalTextConfig = fromProps.textConfig ? [...fromProps.textConfig] : [];
+        this.valid = true;
+        if (!this.originalTextConfig || this.originalTextConfig.length === 0) {
+            this.valid = false;
+            return;
+        }
+        this.fromTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);
+        this.toTextConfig =
+            toProps.textConfig && toProps.textConfig.length > 0
+                ? RichText.TransformTextConfig2SingleCharacter(toProps.textConfig)
+                : [];
+        this.singleCharConfig = this.fromTextConfig.map(item => {
+            if ('text' in item) {
+                return Object.assign(Object.assign({}, item), { opacity: 1, dx: 0, dy: 0 });
+            }
+            return Object.assign(Object.assign({}, item), { opacity: 1 });
+        });
+        if (this.wordByWord) {
+            this.calculateWordGroups();
+        }
+    }
+    calculateWordGroups() {
+        this.wordGroups = [];
+        let fullText = '';
+        const charMap = {};
+        let fullTextIndex = 0;
+        this.fromTextConfig.forEach((item, configIndex) => {
+            if ('text' in item) {
+                const text = String(item.text);
+                fullText += text;
+                charMap[fullTextIndex] = configIndex;
+                fullTextIndex++;
+            }
+        });
+        let match;
+        this.wordRegex.lastIndex = 0;
+        while ((match = this.wordRegex.exec(fullText)) !== null) {
+            const wordStart = match.index;
+            const wordEnd = match.index + match[0].length;
+            const wordIndices = [];
+            for (let i = wordStart; i < wordEnd; i++) {
+                if (charMap[i] !== undefined) {
+                    wordIndices.push(charMap[i]);
+                }
+            }
+            if (wordIndices.length > 0) {
+                this.wordGroups.push(wordIndices);
+            }
+        }
+        const allocatedIndices = new Set();
+        this.wordGroups.forEach(group => {
+            group.forEach(index => allocatedIndices.add(index));
+        });
+        for (let i = 0; i < this.fromTextConfig.length; i++) {
+            if ('text' in this.fromTextConfig[i] && !allocatedIndices.has(i)) {
+                this.wordGroups.push([i]);
+            }
+        }
+    }
+    getTargetDx() {
+        switch (this.slideDirection) {
+            case 'left':
+                return -this.slideDistance;
+            case 'right':
+                return this.slideDistance;
+            default:
+                return 0;
+        }
+    }
+    getTargetDy() {
+        switch (this.slideDirection) {
+            case 'up':
+                return -this.slideDistance;
+            case 'down':
+                return this.slideDistance;
+            default:
+                return 0;
+        }
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+        if (!cb) {
+            if (this.toTextConfig.length > 0) {
+                this.target.setAttribute('textConfig', this.toTextConfig);
+            }
+            else {
+                this.target.setAttribute('textConfig', []);
+            }
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) {
+            return;
+        }
+        const maxTextShowRatio = 1 - this.fadeOutDuration;
+        let updatedTextConfig;
+        if (this.wordByWord && this.wordGroups.length > 0) {
+            updatedTextConfig = this.updateByWord(ratio, maxTextShowRatio);
+        }
+        else {
+            updatedTextConfig = this.updateByCharacter(ratio, maxTextShowRatio);
+        }
+        this.target.setAttribute('textConfig', updatedTextConfig);
+    }
+    updateByWord(ratio, maxTextShowRatio) {
+        const totalGroups = this.wordGroups.length;
+        const updatedTextConfig = [...this.singleCharConfig];
+        for (let groupIndex = 0; groupIndex < this.wordGroups.length; groupIndex++) {
+            let disappearTime;
+            if (this.reverseOrder) {
+                if (this.slideDirection === 'left') {
+                    disappearTime = (groupIndex / totalGroups) * maxTextShowRatio;
+                }
+                else {
+                    disappearTime = ((totalGroups - 1 - groupIndex) / totalGroups) * maxTextShowRatio;
+                }
+            }
+            else {
+                if (this.slideDirection === 'left') {
+                    disappearTime = ((totalGroups - 1 - groupIndex) / totalGroups) * maxTextShowRatio;
+                }
+                else {
+                    disappearTime = (groupIndex / totalGroups) * maxTextShowRatio;
+                }
+            }
+            if (ratio < disappearTime) {
+                for (const charIndex of this.wordGroups[groupIndex]) {
+                    const item = updatedTextConfig[charIndex];
+                    if ('text' in item) {
+                        updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), { opacity: 1, dx: 0, dy: 0 });
+                    }
+                }
+                continue;
+            }
+            const animProgress = (ratio - disappearTime) / this.fadeOutDuration;
+            const progress = Math.max(0, Math.min(1, animProgress));
+            const dx = this.getTargetDx() * progress;
+            const dy = this.getTargetDy() * progress;
+            const opacity = 1 - progress;
+            for (const charIndex of this.wordGroups[groupIndex]) {
+                const item = updatedTextConfig[charIndex];
+                if ('text' in item) {
+                    updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), { opacity,
+                        dx,
+                        dy });
+                }
+            }
+        }
+        return updatedTextConfig;
+    }
+    updateByCharacter(ratio, maxTextShowRatio) {
+        const totalItems = this.fromTextConfig.length;
+        const updatedTextConfig = [...this.singleCharConfig];
+        for (let index = 0; index < updatedTextConfig.length; index++) {
+            const item = updatedTextConfig[index];
+            if ('text' in item) {
+                let disappearTime;
+                if (this.reverseOrder) {
+                    if (this.slideDirection === 'left') {
+                        disappearTime = (index / totalItems) * maxTextShowRatio;
+                    }
+                    else {
+                        disappearTime = ((totalItems - 1 - index) / totalItems) * maxTextShowRatio;
+                    }
+                }
+                else {
+                    if (this.slideDirection === 'left') {
+                        disappearTime = ((totalItems - 1 - index) / totalItems) * maxTextShowRatio;
+                    }
+                    else {
+                        disappearTime = (index / totalItems) * maxTextShowRatio;
+                    }
+                }
+                if (ratio < disappearTime) {
+                    updatedTextConfig[index] = Object.assign(Object.assign({}, item), { opacity: 1, dx: 0, dy: 0 });
+                    continue;
+                }
+                const animProgress = (ratio - disappearTime) / this.fadeOutDuration;
+                const progress = Math.max(0, Math.min(1, animProgress));
+                const dx = this.getTargetDx() * progress;
+                const dy = this.getTargetDy() * progress;
+                const opacity = 1 - progress;
+                updatedTextConfig[index] = Object.assign(Object.assign({}, item), { opacity,
+                    dx,
+                    dy });
+            }
+        }
+        return updatedTextConfig;
+    }
+}
+
+class ScaleIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        super.onBind();
+        let from;
+        let to;
+        const attrs = this.target.getFinalAttribute();
+        const fromAttrs = (_a = this.target.attribute) !== null && _a !== void 0 ? _a : {};
+        switch ((_b = this.params) === null || _b === void 0 ? void 0 : _b.direction) {
             case 'x':
-                from = { scaleX: (_e = fromAttrs.scaleX) !== null && _e !== void 0 ? _e : 0 };
-                to = { scaleX: (_f = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _f !== void 0 ? _f : 1 };
-                this.propKeys = ['scaleX'];
+                from = { scaleX: (_c = fromAttrs.scaleX) !== null && _c !== void 0 ? _c : 0 };
+                to = { scaleX: (_d = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _d !== void 0 ? _d : 1 };
                 this._updateFunction = this.updateX;
                 break;
             case 'y':
-                from = { scaleY: (_g = fromAttrs.scaleY) !== null && _g !== void 0 ? _g : 0 };
-                to = { scaleY: (_h = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _h !== void 0 ? _h : 1 };
-                this.propKeys = ['scaleY'];
+                from = { scaleY: (_e = fromAttrs.scaleY) !== null && _e !== void 0 ? _e : 0 };
+                to = { scaleY: (_f = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _f !== void 0 ? _f : 1 };
                 this._updateFunction = this.updateY;
                 break;
             case 'xy':
             default:
-                from = { scaleX: (_j = fromAttrs.scaleX) !== null && _j !== void 0 ? _j : 0, scaleY: (_k = fromAttrs.scaleY) !== null && _k !== void 0 ? _k : 0 };
+                from = { scaleX: (_g = fromAttrs.scaleX) !== null && _g !== void 0 ? _g : 0, scaleY: (_h = fromAttrs.scaleY) !== null && _h !== void 0 ? _h : 0 };
                 to = {
-                    scaleX: (_l = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _l !== void 0 ? _l : 1,
-                    scaleY: (_m = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _m !== void 0 ? _m : 1
+                    scaleX: (_j = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _j !== void 0 ? _j : 1,
+                    scaleY: (_k = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _k !== void 0 ? _k : 1
                 };
-                this.propKeys = ['scaleX', 'scaleY'];
                 this._updateFunction = this.updateXY;
         }
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
         this.props = to;
         this.from = from;
         this.to = to;
-        Object.assign(this.target.attribute, from);
+        this.target.setAttributes(from);
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    updateX(ratio) {
+        this.target.attribute.scaleX = this.from.scaleX + (this.to.scaleX - this.from.scaleX) * ratio;
+    }
+    updateY(ratio) {
+        this.target.attribute.scaleY = this.from.scaleY + (this.to.scaleY - this.from.scaleY) * ratio;
+    }
+    updateXY(ratio) {
+        this.updateX(ratio);
+        this.updateY(ratio);
+    }
+    deleteSelfAttr(key) {
+        delete this.props[key];
+        this.fromProps && delete this.fromProps[key];
+        const index = this.propKeys.indexOf(key);
+        if (index !== -1) {
+            this.propKeys.splice(index, 1);
+        }
+        if (this.propKeys && this.propKeys.length > 1) {
+            this._updateFunction = this.updateXY;
+        }
+        else if (this.propKeys[0] === 'scaleX') {
+            this._updateFunction = this.updateX;
+        }
+        else if (this.propKeys[0] === 'scaleY') {
+            this._updateFunction = this.updateY;
+        }
+        else {
+            this._updateFunction = null;
+        }
+    }
+    onUpdate(end, ratio, out) {
+        if (this._updateFunction) {
+            this._updateFunction(ratio);
+            this.target.addUpdatePositionTag();
+        }
+    }
+}
+class ScaleOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e;
+        super.onBind();
+        let from;
+        let to;
+        const attrs = this.target.attribute;
+        switch ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) {
+            case 'x':
+                from = { scaleX: (_b = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _b !== void 0 ? _b : 1 };
+                to = { scaleX: 0 };
+                break;
+            case 'y':
+                from = { scaleY: (_c = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _c !== void 0 ? _c : 1 };
+                to = { scaleY: 0 };
+                break;
+            case 'xy':
+            default:
+                from = { scaleX: (_d = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _d !== void 0 ? _d : 1, scaleY: (_e = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _e !== void 0 ? _e : 1 };
+                to = {
+                    scaleX: 0,
+                    scaleY: 0
+                };
+        }
+        this.props = to;
+        this.from = from;
+        this.to = to;
+    }
+    onEnd(cb) {
+        super.onEnd(cb);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+    }
+}
+
+class State extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    update(end, ratio, out) {
+        this.onStart();
+        if (!this.props || !this.propKeys) {
+            return;
+        }
+        const easedRatio = this.easing(ratio);
+        this.animate.interpolateUpdateFunction
+            ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target)
+            : this.interpolateUpdateFunctions.forEach((func, index) => {
+                if (!this.animate.validAttr(this.propKeys[index])) {
+                    return;
+                }
+                const key = this.propKeys[index];
+                const fromValue = this.fromProps[key];
+                const toValue = this.props[key];
+                func(key, fromValue, toValue, easedRatio, this, this.target);
+            });
+        this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
+    }
+}
+
+class SlideIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        super.onBind();
+        const attrs = this.target.getFinalAttribute();
+        const direction = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) || 'right';
+        const distance = ((_b = this.params) === null || _b === void 0 ? void 0 : _b.distance) || 50;
+        const fromOpacity = (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromOpacity) !== null && _d !== void 0 ? _d : 0;
+        const from = { opacity: fromOpacity, baseOpacity: fromOpacity };
+        const to = { opacity: 1, baseOpacity: 1 };
+        if (direction === 'top') {
+            from.y = ((_e = attrs.y) !== null && _e !== void 0 ? _e : 0) - distance;
+            to.y = (_f = attrs.y) !== null && _f !== void 0 ? _f : 0;
+            this.propKeys = ['opacity', 'baseOpacity', 'y'];
+        }
+        else if (direction === 'bottom') {
+            from.y = ((_g = attrs.y) !== null && _g !== void 0 ? _g : 0) + distance;
+            to.y = (_h = attrs.y) !== null && _h !== void 0 ? _h : 0;
+            this.propKeys = ['opacity', 'baseOpacity', 'y'];
+        }
+        else if (direction === 'left') {
+            from.x = ((_j = attrs.x) !== null && _j !== void 0 ? _j : 0) - distance;
+            to.x = (_k = attrs.x) !== null && _k !== void 0 ? _k : 0;
+            this.propKeys = ['opacity', 'baseOpacity', 'x'];
+        }
+        else {
+            from.x = ((_l = attrs.x) !== null && _l !== void 0 ? _l : 0) + distance;
+            to.x = (_m = attrs.x) !== null && _m !== void 0 ? _m : 0;
+            this.propKeys = ['opacity', 'baseOpacity', 'x'];
+        }
+        this.from = from;
+        this.to = to;
+        this.props = to;
+        this.target.setAttributes(from);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class GrowIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        super.onBind();
+        const attrs = this.target.getFinalAttribute();
+        const fromScale = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromScale) !== null && _b !== void 0 ? _b : 0;
+        const direction = ((_c = this.params) === null || _c === void 0 ? void 0 : _c.direction) || 'xy';
+        const fromOpacity = (_e = (_d = this.params) === null || _d === void 0 ? void 0 : _d.fromOpacity) !== null && _e !== void 0 ? _e : 0;
+        const from = { opacity: fromOpacity, baseOpacity: fromOpacity };
+        const to = { opacity: 1, baseOpacity: 1 };
+        this.propKeys = ['opacity', 'baseOpacity'];
+        if (direction === 'x' || direction === 'xy') {
+            from.scaleX = fromScale;
+            to.scaleX = (_f = attrs.scaleX) !== null && _f !== void 0 ? _f : 1;
+            this.propKeys.push('scaleX');
+        }
+        if (direction === 'y' || direction === 'xy') {
+            from.scaleY = fromScale;
+            to.scaleY = (_g = attrs.scaleY) !== null && _g !== void 0 ? _g : 1;
+            this.propKeys.push('scaleY');
+        }
+        this.from = from;
+        this.to = to;
+        this.props = to;
+        this.target.setAttributes(from);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class SpinIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super.onBind();
+        const attrs = this.target.getFinalAttribute();
+        const fromAngle = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromAngle) !== null && _b !== void 0 ? _b : Math.PI * 2;
+        const fromScale = (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromScale) !== null && _d !== void 0 ? _d : 0;
+        const fromOpacity = (_f = (_e = this.params) === null || _e === void 0 ? void 0 : _e.fromOpacity) !== null && _f !== void 0 ? _f : 0;
+        const from = {
+            opacity: fromOpacity,
+            baseOpacity: fromOpacity,
+            angle: fromAngle,
+            scaleX: fromScale,
+            scaleY: fromScale
+        };
+        const to = {
+            opacity: 1,
+            baseOpacity: 1,
+            angle: (_g = attrs.angle) !== null && _g !== void 0 ? _g : 0,
+            scaleX: (_h = attrs.scaleX) !== null && _h !== void 0 ? _h : 1,
+            scaleY: (_j = attrs.scaleY) !== null && _j !== void 0 ? _j : 1
+        };
+        this.propKeys = ['opacity', 'baseOpacity', 'angle', 'scaleX', 'scaleY'];
+        this.from = from;
+        this.to = to;
+        this.props = to;
+        this.target.setAttributes(from);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
         this.target.addUpdatePositionTag();
-        this.target.addUpdateBoundTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
-    onEnd(cb) {
-        super.onEnd(cb);
+}
+class MoveScaleIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        const slideRatio = (_a = params === null || params === void 0 ? void 0 : params.slideRatio) !== null && _a !== void 0 ? _a : 0.5;
+        this.slideInDuration = duration * slideRatio;
+        this.growInDuration = duration * (1 - slideRatio);
     }
-    updateX(ratio) {
-        this.target.attribute.scaleX = this.from.scaleX + (this.to.scaleX - this.from.scaleX) * ratio;
+    onBind() {
+        var _a, _b, _c, _d, _e, _f;
+        super.onBind();
+        const executor = new AnimateExecutor(this.target);
+        executor.execute({
+            type: 'custom',
+            custom: SlideIn,
+            customParameters: {
+                direction: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.slideDirection) || 'right',
+                distance: ((_b = this.params) === null || _b === void 0 ? void 0 : _b.slideDistance) || 50,
+                fromOpacity: (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromOpacity) !== null && _d !== void 0 ? _d : 0
+            },
+            duration: this.slideInDuration,
+            easing: this.easing
+        });
+        executor.execute({
+            type: 'custom',
+            custom: GrowIn,
+            customParameters: {
+                fromScale: ((_e = this.params) === null || _e === void 0 ? void 0 : _e.fromScale) || 0.5,
+                direction: ((_f = this.params) === null || _f === void 0 ? void 0 : _f.scaleDirection) || 'xy',
+                fromOpacity: 1
+            },
+            duration: this.growInDuration,
+            easing: this.easing,
+            delay: this.slideInDuration
+        });
     }
-    updateY(ratio) {
-        this.target.attribute.scaleY = this.from.scaleY + (this.to.scaleY - this.from.scaleY) * ratio;
+    onUpdate(end, ratio, out) {
     }
-    updateXY(ratio) {
-        this.updateX(ratio);
-        this.updateY(ratio);
+}
+class MoveRotateIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        const slideRatio = (_a = params === null || params === void 0 ? void 0 : params.slideRatio) !== null && _a !== void 0 ? _a : 0.5;
+        this.slideInDuration = duration * slideRatio;
+        this.spinInDuration = duration * (1 - slideRatio);
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f;
+        super.onBind();
+        const executor = new AnimateExecutor(this.target);
+        executor.execute({
+            type: 'custom',
+            custom: SlideIn,
+            customParameters: {
+                direction: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.slideDirection) || 'right',
+                distance: ((_b = this.params) === null || _b === void 0 ? void 0 : _b.slideDistance) || 50,
+                fromOpacity: (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromOpacity) !== null && _d !== void 0 ? _d : 0
+            },
+            duration: this.slideInDuration,
+            easing: this.easing
+        });
+        executor.execute({
+            type: 'custom',
+            custom: SpinIn,
+            customParameters: {
+                fromAngle: ((_e = this.params) === null || _e === void 0 ? void 0 : _e.fromAngle) || Math.PI,
+                fromScale: ((_f = this.params) === null || _f === void 0 ? void 0 : _f.fromScale) || 0.5,
+                fromOpacity: 1
+            },
+            duration: this.spinInDuration,
+            easing: this.easing,
+            delay: this.slideInDuration
+        });
     }
     onUpdate(end, ratio, out) {
-        this._updateFunction(ratio);
-        this.target.addUpdatePositionTag();
     }
 }
-class ScaleOut extends ACustomAnimate {
+class SlideOut extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
-    onBind() {
-        var _a, _b, _c, _d, _e;
-        let from;
-        let to;
-        const attrs = this.target.getFinalAttribute();
-        switch ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) {
-            case 'x':
-                from = { scaleX: (_b = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _b !== void 0 ? _b : 1 };
-                to = { scaleX: 0 };
-                break;
-            case 'y':
-                from = { scaleY: (_c = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _c !== void 0 ? _c : 1 };
-                to = { scaleY: 0 };
-                break;
-            case 'xy':
-            default:
-                from = { scaleX: (_d = attrs === null || attrs === void 0 ? void 0 : attrs.scaleX) !== null && _d !== void 0 ? _d : 1, scaleY: (_e = attrs === null || attrs === void 0 ? void 0 : attrs.scaleY) !== null && _e !== void 0 ? _e : 1 };
-                to = {
-                    scaleX: 0,
-                    scaleY: 0
-                };
+    onFirstRun() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const attrs = this.target.getAttributes();
+        const direction = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) || 'right';
+        const distance = ((_b = this.params) === null || _b === void 0 ? void 0 : _b.distance) || 50;
+        const fromOpacity = (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromOpacity) !== null && _d !== void 0 ? _d : 1;
+        const toOpacity = (_f = (_e = this.params) === null || _e === void 0 ? void 0 : _e.toOpacity) !== null && _f !== void 0 ? _f : 0;
+        const from = { opacity: fromOpacity, baseOpacity: fromOpacity };
+        const to = { opacity: toOpacity, baseOpacity: toOpacity };
+        if (direction === 'top') {
+            from.y = (_g = attrs.y) !== null && _g !== void 0 ? _g : 0;
+            to.y = ((_h = attrs.y) !== null && _h !== void 0 ? _h : 0) - distance;
+            this.propKeys = ['opacity', 'baseOpacity', 'y'];
+        }
+        else if (direction === 'bottom') {
+            from.y = (_j = attrs.y) !== null && _j !== void 0 ? _j : 0;
+            to.y = ((_k = attrs.y) !== null && _k !== void 0 ? _k : 0) + distance;
+            this.propKeys = ['opacity', 'baseOpacity', 'y'];
+        }
+        else if (direction === 'left') {
+            from.x = (_l = attrs.x) !== null && _l !== void 0 ? _l : 0;
+            to.x = ((_m = attrs.x) !== null && _m !== void 0 ? _m : 0) - distance;
+            this.propKeys = ['opacity', 'baseOpacity', 'x'];
+        }
+        else {
+            from.x = (_o = attrs.x) !== null && _o !== void 0 ? _o : 0;
+            to.x = ((_p = attrs.x) !== null && _p !== void 0 ? _p : 0) + distance;
+            this.propKeys = ['opacity', 'baseOpacity', 'x'];
         }
+        this.from = from;
+        this.to = to;
         this.props = to;
-        this.propKeys = Object.keys(to);
-        this.animate.reSyncProps();
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class GrowOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onFirstRun() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const attrs = this.target.getAttributes();
+        const toScale = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromScale) !== null && _b !== void 0 ? _b : 0;
+        const direction = ((_c = this.params) === null || _c === void 0 ? void 0 : _c.direction) || 'xy';
+        const fromOpacity = (_e = (_d = this.params) === null || _d === void 0 ? void 0 : _d.fromOpacity) !== null && _e !== void 0 ? _e : 1;
+        const toOpacity = (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.toOpacity) !== null && _g !== void 0 ? _g : 0;
+        const from = { opacity: fromOpacity, baseOpacity: fromOpacity };
+        const to = { opacity: toOpacity, baseOpacity: toOpacity };
+        this.propKeys = ['opacity', 'baseOpacity'];
+        if (direction === 'x' || direction === 'xy') {
+            from.scaleX = (_h = attrs.scaleX) !== null && _h !== void 0 ? _h : 1;
+            to.scaleX = toScale;
+            this.propKeys.push('scaleX');
+        }
+        if (direction === 'y' || direction === 'xy') {
+            from.scaleY = (_j = attrs.scaleY) !== null && _j !== void 0 ? _j : 1;
+            to.scaleY = toScale;
+            this.propKeys.push('scaleY');
+        }
         this.from = from;
         this.to = to;
+        this.props = to;
     }
-    onEnd(cb) {
-        super.onEnd(cb);
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class SpinOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onFirstRun() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const attrs = this.target.getAttributes();
+        const toAngle = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromAngle) !== null && _b !== void 0 ? _b : Math.PI * 2;
+        const toScale = (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromScale) !== null && _d !== void 0 ? _d : 0;
+        const fromOpacity = (_f = (_e = this.params) === null || _e === void 0 ? void 0 : _e.fromOpacity) !== null && _f !== void 0 ? _f : 1;
+        const toOpacity = (_h = (_g = this.params) === null || _g === void 0 ? void 0 : _g.toOpacity) !== null && _h !== void 0 ? _h : 0;
+        const from = {
+            opacity: fromOpacity,
+            baseOpacity: fromOpacity,
+            angle: (_j = attrs.angle) !== null && _j !== void 0 ? _j : 0,
+            scaleX: (_k = attrs.scaleX) !== null && _k !== void 0 ? _k : 1,
+            scaleY: (_l = attrs.scaleY) !== null && _l !== void 0 ? _l : 1
+        };
+        const to = {
+            opacity: toOpacity,
+            baseOpacity: toOpacity,
+            angle: toAngle,
+            scaleX: toScale,
+            scaleY: toScale
+        };
+        this.propKeys = ['opacity', 'baseOpacity', 'angle', 'scaleX', 'scaleY'];
+        this.from = from;
+        this.to = to;
+        this.props = to;
     }
     onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -4403,13 +5424,105 @@ class ScaleOut extends ACustomAnimate {
             attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
         this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class MoveScaleOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        const slideRatio = (_a = params === null || params === void 0 ? void 0 : params.slideRatio) !== null && _a !== void 0 ? _a : 0.5;
+        this.growOutDuration = duration * (1 - slideRatio);
+        this.slideOutDuration = duration * slideRatio;
+    }
+    onFirstRun() {
+        var _a, _b, _c, _d;
+        const executor = new AnimateExecutor(this.target);
+        executor.execute({
+            type: 'custom',
+            custom: GrowOut,
+            customParameters: {
+                fromScale: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.fromScale) || 0.5,
+                direction: ((_b = this.params) === null || _b === void 0 ? void 0 : _b.scaleDirection) || 'xy',
+                fromOpacity: 1,
+                toOpacity: 1
+            },
+            duration: this.growOutDuration,
+            easing: this.easing
+        });
+        executor.execute({
+            type: 'custom',
+            custom: SlideOut,
+            customParameters: {
+                direction: ((_c = this.params) === null || _c === void 0 ? void 0 : _c.slideDirection) || 'right',
+                distance: ((_d = this.params) === null || _d === void 0 ? void 0 : _d.slideDistance) || 50,
+                fromOpacity: 1
+            },
+            duration: this.slideOutDuration,
+            easing: this.easing,
+            delay: this.growOutDuration
+        });
+    }
+    onUpdate(end, ratio, out) {
+    }
+}
+class MoveRotateOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        const slideRatio = (_a = params === null || params === void 0 ? void 0 : params.slideRatio) !== null && _a !== void 0 ? _a : 0.5;
+        this.spinOutDuration = duration * (1 - slideRatio);
+        this.slideOutDuration = duration * slideRatio;
+    }
+    onFirstRun() {
+        var _a, _b, _c, _d;
+        const executor = new AnimateExecutor(this.target);
+        executor.execute({
+            type: 'custom',
+            custom: SpinOut,
+            customParameters: {
+                fromAngle: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.fromAngle) || Math.PI,
+                fromScale: ((_b = this.params) === null || _b === void 0 ? void 0 : _b.fromScale) || 0.5,
+                fromOpacity: 1,
+                toOpacity: 1
+            },
+            duration: this.spinOutDuration,
+            easing: this.easing
+        });
+        executor.execute({
+            type: 'custom',
+            custom: SlideOut,
+            customParameters: {
+                direction: ((_c = this.params) === null || _c === void 0 ? void 0 : _c.slideDirection) || 'right',
+                distance: ((_d = this.params) === null || _d === void 0 ? void 0 : _d.slideDistance) || 50,
+                fromOpacity: 1
+            },
+            duration: this.slideOutDuration,
+            easing: this.easing,
+            delay: this.spinOutDuration
+        });
+    }
+    onUpdate(end, ratio, out) {
     }
 }
 
-class State extends ACustomAnimate {
+class Update extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
+    onBind() {
+        var _a, _b;
+        super.onBind();
+        let { diffAttrs = {} } = (_a = this.target.context) !== null && _a !== void 0 ? _a : {};
+        const { options } = this.params;
+        if ((_b = options === null || options === void 0 ? void 0 : options.excludeChannels) === null || _b === void 0 ? void 0 : _b.length) {
+            diffAttrs = Object.assign({}, diffAttrs);
+            options.excludeChannels.forEach((channel) => {
+                delete diffAttrs[channel];
+            });
+        }
+        this.props = diffAttrs;
+    }
     update(end, ratio, out) {
         this.onStart();
         if (!this.props || !this.propKeys) {
@@ -4431,10 +5544,236 @@ class State extends ACustomAnimate {
     }
 }
 
-class Update extends ACustomAnimate {
+const moveIn = (graphic, options, animationParameters) => {
+    var _a, _b;
+    const { offset = 0, orient, direction, point: pointOpt, excludeChannels = [] } = options !== null && options !== void 0 ? options : {};
+    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 += offset;
+    changedY += offset;
+    const point = isFunction(pointOpt) ? pointOpt.call(null, graphic.getDatum(), 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();
+    const finalAttrsX = excludeChannels.includes('x') ? graphic.attribute.x : finalAttrs.x;
+    const finalAttrsY = excludeChannels.includes('y') ? graphic.attribute.y : finalAttrs.y;
+    switch (direction) {
+        case 'x':
+            return {
+                from: { x: fromX },
+                to: { x: finalAttrsX }
+            };
+        case 'y':
+            return {
+                from: { y: fromY },
+                to: { y: finalAttrsY }
+            };
+        case 'xy':
+        default:
+            return {
+                from: { x: fromX, y: fromY },
+                to: {
+                    x: finalAttrsX,
+                    y: finalAttrsY
+                }
+            };
+    }
+};
+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 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 fromX = point && isValidNumber(point.x) ? point.x : changedX;
+    const fromY = point && isValidNumber(point.y) ? point.y : changedY;
+    switch (direction) {
+        case 'x':
+            return {
+                from: { x: graphic.attribute.x },
+                to: { x: fromX }
+            };
+        case 'y':
+            return {
+                from: { y: graphic.attribute.y },
+                to: { y: fromY }
+            };
+        case 'xy':
+        default:
+            return {
+                from: {
+                    x: graphic.attribute.x,
+                    y: graphic.attribute.y
+                },
+                to: { x: fromX, y: fromY }
+            };
+    }
+};
+class MoveBase extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class MoveIn extends MoveBase {
+    onBind() {
+        super.onBind();
+        const { from, to } = moveIn(this.target, this.params.options, this.params);
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.from = from;
+        this.to = to;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
+        this.target.setAttributes(from);
+    }
+}
+class MoveOut extends MoveBase {
+    onBind() {
+        super.onBind();
+        const { from, to } = moveOut(this.target, this.params.options, this.params);
+        this.props = to;
+        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+        this.from = from;
+        this.to = to;
+    }
+}
+
+const rotateIn = (graphic, options) => {
+    var _a;
+    const finalAttrs = graphic.getFinalAttribute();
+    const attributeAngle = (_a = finalAttrs.angle) !== null && _a !== void 0 ? _a : 0;
+    let angle = 0;
+    if (isNumberClose(attributeAngle / (Math.PI * 2), 0)) {
+        angle = Math.round(attributeAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    else if (isValidNumber(options === null || options === void 0 ? void 0 : options.angle)) {
+        angle = options.angle;
+    }
+    else if ((options === null || options === void 0 ? void 0 : options.orient) === 'anticlockwise') {
+        angle = Math.ceil(attributeAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    else {
+        angle = Math.floor(attributeAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    return {
+        from: { angle },
+        to: { angle: attributeAngle }
+    };
+};
+const rotateOut = (graphic, options) => {
+    var _a;
+    const finalAttrs = graphic.getFinalAttribute();
+    const finalAngle = (_a = finalAttrs.angle) !== null && _a !== void 0 ? _a : 0;
+    let angle = 0;
+    if (isNumberClose(finalAngle / (Math.PI * 2), 0)) {
+        angle = Math.round(finalAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    else if (isValidNumber(options === null || options === void 0 ? void 0 : options.angle)) {
+        angle = options.angle;
+    }
+    else if ((options === null || options === void 0 ? void 0 : options.orient) === 'anticlockwise') {
+        angle = Math.ceil(finalAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    else {
+        angle = Math.floor(finalAngle / (Math.PI * 2)) * Math.PI * 2;
+    }
+    return {
+        from: { angle: finalAngle },
+        to: { angle }
+    };
+};
+class RotateBase extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
+        this.propKeys.forEach(key => {
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+class RotateIn extends RotateBase {
+    onBind() {
+        super.onBind();
+        const { from, to } = rotateIn(this.target, this.params.options);
+        this.props = to;
+        this.propKeys = ['angle'];
+        this.from = from;
+        this.to = to;
+        const finalAttribute = this.target.getFinalAttribute();
+        if (finalAttribute) {
+            Object.assign(this.target.attribute, finalAttribute);
+        }
+        this.target.setAttributes(from);
+    }
+}
+class RotateOut extends RotateBase {
+    onBind() {
+        super.onBind();
+        const { from, to } = rotateOut(this.target, this.params.options);
+        this.props = to;
+        this.propKeys = ['angle'];
+        this.from = from;
+        this.to = to;
+    }
+}
+
+class FromTo extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
-        const { diffAttrs = {} } = params;
-        super(from, diffAttrs, duration, easing, params);
+        super(from, to, duration, easing, params);
+        this.from = from !== null && from !== void 0 ? from : {};
+    }
+    onBind() {
+        super.onBind();
+        const finalAttribute = this.target.getFinalAttribute();
+        Object.keys(this.from).forEach(key => {
+            if (this.props[key] == null) {
+                this.props[key] = finalAttribute[key];
+            }
+        });
+    }
+    onFirstRun() {
+        var _a;
+        this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
+        const startProps = this.animate.getStartProps();
+        this.propKeys &&
+            this.propKeys.forEach(key => {
+                var _a;
+                this.from[key] = (_a = this.from[key]) !== null && _a !== void 0 ? _a : startProps[key];
+            });
+        if (((_a = this.target.context) === null || _a === void 0 ? void 0 : _a.animationState) === 'appear') {
+            const finalAttribute = this.target.getFinalAttribute();
+            this.target.setAttributes(finalAttribute);
+        }
+        this.target.setAttributes(this.from);
     }
     update(end, ratio, out) {
         this.onStart();
@@ -4443,22 +5782,24 @@ class Update extends ACustomAnimate {
         }
         const easedRatio = this.easing(ratio);
         this.animate.interpolateUpdateFunction
-            ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target)
+            ? this.animate.interpolateUpdateFunction(this.from, this.props, easedRatio, this, this.target)
             : this.interpolateUpdateFunctions.forEach((func, index) => {
                 if (!this.animate.validAttr(this.propKeys[index])) {
                     return;
                 }
                 const key = this.propKeys[index];
-                const fromValue = this.fromProps[key];
+                const fromValue = this.from[key];
                 const toValue = this.props[key];
                 func(key, fromValue, toValue, easedRatio, this, this.target);
             });
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
 }
 
 const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
+    AnimateExecutor.registerBuiltInAnimate('fromTo', FromTo);
     AnimateExecutor.registerBuiltInAnimate('scaleIn', ScaleIn);
     AnimateExecutor.registerBuiltInAnimate('scaleOut', ScaleOut);
     AnimateExecutor.registerBuiltInAnimate('growHeightIn', GrowHeightIn);
@@ -4481,13 +5822,31 @@ const registerCustomAnimate = () => {
     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('labelUpdate', LabelUpdate);
+    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);
 };
 
-export { ACustomAnimate, Animate, AnimateExecutor, AnimateMode, AnimateStatus, AnimateStepType, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, Step, TagPointsUpdate, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, TagPointsUpdate, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };