@visactor/vrender-animate 0.22.4 → 0.23.0-alpha.3

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { interpolateColor, interpolatePureColorArrayToStr, ColorStore, ColorType, Generator, AnimateStatus as AnimateStatus$1, PerformanceRAF, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, cloneDeep, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil } from '@visactor/vutils';
+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) {
@@ -256,13 +256,17 @@ class InterpolateUpdateStore {
             target.attribute.fill = interpolateColor(from, to, ratio, false);
         };
         this.fillPure = (key, from, to, ratio, step, target) => {
-            target.attribute.fill = interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio);
+            target.attribute.fill = step.fromParsedProps.fill
+                ? interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio)
+                : step.toParsedProps.fill;
         };
         this.stroke = (key, from, to, ratio, step, target) => {
             target.attribute.stroke = interpolateColor(from, to, ratio, false);
         };
         this.strokePure = (key, from, to, ratio, step, target) => {
-            target.attribute.stroke = interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio);
+            target.attribute.stroke = step.fromParsedProps.stroke
+                ? interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio)
+                : step.toParsedProps.stroke;
         };
         this.width = (key, from, to, ratio, step, target) => {
             target.attribute.width = interpolateNumber(from, to, ratio);
@@ -325,6 +329,10 @@ class InterpolateUpdateStore {
             target.attribute.size = interpolateNumber(from, to, ratio);
             target.addUpdateBoundTag();
         };
+        this.points = (key, from, to, ratio, step, target) => {
+            target.attribute.points = pointsInterpolation(from, to, ratio);
+            target.addUpdateBoundTag();
+        };
     }
 }
 const interpolateUpdateStore = new InterpolateUpdateStore();
@@ -414,7 +422,7 @@ class Step {
         const funcs = [];
         this.propKeys.forEach(key => {
             if (key === 'fill' || key === 'stroke') {
-                const from = this.getLastProps()[key];
+                const from = this.fromProps[key];
                 const to = this.props[key];
                 if (isString(from) && isString(to)) {
                     const fromArray = ColorStore.Get(from, ColorType.Color255);
@@ -427,8 +435,14 @@ class Step {
                     }
                     this.fromParsedProps[key] = fromArray;
                     this.toParsedProps[key] = toArray;
+                    funcs.push(interpolateUpdateStore[key === 'fill' ? 'fillPure' : 'strokePure']);
+                }
+                else if (interpolateUpdateStore[key]) {
+                    funcs.push(interpolateUpdateStore[key]);
+                }
+                else {
+                    funcs.push(commonInterpolateUpdate);
                 }
-                funcs.push(interpolateUpdateStore[key === 'fill' ? 'fillPure' : 'strokePure']);
             }
             else if (interpolateUpdateStore[key]) {
                 funcs.push(interpolateUpdateStore[key]);
@@ -456,6 +470,12 @@ class Step {
         if (!this._hasFirstRun) {
             this._hasFirstRun = true;
             this.fromProps = this.getLastProps();
+            const startProps = this.animate.getStartProps();
+            this.propKeys &&
+                this.propKeys.forEach(key => {
+                    var _a;
+                    this.fromProps[key] = (_a = this.fromProps[key]) !== null && _a !== void 0 ? _a : startProps[key];
+                });
             this.determineInterpolateUpdateFunction();
             this.tryPreventConflict();
             this.trySyncStartProps();
@@ -514,11 +534,11 @@ class Step {
     onUpdate(end, ratio, out) {
     }
     onEnd(cb) {
+        this.target.setAttributes(this.props);
         if (cb) {
             this._endCb = cb;
         }
         else if (this._endCb) {
-            this.target.setAttributes(this.props);
             this._endCb(this.animate, this);
         }
     }
@@ -531,6 +551,8 @@ class Step {
     getMergedEndProps() {
         return this.getEndProps();
     }
+    stop() {
+    }
 }
 class WaitStep extends Step {
     constructor(type, props, duration, easing) {
@@ -704,14 +726,14 @@ class Animate {
     }
     to(props, duration = 300, easing = 'linear') {
         const step = new Step(AnimateStepType.to, props, duration, easing);
-        this.updateStepAfterAppend(step);
         step.bind(this.target, this);
+        this.updateStepAfterAppend(step);
         return this;
     }
     wait(delay) {
         const step = new WaitStep(AnimateStepType.wait, {}, delay, 'linear');
-        this.updateStepAfterAppend(step);
         step.bind(this.target, this);
+        this.updateStepAfterAppend(step);
         return this;
     }
     updateStepAfterAppend(step) {
@@ -770,8 +792,8 @@ class Animate {
         return this;
     }
     play(customAnimate) {
-        this.updateStepAfterAppend(customAnimate);
         customAnimate.bind(this.target, this);
+        this.updateStepAfterAppend(customAnimate);
         return this;
     }
     pause() {
@@ -866,6 +888,11 @@ class Animate {
         return this._endProps;
     }
     stop(type) {
+        let step = this._firstStep;
+        while (step) {
+            step.stop();
+            step = step.next;
+        }
         this.status = AnimateStatus.END;
         this.onEnd();
         if (!this.target) {
@@ -1037,7 +1064,7 @@ class RAFTickHandler {
             if (this.released) {
                 return;
             }
-            cb(this);
+            return cb(this);
         });
     }
     release() {
@@ -1050,36 +1077,37 @@ class RAFTickHandler {
 class DefaultTicker extends EventEmitter {
     constructor(stage) {
         super();
-        this.interval = 16;
-        this.lastFrameTime = -1;
-        this.lastExecutionTime = -1;
-        this.tickCounts = 0;
         this.timelines = [];
-        this.autoStop = true;
+        this.frameTimeHistory = [];
+        this.checkSkip = (delta) => {
+            const skip = delta < this.interval + (Math.random() - 0.5) * 2 * this._jitter;
+            return skip;
+        };
         this.handleTick = (handler, params) => {
             const { once = false } = params !== null && params !== void 0 ? params : {};
             if (this.ifCanStop()) {
                 this.stop();
-                return;
+                return false;
             }
             const currentTime = handler.getTime();
-            const timeFromLastExecution = this.lastExecutionTime < 0 ? this.interval : currentTime - this.lastExecutionTime;
-            if (timeFromLastExecution >= this.interval) {
-                this._handlerTick();
-                this.lastExecutionTime = currentTime;
+            this._lastTickTime = currentTime;
+            if (this.lastFrameTime < 0) {
+                this.lastFrameTime = currentTime - this.interval + this.timeOffset;
+                this.frameTimeHistory.push(this.lastFrameTime);
+            }
+            const delta = currentTime - this.lastFrameTime;
+            const skip = this.checkSkip(delta);
+            if (!skip) {
+                this._handlerTick(delta);
+                this.lastFrameTime = currentTime;
+                this.frameTimeHistory.push(this.lastFrameTime);
             }
             if (!once) {
                 handler.tick(this.interval, this.handleTick);
             }
+            return !skip;
         };
-        this._handlerTick = () => {
-            const tickerHandler = this.tickerHandler;
-            const time = tickerHandler.getTime();
-            let delta = 0;
-            if (this.lastFrameTime >= 0) {
-                delta = time - this.lastFrameTime;
-            }
-            this.lastFrameTime = time;
+        this._handlerTick = (delta) => {
             if (this.status !== STATUS.RUNNING) {
                 return;
             }
@@ -1091,10 +1119,15 @@ class DefaultTicker extends EventEmitter {
         };
         this.init();
         this.lastFrameTime = -1;
-        this.lastExecutionTime = -1;
         this.tickCounts = 0;
         this.stage = stage;
         this.autoStop = true;
+        this.interval = 16;
+        this.computeTimeOffsetAndJitter();
+    }
+    computeTimeOffsetAndJitter() {
+        this.timeOffset = Math.floor(Math.random() * this.interval);
+        this._jitter = Math.min(Math.max(this.interval * 0.2, 6), this.interval * 0.7);
     }
     init() {
         this.interval = 16;
@@ -1128,19 +1161,20 @@ class DefaultTicker extends EventEmitter {
     }
     setInterval(interval) {
         this.interval = interval;
+        this.computeTimeOffsetAndJitter();
     }
     getInterval() {
         return this.interval;
     }
     setFPS(fps) {
-        this.setInterval(1000 / fps);
+        this.setInterval(Math.floor(1000 / fps));
     }
     getFPS() {
         return 1000 / this.interval;
     }
     tick(interval) {
         this.tickerHandler.tick(interval, (handler) => {
-            this.handleTick(handler, { once: true });
+            return this.handleTick(handler, { once: true });
         });
     }
     tickTo(t) {
@@ -1199,7 +1233,6 @@ class DefaultTicker extends EventEmitter {
         this.status = STATUS.INITIAL;
         this.setupTickHandler();
         this.lastFrameTime = -1;
-        this.lastExecutionTime = -1;
     }
     trySyncTickStatus() {
         if (this.status === STATUS.INITIAL && this.timelines.some(timeline => timeline.isRunning())) {
@@ -1215,7 +1248,7 @@ class DefaultTicker extends EventEmitter {
         this.timelines = [];
         (_a = this.tickerHandler) === null || _a === void 0 ? void 0 : _a.release();
         this.tickerHandler = null;
-        this.lastExecutionTime = -1;
+        this.lastFrameTime = -1;
     }
 }
 
@@ -1435,11 +1468,11 @@ class AnimateExecutor {
             }
         });
     }
-    parseParams(params) {
-        const isTimeline = 'timeSlices' in params;
+    parseParams(params, isTimeline) {
+        var _a;
         const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
         const startTime = this.resolveValue(params.startTime, undefined, 0);
-        const parsedParams = cloneDeep(params);
+        const parsedParams = Object.assign({}, params);
         parsedParams.oneByOneDelay = 0;
         parsedParams.startTime = startTime;
         parsedParams.totalTime = totalTime;
@@ -1467,10 +1500,18 @@ class AnimateExecutor {
             if (totalTime) {
                 const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
                 const scale = totalTime ? totalTime / _totalTime : 1;
-                parsedParams.timeSlices.forEach(slice => {
-                    slice.delay = slice.delay * scale;
-                    slice.delayAfter = slice.delayAfter * scale;
-                    slice.duration = slice.duration * scale;
+                parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+                    let effects = slice.effects;
+                    if (!Array.isArray(effects)) {
+                        effects = [effects];
+                    }
+                    return Object.assign(Object.assign({}, slice), { delay: slice.delay * scale, delayAfter: slice.delayAfter * scale, duration: slice.duration * scale, effects: effects.map(effect => {
+                            var _a;
+                            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[effect.type];
+                            const customType = custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0;
+                            return Object.assign(Object.assign({}, effect), { custom,
+                                customType });
+                        }) });
                 });
                 parsedParams.oneByOne = oneByOneTime * scale;
                 parsedParams.oneByOneDelay = oneByOneDelay * scale;
@@ -1489,6 +1530,14 @@ class AnimateExecutor {
             }
             parsedParams.oneByOne = oneByOneTime;
             parsedParams.oneByOneDelay = oneByOneDelay;
+            parsedParams.custom =
+                (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[params.type];
+            const customType = parsedParams.custom && isFunction(parsedParams.custom)
+                ? /^class\s/.test(Function.prototype.toString.call(parsedParams.custom))
+                    ? 1
+                    : 2
+                : 0;
+            parsedParams.customType = customType;
             if (totalTime) {
                 const _totalTime = delay + delayAfter + duration + oneByOneDelay * (this._target.count - 2);
                 const scale = totalTime ? totalTime / _totalTime : 1;
@@ -1503,6 +1552,9 @@ class AnimateExecutor {
         return parsedParams;
     }
     execute(params) {
+        if (params.selfOnly) {
+            return this.executeItem(params, this._target, 0, 1);
+        }
         const isTimeline = 'timeSlices' in params;
         let filteredChildren;
         if (isTimeline && params.partitioner) {
@@ -1518,7 +1570,7 @@ class AnimateExecutor {
                 return params.sort((_a = a.context) === null || _a === void 0 ? void 0 : _a.data, (_b = b.context) === null || _b === void 0 ? void 0 : _b.data, a, b, {});
             });
         }
-        const parsedParams = this.parseParams(params);
+        const parsedParams = this.parseParams(params, isTimeline);
         const cb = isTimeline
             ? (child, index, count) => {
                 const animate = this.executeTimelineItem(parsedParams, child, index, count);
@@ -1544,24 +1596,24 @@ class AnimateExecutor {
         return;
     }
     executeTypeConfigItem(params, graphic, index, count) {
-        var _a, _b, _c, _d, _e, _f;
-        const { type, channel, customParameters, easing = 'linear', delay = 0, delayAfter = 0, duration = 300, startTime = 0, oneByOneDelay = 0, loop, bounce, priority = 0, options, controlOptions } = params;
-        const custom = (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
+        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;
         const animate = graphic.animate();
         animate.priority = priority;
         const delayValue = delay;
-        const datum = (_c = (_b = graphic.context) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
-        const indexKey = (_d = graphic.context) === null || _d === void 0 ? void 0 : _d.indexKey;
+        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;
         if (datum && indexKey) {
-            index = (_e = datum[indexKey]) !== null && _e !== void 0 ? _e : index;
+            index = (_d = datum[indexKey]) !== null && _d !== void 0 ? _d : index;
         }
         animate.startAt(startTime);
-        animate.wait(index * oneByOneDelay);
+        const wait = index * oneByOneDelay;
+        wait > 0 && animate.wait(wait);
         if (delayValue > 0) {
             animate.wait(delayValue);
         }
-        const props = (_f = params.to) !== null && _f !== void 0 ? _f : this.createPropsFromChannel(channel, graphic);
-        this._handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic);
+        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);
         if (oneByOneDelay) {
             animate.wait(oneByOneDelay * (count - index - 1));
         }
@@ -1576,20 +1628,18 @@ class AnimateExecutor {
         }
         return animate;
     }
-    _handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic) {
-        if (custom) {
+    _handleRunAnimate(animate, custom, customType, props, duration, easing, customParameters, options, type, graphic) {
+        if (custom && customType) {
             const customParams = this.resolveValue(customParameters, graphic, {});
             const objOptions = isFunction(options)
                 ? options.call(null, customParameters.data && customParameters.data[0], graphic, customParameters)
                 : options;
             customParams.options = objOptions;
-            if (isFunction(custom)) {
-                if (/^class\s/.test(Function.prototype.toString.call(custom))) {
-                    this.createCustomAnimation(animate, custom, props, duration, easing, customParams);
-                }
-                else {
-                    this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
-                }
+            if (customType === 1) {
+                this.createCustomAnimation(animate, custom, props, duration, easing, customParams);
+            }
+            else if (customType === 2) {
+                this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
             }
         }
         else if (type === 'to') {
@@ -1637,9 +1687,8 @@ class AnimateExecutor {
         effectsArray.forEach(effect => {
             var _a;
             const { type = 'to', channel, customParameters, easing = 'linear', options } = effect;
-            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
-            const props = this.createPropsFromChannel(channel, graphic);
-            this._handleRunAnimate(animate, custom, props, duration, easing, customParameters, options, type, graphic);
+            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);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -1656,12 +1705,8 @@ class AnimateExecutor {
         animate.to(props, duration, easing);
     }
     createCustomAnimation(animate, CustomAnimateConstructor, props, duration, easing, customParams) {
-        const from = {};
         const to = props;
-        Object.keys(to).forEach(key => {
-            from[key] = animate.target.getComputedAttribute(key);
-        });
-        const customAnimate = new CustomAnimateConstructor(from, to, duration, easing, customParams);
+        const customAnimate = new CustomAnimateConstructor(null, to, duration, easing, customParams);
         animate.play(customAnimate);
     }
     createPropsFromChannel(channel, graphic) {
@@ -1700,11 +1745,12 @@ class AnimateExecutor {
         }
         const isTimeline = 'timeSlices' in params;
         let animate = null;
+        const parsedParams = this.parseParams(params, isTimeline);
         if (isTimeline) {
-            animate = this.executeTimelineItem(params, graphic, index, count);
+            animate = this.executeTimelineItem(parsedParams, graphic, index, count);
         }
         else {
-            animate = this.executeTypeConfigItem(params, graphic, index, count);
+            animate = this.executeTypeConfigItem(parsedParams, graphic, index, count);
         }
         if (animate) {
             this._trackAnimation(animate);
@@ -1726,6 +1772,19 @@ class AnimateExecutor {
 }
 AnimateExecutor.builtInAnimateMap = {};
 
+const AnimationStates = {
+    APPEAR: 'appear',
+    DISAPPEAR: 'disappear',
+    UPDATE: 'update',
+    HIGHLIGHT: 'highlight',
+    UNHIGHLIGHT: 'unhighlight',
+    SELECT: 'select',
+    UNSELECT: 'unselect',
+    HOVER: 'hover',
+    UNHOVER: 'unhover',
+    ACTIVE: 'active',
+    INACTIVE: 'inactive'
+};
 class AnimationStateStore {
     constructor(graphic) {
         this.graphic = graphic;
@@ -1814,6 +1873,21 @@ class AnimationStateManager {
         }
         this.stateList.push(...shouldApplyState);
     }
+    applyAppearState(animationConfig, callback) {
+        this.applyState([AnimationStates.APPEAR], [{ name: AnimationStates.APPEAR, animation: animationConfig }], callback);
+    }
+    applyDisappearState(animationConfig, callback) {
+        this.applyState([AnimationStates.DISAPPEAR], [{ name: AnimationStates.DISAPPEAR, animation: animationConfig }], callback);
+    }
+    applyUpdateState(animationConfig, callback) {
+        this.applyState([AnimationStates.UPDATE], [{ name: AnimationStates.UPDATE, animation: animationConfig }], callback);
+    }
+    applyHighlightState(animationConfig, callback) {
+        this.applyState([AnimationStates.HIGHLIGHT], [{ name: AnimationStates.HIGHLIGHT, animation: animationConfig }], callback);
+    }
+    applyUnhighlightState(animationConfig, callback) {
+        this.applyState([AnimationStates.UNHIGHLIGHT], [{ name: AnimationStates.UNHIGHLIGHT, animation: animationConfig }], callback);
+    }
     stopState(state, type) {
         var _a;
         const stateInfo = (_a = this.stateList) === null || _a === void 0 ? void 0 : _a.find(stateInfo => stateInfo.state === state);
@@ -1851,6 +1925,26 @@ class GraphicStateExtension {
         this._getAnimationStateManager(this).applyState(state, animationConfig, callback);
         return this;
     }
+    applyAppearState(animationConfig, callback) {
+        this._getAnimationStateManager(this).applyAppearState(animationConfig, callback);
+        return this;
+    }
+    applyDisappearState(animationConfig, callback) {
+        this._getAnimationStateManager(this).applyDisappearState(animationConfig, callback);
+        return this;
+    }
+    applyUpdateState(animationConfig, callback) {
+        this._getAnimationStateManager(this).applyUpdateState(animationConfig, callback);
+        return this;
+    }
+    applyHighlightState(animationConfig, callback) {
+        this._getAnimationStateManager(this).applyHighlightState(animationConfig, callback);
+        return this;
+    }
+    applyUnhighlightState(animationConfig, callback) {
+        this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback);
+        return this;
+    }
     stopAnimationState(state, type) {
         this._getAnimationStateManager(this).stopState(state, type);
         return this;
@@ -1867,13 +1961,18 @@ class GraphicStateExtension {
 }
 
 class AnimateExtension {
-    constructor() {
-        this.animatedAttribute = null;
+    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.computeAnimatedAttribute();
-            return this.getFinalAttribute();
+        if (final && this.finalAttribute) {
+            return this.finalAttribute;
         }
         return this.attribute;
     }
@@ -1898,42 +1997,44 @@ class AnimateExtension {
         (_c = this.stage) === null || _c === void 0 ? void 0 : _c.ticker.start();
         return animate;
     }
-    computeAnimatedAttribute() {
-        if (!this.animatedAttribute) {
-            this.animatedAttribute = {};
-            this.animates.forEach(animate => {
-                if (animate.getLoop() !== Infinity) {
-                    Object.assign(this.animatedAttribute, animate.getEndProps());
-                }
-            });
-        }
-    }
     createTimeline() {
         return new DefaultTimeline();
     }
     createTicker(stage) {
         return new DefaultTicker(stage);
     }
-    getFinalAttribute() {
-        const finalAttribute = {};
-        Object.assign(finalAttribute, this.attribute, this.animatedAttribute);
-        return finalAttribute;
+    setFinalAttribute(finalAttribute) {
+        if (!this.finalAttribute) {
+            this.finalAttribute = {};
+        }
+        Object.assign(this.finalAttribute, finalAttribute);
     }
-}
-
-function registerAnimate() {
-    if (!Graphic.Animate) {
-        Graphic.Animate = Animate;
+    initFinalAttribute(finalAttribute) {
+        this.finalAttribute = finalAttribute;
+    }
+    initAnimateExecutor() {
+        if (!this._animateExecutor) {
+            this._animateExecutor = new AnimateExecutor(this);
+        }
     }
-    if (!Graphic.Timeline) {
-        Graphic.Timeline = DefaultTimeline;
+    executeAnimation(config) {
+        this.initAnimateExecutor();
+        this._animateExecutor.execute(config);
+        return this;
     }
-    if (!Graphic.defaultTimeline) {
-        Graphic.defaultTimeline = defaultTimeline;
+    executeAnimations(configs) {
+        this.initAnimateExecutor();
+        configs.forEach(config => {
+            this._animateExecutor.execute(config);
+        });
+        return this;
     }
-    if (!Graphic.Ticker) {
-        Graphic.Ticker = DefaultTicker;
+    getFinalAttribute() {
+        return this.finalAttribute;
     }
+}
+
+function registerAnimate() {
     mixin(Graphic, GraphicStateExtension);
     mixin(Graphic, AnimateExtension);
 }
@@ -1959,6 +2060,14 @@ class ACustomAnimate extends Step {
         this.animate.reSyncProps();
     }
 }
+class AComponentAnimate extends ACustomAnimate {
+    onFirstRun() {
+        this._animator && this._animator.start();
+    }
+    stop() {
+        this._animator && this._animator.stop();
+    }
+}
 
 class IncreaseCount extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
@@ -2625,9 +2734,12 @@ class CommonIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
-        const attrs = this.target.getFinalAttribute();
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : {};
+        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 => {
@@ -2646,10 +2758,12 @@ class CommonIn extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 class CommonOut extends ACustomAnimate {
@@ -2676,10 +2790,12 @@ class CommonOut extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 
@@ -2801,41 +2917,75 @@ const growAngleOut = (graphic, options, animationParameters) => {
         ? growAngleOutOverall(graphic, options)
         : growAngleOutIndividual(graphic, options);
 };
-let GworPointsBase$2 = class GworPointsBase extends ACustomAnimate {
+class GrowAngleBase extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
     }
+    determineUpdateFunction() {
+        if (!this.propKeys) {
+            this.valid = false;
+        }
+        else 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.valid = false;
+        }
+    }
+    updateStartAngle(ratio) {
+        this.target.attribute.startAngle =
+            this.from.startAngle + (this.to.startAngle - this.from.startAngle) * ratio;
+    }
+    updateEndAngle(ratio) {
+        this.target.attribute.endAngle = this.from.endAngle + (this.to.endAngle - this.from.endAngle) * ratio;
+    }
+    updateAngle(ratio) {
+        this.updateStartAngle(ratio);
+        this.updateEndAngle(ratio);
+    }
     onUpdate(end, ratio, out) {
-        this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-        });
-        this.target.setAttributes(out);
+        this._updateFunction(ratio);
+        this.target.addUpdateShapeAndBoundsTag();
     }
-};
-class GrowAngleIn extends GworPointsBase$2 {
+}
+class GrowAngleIn extends GrowAngleBase {
     onBind() {
-        var _a;
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            Object.assign(this.target.attribute, this.params.diffAttrs);
+        }
         const { from, to } = growAngleIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        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.to = to;
-        this.target.setAttributes(fromAttrs);
+        Object.assign(this.target.attribute, fromAttrs);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
+        this.determineUpdateFunction();
     }
 }
-class GrowAngleOut extends GworPointsBase$2 {
+class GrowAngleOut extends GrowAngleBase {
     onBind() {
-        var _a;
+        var _a, _b;
         const { from, to } = growAngleOut(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : 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;
-        this.target.setAttributes(fromAttrs);
+        Object.assign(this.target.attribute, fromAttrs);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
+        this.determineUpdateFunction();
     }
 }
 
@@ -2995,9 +3145,12 @@ class GrowCenterIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            this.target.setAttributes(this.params.diffAttrs);
+        }
         const { from, to } = growCenterIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        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();
@@ -3009,10 +3162,12 @@ class GrowCenterIn extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 class GrowCenterOut extends ACustomAnimate {
@@ -3032,10 +3187,12 @@ class GrowCenterOut extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 
@@ -3095,24 +3252,30 @@ class GrowHeightIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            Object.assign(this.target.attribute, this.params.diffAttrs);
+        }
         const { from, to } = growHeightIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        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.to = to;
-        this.target.setAttributes(fromAttrs);
+        Object.assign(this.target.attribute, fromAttrs);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
     }
     onEnd(cb) {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 function growHeightOutIndividual(graphic, options, animationParameters) {
@@ -3179,10 +3342,12 @@ class GrowHeightOut extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 
@@ -3235,19 +3400,20 @@ let GworPointsBase$1 = class GworPointsBase extends ACustomAnimate {
         if (!fromPoints || !toPoints) {
             return;
         }
-        out.points = fromPoints.map((point, index) => {
+        this.target.attribute.points = fromPoints.map((point, index) => {
             const newPoint = pointInterpolation(fromPoints[index], toPoints[index], ratio);
             return newPoint;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 };
 class GrowPointsIn extends GworPointsBase$1 {
     onBind() {
-        var _a;
-        if (['area', 'line'].includes(this.target.type)) {
+        var _a, _b;
+        if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : 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();
@@ -3308,10 +3474,10 @@ const growPointsXOut = (graphic, options, animationParameters) => {
 };
 class GrowPointsXIn extends GworPointsBase$1 {
     onBind() {
-        var _a;
-        if (['area', 'line'].includes(this.target.type)) {
+        var _a, _b;
+        if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : 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();
@@ -3372,10 +3538,13 @@ const growPointsYOut = (graphic, options, animationParameters) => {
 };
 class GrowPointsYIn extends GworPointsBase$1 {
     onBind() {
-        var _a;
-        if (['area', 'line'].includes(this.target.type)) {
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            this.target.setAttributes(this.params.diffAttrs);
+        }
+        if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
-            const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+            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();
@@ -3442,21 +3611,22 @@ const growRadiusOutIndividual = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     if (options && options.orient === 'inside') {
         return {
-            from: { innerRadius: graphic.getGraphicAttribute('innerRadius', true) },
+            from: { innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius },
             to: { innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius }
         };
     }
     return {
-        from: { outerRadius: graphic.getGraphicAttribute('outerRadius', true) },
+        from: { outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius },
         to: { outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius }
     };
 };
 const growRadiusOutOverall = (graphic, options, animationParameters) => {
+    const attrs = graphic.getFinalAttribute();
     const overallValue = isNumber(options === null || options === void 0 ? void 0 : options.overall) ? options.overall : 0;
     return {
         from: {
-            innerRadius: graphic.getGraphicAttribute('innerRadius', true),
-            outerRadius: graphic.getGraphicAttribute('outerRadius', true)
+            innerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.innerRadius,
+            outerRadius: attrs === null || attrs === void 0 ? void 0 : attrs.outerRadius
         },
         to: {
             innerRadius: overallValue,
@@ -3475,17 +3645,22 @@ class GworPointsBase extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 class GrowRadiusIn extends GworPointsBase {
     onBind() {
-        var _a;
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            this.target.setAttributes(this.params.diffAttrs);
+        }
         const { from, to } = growRadiusIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        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();
@@ -3496,9 +3671,9 @@ class GrowRadiusIn extends GworPointsBase {
 }
 class GrowRadiusOut extends GworPointsBase {
     onBind() {
-        var _a;
+        var _a, _b;
         const { from, to } = growRadiusOut(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : 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();
@@ -3611,9 +3786,12 @@ class GrowWidthIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
+        var _a, _b, _c;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+            this.target.setAttributes(this.params.diffAttrs);
+        }
         const { from, to } = growWidthIn(this.target, this.params.options, this.params);
-        const fromAttrs = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : from;
+        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();
@@ -3625,10 +3803,12 @@ class GrowWidthIn extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
     }
 }
 class GrowWidthOut extends ACustomAnimate {
@@ -3648,10 +3828,476 @@ class GrowWidthOut extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+        });
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateShapeAndBoundsTag();
+    }
+}
+
+/******************************************************************************
+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() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const target = this.target;
+        const { symbolStartOuterType = 'scale', titleType = 'typewriter', titlePanelType = 'scale' } = this.params;
+        const symbolTime = duration / 10;
+        target._symbolStart.setAttributes({ scaleX: 0, scaleY: 0 });
+        animator.animate(target._symbolStart, {
+            type: 'to',
+            to: { scaleX: 1, scaleY: 1 },
+            duration: symbolTime * 5,
+            easing
+        });
+        let symbolStartOuterFrom;
+        let symbolStartOuterTo;
+        if (symbolStartOuterType === 'scale') {
+            symbolStartOuterFrom = { scaleX: 0, scaleY: 0 };
+            symbolStartOuterTo = { scaleX: 1, scaleY: 1 };
+        }
+        else {
+            symbolStartOuterFrom = { clipRange: 0 };
+            symbolStartOuterTo = { clipRange: 1 };
+        }
+        target._symbolStartOuter.setAttributes(symbolStartOuterFrom);
+        animator.animate(target._symbolStartOuter, {
+            type: 'to',
+            to: symbolStartOuterTo,
+            duration: symbolTime * 5,
+            easing
+        });
+        target._symbolEnd.setAttributes({ scaleX: 0, scaleY: 0 });
+        animator.animate(target._symbolEnd, {
+            type: 'to',
+            to: { scaleX: 1, scaleY: 1 },
+            duration: symbolTime * 2,
+            delay: symbolTime * 8,
+            easing
+        });
+        target._line.setAttributes({ clipRange: 0 });
+        animator.animate(target._line, {
+            type: 'to',
+            to: { clipRange: 1 },
+            duration: symbolTime * 9,
+            easing
+        });
+        if (titleType === 'typewriter') {
+            const titleTopText = target._titleTop.attribute.text;
+            target._titleTop.setAttributes({ text: '' });
+            animator.animate(target._titleTop, {
+                type: 'custom',
+                delay: symbolTime * 5,
+                duration: symbolTime * 4,
+                easing: 'linear',
+                to: { text: titleTopText },
+                custom: InputText
+            });
+            const titleBottomText = target._titleBottom.attribute.text;
+            target._titleBottom.setAttributes({ text: '' });
+            animator.animate(target._titleBottom, {
+                type: 'custom',
+                delay: symbolTime * 5,
+                duration: symbolTime * 4,
+                easing: 'linear',
+                to: { text: titleBottomText },
+                custom: InputText
+            });
+        }
+        else {
+            target._titleTop.setAttributes({ dy: target._titleTop.AABBBounds.height() + 10 });
+            animator.animate(target._titleTop, {
+                type: 'to',
+                to: {
+                    dy: 0
+                },
+                delay: symbolTime * 5,
+                duration: symbolTime * 4,
+                easing: 'linear'
+            });
+            target._titleBottom.setAttributes({ dy: -(10 + target._titleBottom.AABBBounds.height()) });
+            animator.animate(target._titleBottom, {
+                type: 'to',
+                to: {
+                    dy: 0
+                },
+                delay: symbolTime * 5,
+                duration: symbolTime * 4,
+                easing: 'linear'
+            });
+        }
+        if (titlePanelType === 'scale') {
+            [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
+                var _a;
+                const scaleX = (_a = panel.attribute.scaleX) !== null && _a !== void 0 ? _a : 1;
+                panel.setAttributes({ scaleX: 0 });
+                animator.animate(panel, {
+                    type: 'to',
+                    to: {
+                        scaleX
+                    },
+                    duration,
+                    easing
+                });
+            });
+        }
+        else if (titlePanelType === 'stroke') {
+            [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
+                const b = panel.AABBBounds;
+                const totalLen = (b.width() + b.height()) * 2;
+                panel.setAttributes({ lineDash: [0, totalLen * 10] });
+                animator.animate(panel, {
+                    type: 'to',
+                    to: {
+                        lineDash: [totalLen, totalLen * 10]
+                    },
+                    duration,
+                    easing
+                });
+            });
+        }
+    }
+}
+class LabelItemDisappear extends AComponentAnimate {
+    onBind() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const target = this.target;
+        const { mode } = this.params;
+        if (mode === 'scale') {
+            animator.animate(target._symbolStart, {
+                type: 'to',
+                to: { scaleX: 0, scaleY: 0 },
+                duration,
+                easing
+            });
+        }
+        else {
+            animator.animate(target._line, {
+                type: 'to',
+                to: { clipRange: 0 },
+                duration,
+                easing
+            });
+            animator.animate(target._symbolStart, {
+                type: 'to',
+                to: { scaleX: 0, scaleY: 0 },
+                duration: duration / 2,
+                delay: duration / 2,
+                easing
+            });
+            animator.animate(target._symbolEnd, {
+                type: 'to',
+                to: { scaleX: 0, scaleY: 0 },
+                duration,
+                easing
+            });
+            animator.animate(target._titleTop, {
+                type: 'to',
+                to: { dy: target._titleTop.AABBBounds.height() + 10 },
+                duration: duration / 2,
+                easing
+            });
+            animator.animate(target._titleBottom, {
+                type: 'to',
+                to: { dy: -(10 + target._titleBottom.AABBBounds.height()) },
+                duration: duration / 2,
+                easing
+            });
+            animator.animate(target._symbolStartOuter, {
+                type: 'to',
+                to: { clipRange: 0 },
+                duration: duration / 2,
+                delay: duration / 2,
+                easing
+            });
+            animator.animate(target._titleTopPanel, {
+                type: 'to',
+                to: { scaleX: 0 },
+                duration,
+                easing
+            });
+            animator.animate(target._titleBottomPanel, {
+                type: 'to',
+                to: { scaleX: 0 },
+                duration,
+                easing
+            });
+        }
+    }
+}
+
+class PoptipAppear extends AComponentAnimate {
+    onBind() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const target = this.target;
+        const { wave } = this.params;
+        target.setAttributes({ scaleX: 0, scaleY: 0 });
+        animator.animate(target, {
+            type: 'to',
+            to: { scaleX: 1, scaleY: 1 },
+            duration: (duration / 3) * 2,
+            easing
+        });
+        target.titleShape &&
+            animator.animate(target.titleShape, {
+                type: 'custom',
+                to: { text: target.titleShape.attribute.text },
+                duration,
+                easing,
+                custom: InputText
+            });
+        target.contentShape &&
+            animator.animate(target.contentShape, {
+                type: 'custom',
+                to: { text: target.contentShape.attribute.text },
+                duration,
+                easing,
+                custom: InputText
+            });
+        if (wave) {
+            const dur = duration / 6;
+            animator.animate(target.group, {
+                timeSlices: [
+                    {
+                        duration: dur,
+                        effects: {
+                            type: 'to',
+                            to: { angle: wave },
+                            easing
+                        }
+                    },
+                    {
+                        duration: dur * 2,
+                        effects: {
+                            type: 'to',
+                            to: { angle: -wave },
+                            easing
+                        }
+                    },
+                    {
+                        duration: dur * 2,
+                        effects: {
+                            type: 'to',
+                            to: { angle: wave },
+                            easing
+                        }
+                    },
+                    {
+                        duration: dur,
+                        effects: {
+                            type: 'to',
+                            to: { angle: 0 },
+                            easing
+                        }
+                    }
+                ]
+            });
+        }
+    }
+}
+class PoptipDisappear extends AComponentAnimate {
+    onBind() {
+        const animator = createComponentAnimator(this.target);
+        this._animator = animator;
+        const duration = this.duration;
+        const easing = this.easing;
+        const target = this.target;
+        animator.animate(target, {
+            type: 'to',
+            to: { scaleX: 0, scaleY: 0 },
+            duration,
+            easing
         });
-        this.target.setAttributes(out);
     }
 }
 
@@ -3660,43 +4306,60 @@ class ScaleIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _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 = (_a = this.target.context.lastAttrs) !== null && _a !== void 0 ? _a : {};
-        switch ((_b = this.params) === null || _b === void 0 ? void 0 : _b.direction) {
+        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) {
             case 'x':
-                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 };
+                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'];
+                this._updateFunction = this.updateX;
                 break;
             case 'y':
-                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 };
+                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'];
+                this._updateFunction = this.updateY;
                 break;
             case 'xy':
             default:
-                from = { scaleX: (_g = fromAttrs.scaleX) !== null && _g !== void 0 ? _g : 0, scaleY: (_h = fromAttrs.scaleY) !== null && _h !== void 0 ? _h : 0 };
+                from = { scaleX: (_j = fromAttrs.scaleX) !== null && _j !== void 0 ? _j : 0, scaleY: (_k = fromAttrs.scaleY) !== null && _k !== void 0 ? _k : 0 };
                 to = {
-                    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
+                    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
                 };
+                this.propKeys = ['scaleX', 'scaleY'];
+                this._updateFunction = this.updateXY;
         }
         this.props = to;
-        this.propKeys = Object.keys(to);
-        this.animate.reSyncProps();
         this.from = from;
         this.to = to;
-        this.target.setAttributes(from);
+        Object.assign(this.target.attribute, from);
+        this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
     }
     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);
+    }
     onUpdate(end, ratio, out) {
-        this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-        });
-        this.target.setAttributes(out);
+        this._updateFunction(ratio);
+        this.target.addUpdatePositionTag();
     }
 }
 class ScaleOut extends ACustomAnimate {
@@ -3735,10 +4398,11 @@ class ScaleOut extends ACustomAnimate {
         super.onEnd(cb);
     }
     onUpdate(end, ratio, out) {
+        const attribute = this.target.attribute;
         this.propKeys.forEach(key => {
-            out[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
-        this.target.setAttributes(out);
+        this.target.addUpdatePositionTag();
     }
 }
 
@@ -3771,7 +4435,6 @@ class Update extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         const { diffAttrs = {} } = params;
         super(from, diffAttrs, duration, easing, params);
-        this.params = params;
     }
     update(end, ratio, out) {
         this.onStart();
@@ -3795,6 +4458,7 @@ class Update extends ACustomAnimate {
 }
 
 const registerCustomAnimate = () => {
+    AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
     AnimateExecutor.registerBuiltInAnimate('scaleIn', ScaleIn);
     AnimateExecutor.registerBuiltInAnimate('scaleOut', ScaleOut);
     AnimateExecutor.registerBuiltInAnimate('growHeightIn', GrowHeightIn);
@@ -3819,6 +4483,11 @@ const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('growRadiusOut', GrowRadiusOut);
     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);
 };
 
-export { ACustomAnimate, Animate, AnimateExecutor, AnimateMode, AnimateStatus, AnimateStepType, AnimationStateManager, AnimationStateStore, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, Step, TagPointsUpdate, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+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 };