@visactor/vrender-animate 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose } from '@visactor/vutils';
+import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, splitRect, splitArc, splitCircle, splitLine, splitPolygon, splitArea, splitPath, AttributeUpdateType, pathToBezierCurves, applyTransformOnBezierCurves, alignBezierCurves, findBestMorphingRotation, pointInterpolation, RichText, divideCubic } from '@visactor/vrender-core';
+import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isNil, isValidNumber, clamp, Point, pi, isNumber, isValid, isNumberClose, PointService } from '@visactor/vutils';
 
 class Easing {
     constructor() {
@@ -347,6 +347,7 @@ function noop() {
 }
 class Step {
     constructor(type, props, duration, easing) {
+        var _a;
         this._startTime = 0;
         this._hasFirstRun = false;
         this._syncAttributeUpdate = () => {
@@ -356,7 +357,7 @@ class Step {
         this.props = props;
         this.duration = duration;
         if (easing) {
-            this.easing = typeof easing === 'function' ? easing : Easing[easing];
+            this.easing = typeof easing === 'function' ? easing : (_a = Easing[easing]) !== null && _a !== void 0 ? _a : Easing.linear;
         }
         else {
             this.easing = Easing.linear;
@@ -477,7 +478,7 @@ class Step {
         const animate = this.animate;
         const target = this.target;
         target.animates.forEach((a) => {
-            if (a === animate || a.priority > animate.priority) {
+            if (a === animate || a.priority > animate.priority || a.priority === Infinity) {
                 return;
             }
             const fromProps = a.getStartProps();
@@ -550,6 +551,13 @@ class WaitStep extends Step {
     constructor(type, props, duration, easing) {
         super(type, props, duration, easing);
     }
+    onStart() {
+        super.onStart();
+    }
+    onFirstRun() {
+        const fromProps = this.getFromProps();
+        this.target.setAttributes(fromProps);
+    }
     update(end, ratio, out) {
         this.onStart();
     }
@@ -558,34 +566,55 @@ class WaitStep extends Step {
     }
 }
 
-class DefaultTimeline {
+class DefaultTimeline extends EventEmitter {
     get animateCount() {
-        return this.animates.length;
+        return this._animateCount;
     }
     constructor() {
-        this.animates = [];
+        super();
+        this.head = null;
+        this.tail = null;
+        this.animateMap = new Map();
+        this._animateCount = 0;
         this._playSpeed = 1;
         this._totalDuration = 0;
         this._startTime = 0;
         this._currentTime = 0;
-        this._endAnimatePtr = -1;
         this.id = Generator.GenAutoIncrementId();
-        this.animates = [];
         this.paused = false;
     }
     isRunning() {
-        return !this.paused && this._endAnimatePtr >= 0;
+        return !this.paused && this._animateCount > 0;
     }
     forEachAccessAnimate(cb) {
-        for (let i = 0; i <= this._endAnimatePtr; i++) {
-            cb(this.animates[i], i);
+        let current = this.head;
+        let index = 0;
+        while (current) {
+            const next = current.next;
+            cb(current.animate, index);
+            index++;
+            current = next;
         }
     }
     addAnimate(animate) {
-        this.animates.push(animate);
-        this._endAnimatePtr++;
-        this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr];
-        this.animates[this._endAnimatePtr] = animate;
+        const newNode = {
+            animate,
+            next: null,
+            prev: null
+        };
+        if (!this.head) {
+            this.head = newNode;
+            this.tail = newNode;
+        }
+        else {
+            if (this.tail) {
+                this.tail.next = newNode;
+                newNode.prev = this.tail;
+                this.tail = newNode;
+            }
+        }
+        this.animateMap.set(animate, newNode);
+        this._animateCount++;
         this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
     }
     pause() {
@@ -602,36 +631,57 @@ class DefaultTimeline {
         this._currentTime += scaledDelta;
         this.forEachAccessAnimate((animate, i) => {
             if (animate.status === AnimateStatus.END) {
-                this.removeAnimate(animate, true, i);
+                this.removeAnimate(animate, true);
             }
             else if (animate.status === AnimateStatus.RUNNING || animate.status === AnimateStatus.INITIAL) {
                 animate.advance(scaledDelta);
             }
         });
+        if (this._animateCount === 0) {
+            this.emit('animationEnd');
+        }
     }
     clear() {
         this.forEachAccessAnimate(animate => {
             animate.release();
         });
-        this.animates = [];
+        this.head = null;
+        this.tail = null;
+        this.animateMap.clear();
+        this._animateCount = 0;
         this._totalDuration = 0;
     }
-    removeAnimate(animate, release = true, index) {
-        if (this._endAnimatePtr < 0) {
+    removeAnimate(animate, release = true) {
+        const node = this.animateMap.get(animate);
+        if (!node) {
             return;
         }
         if (release) {
             animate._onRemove && animate._onRemove.forEach(cb => cb());
             animate.release();
         }
-        index = index !== null && index !== void 0 ? index : this.animates.indexOf(animate);
-        this.animates[index] = this.animates[this._endAnimatePtr];
-        this._endAnimatePtr--;
+        if (node.prev) {
+            node.prev.next = node.next;
+        }
+        else {
+            this.head = node.next;
+        }
+        if (node.next) {
+            node.next.prev = node.prev;
+        }
+        else {
+            this.tail = node.prev;
+        }
+        this.animateMap.delete(animate);
+        this._animateCount--;
+        if (animate.getStartTime() + animate.getDuration() >= this._totalDuration) {
+            this.recalculateTotalDuration();
+        }
         return;
     }
     recalculateTotalDuration() {
         this._totalDuration = 0;
-        this.animates.forEach(animate => {
+        this.forEachAccessAnimate(animate => {
             this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
         });
     }
@@ -885,8 +935,10 @@ class Animate {
             step.stop();
             step = step.next;
         }
+        if (this.status !== AnimateStatus.END) {
+            this.onEnd();
+        }
         this.status = AnimateStatus.END;
-        this.onEnd();
         if (!this.target) {
             return;
         }
@@ -957,7 +1009,7 @@ class Animate {
         return this;
     }
     advance(delta) {
-        var _a;
+        var _a, _b, _c;
         if (this.status === AnimateStatus.END) {
             console.warn('aaa 动画已经结束，不能推进');
             return;
@@ -968,7 +1020,8 @@ class Animate {
             return;
         }
         if (nextTime >= this._startTime + this._totalDuration) {
-            (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onEnd();
+            (_a = this._lastStep) === null || _a === void 0 ? void 0 : _a.onUpdate(true, 1, {});
+            (_b = this._lastStep) === null || _b === void 0 ? void 0 : _b.onEnd();
             this.onEnd();
             this.status = AnimateStatus.END;
             return;
@@ -1014,6 +1067,10 @@ class Animate {
         if (!targetStep) {
             return;
         }
+        if (targetStep !== this.lastRunStep) {
+            (_c = this.lastRunStep) === null || _c === void 0 ? void 0 : _c.onEnd();
+        }
+        this.lastRunStep = targetStep;
         const stepStartTime = targetStep.getStartTime();
         const stepDuration = targetStep.getDuration();
         const ratio = (cycleTime - stepStartTime) / stepDuration;
@@ -1021,6 +1078,7 @@ class Animate {
         targetStep.update(isEnd, ratio, {});
         if (isEnd) {
             targetStep.onEnd();
+            this.lastRunStep = null;
         }
     }
     updateDuration() {
@@ -1064,13 +1122,6 @@ class DefaultTicker extends EventEmitter {
         super();
         this.timelines = [];
         this.frameTimeHistory = [];
-        this.checkSkip = (delta) => {
-            if (this.stage.params.optimize.tickRenderMode === 'performance') {
-                return false;
-            }
-            const skip = delta < this.interval + (Math.random() - 0.5) * 2 * this._jitter;
-            return skip;
-        };
         this.handleTick = (handler, params) => {
             const { once = false } = params !== null && params !== void 0 ? params : {};
             if (this.ifCanStop()) {
@@ -1113,6 +1164,9 @@ class DefaultTicker extends EventEmitter {
         this.interval = 16;
         this.computeTimeOffsetAndJitter();
     }
+    bindStage(stage) {
+        this.stage = stage;
+    }
     computeTimeOffsetAndJitter() {
         this.timeOffset = Math.floor(Math.random() * this.interval);
         this._jitter = Math.min(Math.max(this.interval * 0.2, 6), this.interval * 0.7);
@@ -1238,19 +1292,25 @@ class DefaultTicker extends EventEmitter {
         this.tickerHandler = null;
         this.lastFrameTime = -1;
     }
+    checkSkip(delta) {
+        if (this.stage.params.optimize.tickRenderMode === 'performance') {
+            return false;
+        }
+        const skip = delta < this.interval + (Math.random() - 0.5) * 2 * this._jitter;
+        return skip;
+    }
 }
 
 class ManualTickHandler {
     constructor() {
         this.released = false;
-        this.startTime = -1;
         this.currentTime = -1;
     }
     tick(interval, cb) {
-        if (this.startTime < 0) {
-            this.startTime = 0;
+        if (this.currentTime < 0) {
+            this.currentTime = 0;
         }
-        this.currentTime = this.startTime + interval;
+        this.currentTime += interval;
         cb(this);
     }
     release() {
@@ -1259,8 +1319,20 @@ class ManualTickHandler {
     getTime() {
         return this.currentTime;
     }
+    tickTo(time, cb) {
+        if (this.currentTime < 0) {
+            this.currentTime = 0;
+        }
+        const interval = time - this.currentTime;
+        this.tick(interval, cb);
+    }
 }
 class ManualTicker extends DefaultTicker {
+    constructor(stage) {
+        super(stage);
+        this.lastFrameTime = 0;
+        this.status = STATUS.RUNNING;
+    }
     setupTickHandler() {
         const handler = new ManualTickHandler();
         if (this.tickerHandler) {
@@ -1269,9 +1341,33 @@ class ManualTicker extends DefaultTicker {
         this.tickerHandler = handler;
         return true;
     }
+    checkSkip(delta) {
+        return false;
+    }
     getTime() {
         return this.tickerHandler.getTime();
     }
+    tickAt(time) {
+        this.tickTo(time);
+    }
+    start(force = false) {
+        if (this.status === STATUS.RUNNING) {
+            return false;
+        }
+        if (!this.tickerHandler) {
+            return false;
+        }
+        if (!force) {
+            if (this.status === STATUS.PAUSE) {
+                return false;
+            }
+            if (this.ifCanStop()) {
+                return false;
+            }
+        }
+        this.status = STATUS.RUNNING;
+        return true;
+    }
 }
 
 function generatorPathEasingFunc(path) {
@@ -1367,6 +1463,30 @@ class AnimationTransitionRegistry {
             allowTransition: true,
             stopOriginalTransition: true
         }));
+        this.registerTransition('update', '*', () => ({
+            allowTransition: true,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('update', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('update', 'exit', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('state', '*', () => ({
+            allowTransition: true,
+            stopOriginalTransition: false
+        }));
+        this.registerTransition('state', 'disappear', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
+        this.registerTransition('state', 'exit', () => ({
+            allowTransition: true,
+            stopOriginalTransition: true
+        }));
     }
     isTransitionAllowed(fromState, toState, graphic) {
         var _a, _b, _c, _d;
@@ -1456,7 +1576,7 @@ class AnimateExecutor {
             }
         });
     }
-    parseParams(params, isTimeline) {
+    parseParams(params, isTimeline, child) {
         var _a, _b;
         const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
         const startTime = this.resolveValue(params.startTime, undefined, 0);
@@ -1464,59 +1584,57 @@ class AnimateExecutor {
         parsedParams.oneByOneDelay = 0;
         parsedParams.startTime = startTime;
         parsedParams.totalTime = totalTime;
-        const oneByOne = this.resolveValue(params.oneByOne, undefined, false);
+        const oneByOne = this.resolveValue(params.oneByOne, child, false);
         if (isTimeline) {
             const timeSlices = parsedParams.timeSlices;
             if (!isArray(timeSlices)) {
                 parsedParams.timeSlices = [timeSlices];
             }
             let sliceTime = 0;
-            parsedParams.timeSlices.forEach(slice => {
-                slice.delay = this.resolveValue(slice.delay, undefined, 0);
-                slice.delayAfter = this.resolveValue(slice.delayAfter, undefined, 0);
-                slice.duration = this.resolveValue(slice.duration, undefined, 300);
-                sliceTime += slice.delay + slice.duration + slice.delayAfter;
+            parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+                const delay = this.resolveValue(slice.delay, child, 0);
+                const delayAfter = this.resolveValue(slice.delayAfter, child, 0);
+                const duration = this.resolveValue(slice.duration, child, 300);
+                sliceTime += delay + duration + delayAfter;
+                return Object.assign(Object.assign({}, slice), { delay,
+                    delayAfter,
+                    duration });
             });
             let oneByOneDelay = 0;
-            let oneByOneTime = 0;
             if (oneByOne) {
-                oneByOneTime = Number(oneByOne);
-                oneByOneDelay = oneByOneTime;
+                oneByOneDelay = typeof oneByOne === 'number' ? oneByOne : oneByOne ? sliceTime : 0;
             }
-            parsedParams.oneByOne = oneByOneTime;
             parsedParams.oneByOneDelay = oneByOneDelay;
+            let scale = 1;
             if (totalTime) {
                 const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
-                const scale = totalTime ? totalTime / _totalTime : 1;
-                parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
-                    let effects = slice.effects;
-                    if (!Array.isArray(effects)) {
-                        effects = [effects];
-                    }
-                    return Object.assign(Object.assign({}, slice), { delay: slice.delay * scale, delayAfter: slice.delayAfter * scale, duration: slice.duration * scale, effects: effects.map(effect => {
-                            var _a, _b;
-                            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = effect.type) !== null && _b !== void 0 ? _b : 'fromTo'];
-                            const customType = custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0;
-                            return Object.assign(Object.assign({}, effect), { custom,
-                                customType });
-                        }) });
-                });
-                parsedParams.oneByOne = oneByOneTime * scale;
-                parsedParams.oneByOneDelay = oneByOneDelay * scale;
-                parsedParams.startTime = startTime * scale;
+                scale = totalTime ? totalTime / _totalTime : 1;
             }
+            parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+                let effects = slice.effects;
+                if (!Array.isArray(effects)) {
+                    effects = [effects];
+                }
+                return Object.assign(Object.assign({}, slice), { delay: slice.delay * scale, delayAfter: slice.delayAfter * scale, duration: slice.duration * scale, effects: effects.map(effect => {
+                        var _a, _b;
+                        const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = effect.type) !== null && _b !== void 0 ? _b : 'fromTo'];
+                        const customType = custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0;
+                        return Object.assign(Object.assign({}, effect), { custom,
+                            customType });
+                    }) });
+            });
+            parsedParams.oneByOneDelay = oneByOneDelay * scale;
+            parsedParams.startTime = startTime * scale;
         }
         else {
-            const delay = this.resolveValue(params.delay, undefined, 0);
-            const delayAfter = this.resolveValue(params.delayAfter, undefined, 0);
-            const duration = this.resolveValue(params.duration, undefined, 300);
+            const delay = this.resolveValue(params.delay, child, 0);
+            const delayAfter = this.resolveValue(params.delayAfter, child, 0);
+            const duration = this.resolveValue(params.duration, child, 300);
+            const loopTime = delay + delayAfter + duration;
             let oneByOneDelay = 0;
-            let oneByOneTime = 0;
             if (oneByOne) {
-                oneByOneTime = Number(oneByOne);
-                oneByOneDelay = duration + oneByOneTime;
+                oneByOneDelay = typeof oneByOne === 'number' ? oneByOne : oneByOne ? loopTime : 0;
             }
-            parsedParams.oneByOne = oneByOneTime;
             parsedParams.oneByOneDelay = oneByOneDelay;
             parsedParams.custom =
                 (_a = params.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[(_b = params.type) !== null && _b !== void 0 ? _b : 'fromTo'];
@@ -1532,7 +1650,6 @@ class AnimateExecutor {
                 parsedParams.delay = delay * scale;
                 parsedParams.delayAfter = delayAfter * scale;
                 parsedParams.duration = duration * scale;
-                parsedParams.oneByOne = oneByOneTime * scale;
                 parsedParams.oneByOneDelay = oneByOneDelay * scale;
                 parsedParams.startTime = startTime;
             }
@@ -1555,26 +1672,27 @@ class AnimateExecutor {
         let filteredChildren;
         if (isTimeline && params.partitioner) {
             filteredChildren = (filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren()).filter(child => {
-                var _a;
-                return params.partitioner((_a = child.context) === null || _a === void 0 ? void 0 : _a.data, child, {});
+                var _a, _b;
+                return params.partitioner((_b = (_a = child.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], child, {});
             });
         }
         if (isTimeline && params.sort) {
             filteredChildren = filteredChildren !== null && filteredChildren !== void 0 ? filteredChildren : this._target.getChildren();
             filteredChildren.sort((a, b) => {
-                var _a, _b;
-                return params.sort((_a = a.context) === null || _a === void 0 ? void 0 : _a.data, (_b = b.context) === null || _b === void 0 ? void 0 : _b.data, a, b, {});
+                var _a, _b, _c, _d;
+                return params.sort((_b = (_a = a.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], (_d = (_c = b.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], a, b, {});
             });
         }
-        const parsedParams = this.parseParams(params, isTimeline);
         const cb = isTimeline
             ? (child, index, count) => {
+                const parsedParams = this.parseParams(params, isTimeline, child);
                 const animate = this.executeTimelineItem(parsedParams, child, index, count);
                 if (animate) {
                     this._trackAnimation(animate);
                 }
             }
             : (child, index, count) => {
+                const parsedParams = this.parseParams(params, isTimeline, child);
                 const animate = this.executeTypeConfigItem(parsedParams, child, index, count);
                 if (animate) {
                     this._trackAnimation(animate);
@@ -1602,8 +1720,8 @@ class AnimateExecutor {
         if (datum && indexKey) {
             index = (_f = datum[indexKey]) !== null && _f !== void 0 ? _f : index;
         }
-        animate.startAt(startTime + delayValue);
-        const wait = index * oneByOneDelay;
+        animate.startAt(startTime);
+        const wait = index * oneByOneDelay + delayValue;
         wait > 0 && animate.wait(wait);
         let parsedFromProps = null;
         let props = params.to;
@@ -1620,13 +1738,17 @@ class AnimateExecutor {
             }
             from = parsedFromProps.from;
         }
-        this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
+        this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        let totalDelay = 0;
         if (oneByOneDelay) {
-            animate.wait(oneByOneDelay * (count - index - 1));
+            totalDelay = oneByOneDelay * (count - index - 1);
         }
         const delayAfterValue = isFunction(delayAfter) ? delayAfter((_h = (_g = graphic.context) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h[0], graphic, {}) : delayAfter;
         if (delayAfterValue > 0) {
-            animate.wait(delayAfterValue);
+            totalDelay += delayAfterValue;
+        }
+        if (totalDelay > 0) {
+            animate.wait(totalDelay);
         }
         if (loop && loop > 0) {
             animate.loop(loop);
@@ -1636,14 +1758,15 @@ class AnimateExecutor {
         }
         return animate;
     }
-    _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic) {
+    _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
         var _a, _b, _c, _d;
         if (custom && customType) {
             const customParams = this.resolveValue(customParameters, graphic, {});
             const objOptions = isFunction(options)
-                ? 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.call(null, (_b = (customParams && ((_a = customParams.data) === null || _a === void 0 ? void 0 : _a[0]))) !== null && _b !== void 0 ? _b : (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, customParams)
                 : options;
             customParams.options = objOptions;
+            customParams.controlOptions = controlOptions;
             if (customType === 1) {
                 this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams);
             }
@@ -1678,14 +1801,14 @@ class AnimateExecutor {
         }
         const slices = Array.isArray(timeSlices) ? timeSlices : [timeSlices];
         slices.forEach(slice => {
-            this.applyTimeSliceToAnimate(slice, animate, graphic);
+            this.applyTimeSliceToAnimate(slice, animate, graphic, controlOptions);
         });
         if (oneByOneDelay) {
             animate.wait(oneByOneDelay * (count - index - 1));
         }
         return animate;
     }
-    applyTimeSliceToAnimate(slice, animate, graphic) {
+    applyTimeSliceToAnimate(slice, animate, graphic, controlOptions) {
         var _a, _b, _c, _d;
         const { effects, duration = 300, delay = 0, delayAfter = 0 } = slice;
         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;
@@ -1695,7 +1818,7 @@ class AnimateExecutor {
         }
         const effectsArray = Array.isArray(effects) ? effects : [effects];
         effectsArray.forEach(effect => {
-            var _a, _b;
+            var _a;
             const { type = 'fromTo', channel, customParameters, easing = 'linear', options } = effect;
             let parsedFromProps = null;
             let props = effect.to;
@@ -1713,8 +1836,8 @@ class AnimateExecutor {
                 from = parsedFromProps.from;
             }
             const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
-            const customType = (_b = effect.customType) !== null && _b !== void 0 ? _b : (custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0);
-            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
+            const customType = effect.customType;
+            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -1745,11 +1868,12 @@ class AnimateExecutor {
             };
         }
         if (!Array.isArray(channel)) {
-            Object.entries(channel).forEach(([key, config]) => {
-                var _a, _b;
+            Object.keys(channel).forEach(key => {
+                var _a, _b, _c, _d;
+                const config = channel[key];
                 if (config.to !== undefined) {
                     if (typeof config.to === 'function') {
-                        props[key] = config.to((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+                        props[key] = config.to((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {});
                     }
                     else {
                         props[key] = config.to;
@@ -1760,7 +1884,7 @@ class AnimateExecutor {
                         from = {};
                     }
                     if (typeof config.from === 'function') {
-                        from[key] = config.from((_b = graphic.context) === null || _b === void 0 ? void 0 : _b.data, graphic, {});
+                        from[key] = config.from((_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, {});
                     }
                     else {
                         from[key] = config.from;
@@ -1783,12 +1907,12 @@ class AnimateExecutor {
         };
     }
     resolveValue(value, graphic, defaultValue) {
-        var _a;
+        var _a, _b;
         if (value === undefined) {
             return defaultValue;
         }
         if (typeof value === 'function' && graphic) {
-            return value((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
+            return value((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, {});
         }
         return value;
     }
@@ -2057,13 +2181,13 @@ class AnimateExtension {
     createTicker(stage) {
         return new DefaultTicker(stage);
     }
-    setFinalAttribute(finalAttribute) {
+    setFinalAttributes(finalAttribute) {
         if (!this.finalAttribute) {
             this.finalAttribute = {};
         }
         Object.assign(this.finalAttribute, finalAttribute);
     }
-    initFinalAttribute(finalAttribute) {
+    initFinalAttributes(finalAttribute) {
         this.finalAttribute = finalAttribute;
     }
     initAnimateExecutor() {
@@ -2086,6 +2210,12 @@ class AnimateExtension {
     getFinalAttribute() {
         return this.finalAttribute;
     }
+    getGraphicAttribute(key, prev = false) {
+        if (!prev && this.finalAttribute) {
+            return this.finalAttribute[key];
+        }
+        return this.attribute[key];
+    }
 }
 
 function registerAnimate() {
@@ -2386,6 +2516,471 @@ class IncreaseCount extends ACustomAnimate {
     }
 }
 
+const DefaultMorphingAnimateConfig = {
+    duration: 1000,
+    easing: 'quadInOut'
+};
+
+const transformKeys = [
+    'x',
+    'y',
+    'dx',
+    'dy',
+    'scaleX',
+    'scaleY',
+    'angle',
+    'anchor',
+    'postMatrix',
+    'scrollX',
+    'scrollY'
+];
+const isTransformKey = (key) => {
+    return transformKeys.includes(key);
+};
+
+const interpolateOtherAttrs = (attrs, out, ratio) => {
+    attrs.forEach(entry => {
+        if (Number.isFinite(entry.to)) {
+            out[entry.key] = entry.from + (entry.to - entry.from) * ratio;
+        }
+        else if (entry.key === 'fill' || entry.key === 'stroke') {
+            const color = interpolateColor(entry.from, entry.to, ratio, false);
+            if (color) {
+                out[entry.key] = color;
+            }
+        }
+    });
+};
+const interpolateMorphingData = (morphingData, path, ratio) => {
+    const tmpArr = [];
+    const newCp = [];
+    path.clear();
+    for (let i = 0; i < morphingData.length; i++) {
+        const item = morphingData[i];
+        const from = item.from;
+        const to = item.to;
+        const angle = item.rotation * ratio;
+        const fromCp = item.fromCp;
+        const toCp = item.toCp;
+        const sa = Math.sin(angle);
+        const ca = Math.cos(angle);
+        newCp[0] = fromCp[0] + (toCp[0] - fromCp[0]) * ratio;
+        newCp[1] = fromCp[1] + (toCp[1] - fromCp[1]) * ratio;
+        for (let m = 0; m < from.length; m += 2) {
+            const x0 = from[m];
+            const y0 = from[m + 1];
+            const x1 = to[m];
+            const y1 = to[m + 1];
+            const x = x0 * (1 - ratio) + x1 * ratio;
+            const y = y0 * (1 - ratio) + y1 * ratio;
+            tmpArr[m] = x * ca - y * sa + newCp[0];
+            tmpArr[m + 1] = x * sa + y * ca + newCp[1];
+        }
+        let x0 = tmpArr[0];
+        let y0 = tmpArr[1];
+        path.moveTo(x0, y0);
+        for (let m = 2; m < from.length; m += 6) {
+            const x1 = tmpArr[m];
+            const y1 = tmpArr[m + 1];
+            const x2 = tmpArr[m + 2];
+            const y2 = tmpArr[m + 3];
+            const x3 = tmpArr[m + 4];
+            const y3 = tmpArr[m + 5];
+            if (x0 === x1 && y0 === y1 && x2 === x3 && y2 === y3) {
+                path.lineTo(x3, y3);
+            }
+            else {
+                path.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+            }
+            x0 = x3;
+            y0 = y3;
+        }
+    }
+};
+const parseMorphingData = (fromPath, toPath, config) => {
+    const fromBezier = fromPath ? pathToBezierCurves(fromPath) : [];
+    const toBezier = pathToBezierCurves(toPath);
+    if (config && fromBezier) {
+        config.fromTransform && applyTransformOnBezierCurves(fromBezier, config.fromTransform.clone().getInverse());
+        applyTransformOnBezierCurves(fromBezier, config.toTransfrom);
+    }
+    const [fromBezierCurves, toBezierCurves] = alignBezierCurves(fromBezier, toBezier);
+    return fromPath
+        ? findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI)
+        : toBezierCurves.map((to, index) => {
+            return {
+                from: fromBezierCurves[index],
+                to,
+                fromCp: [0, 0],
+                toCp: [0, 0],
+                rotation: 0
+            };
+        });
+};
+const validateOtherAttrs = [
+    'fill',
+    'fillOpacity',
+    'shadowBlur',
+    'shadowColor',
+    'shadowOffsetX',
+    'shadowOffsetY',
+    'stroke',
+    'strokeOpacity',
+    'lineDashOffset'
+];
+const parseOtherAnimateAttrs = (fromAttrs, toAttrs) => {
+    if (!fromAttrs || !toAttrs) {
+        return null;
+    }
+    const res = [];
+    let hasAttr = false;
+    Object.keys(fromAttrs).forEach(fromKey => {
+        if (!validateOtherAttrs.includes(fromKey)) {
+            return;
+        }
+        const toValue = toAttrs[fromKey];
+        if (!isNil(toValue) && !isNil(fromAttrs[fromKey]) && toValue !== fromAttrs[fromKey]) {
+            if (fromKey === 'fill' || fromKey === 'stroke') {
+                const parseColor = (color) => {
+                    return typeof color === 'string' ? ColorStore.Get(color, ColorType.Color255) : color;
+                };
+                res.push({
+                    from: isArray(fromAttrs[fromKey])
+                        ? fromAttrs[fromKey].map(parseColor)
+                        : parseColor(fromAttrs[fromKey]),
+                    to: isArray(toValue) ? toValue.map(parseColor) : parseColor(toValue),
+                    key: fromKey
+                });
+            }
+            else {
+                res.push({ from: fromAttrs[fromKey], to: toValue, key: fromKey });
+            }
+            hasAttr = true;
+        }
+    });
+    return hasAttr ? res : null;
+};
+class MorphingPath extends ACustomAnimate {
+    constructor(config, duration, easing) {
+        super({}, {}, duration, easing);
+        this.morphingData = config.morphingData;
+        this.otherAttrs = config.otherAttrs;
+        this.saveOnEnd = config.saveOnEnd;
+    }
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.createPathProxy();
+        this.onUpdate(false, 0, this.target.attribute);
+    }
+    onEnd() {
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        const target = this.target;
+        const pathProxy = typeof target.pathProxy === 'function' ? target.pathProxy(target.attribute) : target.pathProxy;
+        interpolateMorphingData(this.morphingData, pathProxy, ratio);
+        if (this.otherAttrs && this.otherAttrs.length) {
+            interpolateOtherAttrs(this.otherAttrs, out, ratio);
+        }
+        this.target.setAttributes(out);
+        if (end && !this.saveOnEnd) {
+            this.target.pathProxy = null;
+        }
+    }
+}
+const morphPath = (fromGraphic, toGraphic, animationConfig, fromGraphicTransform) => {
+    var _a, _b, _c;
+    if (fromGraphic && (!fromGraphic.valid || !fromGraphic.toCustomPath)) {
+        if (__DEV__) {
+            console.error(fromGraphic, ' is not validate');
+        }
+        return null;
+    }
+    if (!toGraphic.valid || !toGraphic.toCustomPath) {
+        if (__DEV__) {
+            console.error(toGraphic, ' is not validate');
+        }
+        return null;
+    }
+    let fromTransform = fromGraphic === null || fromGraphic === void 0 ? void 0 : fromGraphic.globalTransMatrix;
+    if (fromGraphicTransform && fromTransform) {
+        fromTransform = fromGraphicTransform
+            .clone()
+            .multiply(fromTransform.a, fromTransform.b, fromTransform.c, fromTransform.d, fromTransform.e, fromTransform.f);
+    }
+    const morphingData = parseMorphingData((_a = fromGraphic === null || fromGraphic === void 0 ? void 0 : fromGraphic.toCustomPath) === null || _a === void 0 ? void 0 : _a.call(fromGraphic), toGraphic.toCustomPath(), {
+        fromTransform,
+        toTransfrom: toGraphic.globalTransMatrix
+    });
+    const attrs = parseOtherAnimateAttrs(fromGraphic === null || fromGraphic === void 0 ? void 0 : fromGraphic.attribute, toGraphic.attribute);
+    const animate = toGraphic.animate(animationConfig);
+    if (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.delay) {
+        animate.wait(animationConfig.delay);
+    }
+    const morphingPath = new MorphingPath({ morphingData, otherAttrs: attrs }, (_b = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) !== null && _b !== void 0 ? _b : DefaultMorphingAnimateConfig.duration, (_c = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.easing) !== null && _c !== void 0 ? _c : DefaultMorphingAnimateConfig.easing);
+    animate.play(morphingPath);
+    return animate;
+};
+const oneToMultiMorph = (fromGraphic, toGraphics, animationConfig) => {
+    var _a;
+    const validateToGraphics = toGraphics.filter(graphic => graphic && graphic.toCustomPath && graphic.valid);
+    if (!validateToGraphics.length) {
+        if (__DEV__) {
+            console.error(validateToGraphics, ' is not validate');
+        }
+    }
+    if (!fromGraphic.valid || !fromGraphic.toCustomPath) {
+        if (__DEV__) {
+            console.error(fromGraphic, ' is not validate');
+        }
+    }
+    const childGraphics = ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.splitPath) === 'clone' ? cloneGraphic : (_a = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.splitPath) !== null && _a !== void 0 ? _a : splitGraphic)(fromGraphic, validateToGraphics.length, false);
+    const oldOnEnd = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.onEnd;
+    let count = validateToGraphics.length;
+    const onEachEnd = () => {
+        count--;
+        if (count === 0 && oldOnEnd) {
+            oldOnEnd();
+        }
+    };
+    validateToGraphics.forEach((toChild, index) => {
+        var _a;
+        const fromChild = childGraphics[index];
+        const delay = ((_a = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.delay) !== null && _a !== void 0 ? _a : 0) +
+            ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.individualDelay)
+                ? animationConfig.individualDelay(index, validateToGraphics.length, fromChild, toChild)
+                : 0);
+        morphPath(fromChild, toChild, Object.assign({}, animationConfig, { onEnd: onEachEnd, delay }), fromGraphic.globalTransMatrix);
+    });
+};
+class MultiToOneMorphingPath extends ACustomAnimate {
+    constructor(config, duration, easing) {
+        super({}, {}, duration, easing);
+        this.morphingData = config.morphingData;
+        this.otherAttrs = config.otherAttrs;
+    }
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.addPathProxy();
+    }
+    addPathProxy() {
+        const shadowRoot = this.target.shadowRoot;
+        shadowRoot.forEachChildren(child => {
+            child.createPathProxy();
+        });
+        this.onUpdate(false, 0, this.target.attribute);
+    }
+    clearPathProxy() {
+        const shadowRoot = this.target.shadowRoot;
+        shadowRoot.forEachChildren(child => {
+            child.pathProxy = null;
+        });
+    }
+    onEnd() {
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        const shadowRoot = this.target.shadowRoot;
+        shadowRoot.forEachChildren((child, index) => {
+            var _a;
+            interpolateMorphingData(this.morphingData[index], typeof child.pathProxy === 'function' ? child.pathProxy(child.attribute) : child.pathProxy, ratio);
+            if (((_a = this.otherAttrs) === null || _a === void 0 ? void 0 : _a[index]) && this.otherAttrs[index].length) {
+                interpolateOtherAttrs(this.otherAttrs[index], child.attribute, ratio);
+            }
+        });
+        if (end) {
+            this.clearPathProxy();
+            this.morphingData = null;
+        }
+    }
+}
+const parseShadowChildAttrs = (graphicAttrs) => {
+    const attrs = {};
+    Object.keys(graphicAttrs).forEach(key => {
+        if (!isTransformKey(key)) {
+            attrs[key] = graphicAttrs[key];
+        }
+    });
+    return attrs;
+};
+const appendShadowChildrenToGraphic = (graphic, children, count) => {
+    const childAttrs = parseShadowChildAttrs(graphic.attribute);
+    const shadowRoot = graphic.attachShadow();
+    if (children.length) {
+        shadowRoot.setTheme({
+            [children[0].type]: childAttrs
+        });
+        children.forEach(element => {
+            element.setAttributes({ pickable: false });
+            shadowRoot.appendChild(element);
+        });
+    }
+    else {
+        const box = graphic.AABBBounds;
+        const width = box.width();
+        const height = box.height();
+        shadowRoot.setTheme({
+            rect: childAttrs
+        });
+        new Array(count).fill(0).forEach(el => {
+            const child = application.graphicService.creator.rect({
+                x: 0,
+                y: 0,
+                width,
+                height: height,
+                pickable: false
+            });
+            shadowRoot.appendChild(child);
+            children.push(child);
+        });
+    }
+};
+const cloneGraphic = (graphic, count, needAppend) => {
+    const children = [];
+    const childAttrs = needAppend ? null : parseShadowChildAttrs(graphic.attribute);
+    const path = graphic.toCustomPath();
+    for (let i = 0; i < count; i++) {
+        const element = {
+            path: new CustomPath2D().fromCustomPath2D(path)
+        };
+        children.push(application.graphicService.creator.path(needAppend ? element : Object.assign({}, childAttrs, element)));
+    }
+    if (needAppend) {
+        appendShadowChildrenToGraphic(graphic, children, count);
+    }
+    return children;
+};
+const splitGraphic = (graphic, count, needAppend) => {
+    const children = [];
+    const childAttrs = needAppend ? null : parseShadowChildAttrs(graphic.attribute);
+    if (graphic.type === 'rect') {
+        const childrenAttrs = splitRect(graphic, count);
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.rect(needAppend ? element : Object.assign({}, childAttrs, element)));
+        });
+    }
+    else if (graphic.type === 'arc') {
+        const childrenAttrs = splitArc(graphic, count);
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.arc(needAppend ? element : Object.assign({}, childAttrs, element)));
+        });
+    }
+    else if (graphic.type === 'circle') {
+        const childrenAttrs = splitCircle(graphic, count);
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.arc(needAppend ? element : Object.assign({}, childAttrs, element)));
+        });
+    }
+    else if (graphic.type === 'line') {
+        const childrenAttrs = splitLine(graphic, count);
+        const defaultSymbol = { size: 10, symbolType: 'circle' };
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.symbol(needAppend ? Object.assign({}, element, defaultSymbol) : Object.assign({}, childAttrs, element, defaultSymbol)));
+        });
+    }
+    else if (graphic.type === 'polygon') {
+        const childrenAttrs = splitPolygon(graphic, count);
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.polygon(needAppend ? element : Object.assign({}, childAttrs, element)));
+        });
+    }
+    else if (graphic.type === 'area') {
+        const childrenAttrs = splitArea(graphic, count);
+        childrenAttrs.forEach(element => {
+            children.push(application.graphicService.creator.polygon(needAppend ? element : Object.assign({}, childAttrs, element)));
+        });
+    }
+    else if (graphic.type === 'path') {
+        const childrenAttrs = splitPath(graphic, count);
+        childrenAttrs.forEach(element => {
+            if ('path' in element) {
+                children.push(application.graphicService.creator.path(needAppend ? element : Object.assign({}, childAttrs, element)));
+            }
+            else {
+                children.push(application.graphicService.creator.polygon(needAppend ? element : Object.assign({}, childAttrs, element)));
+            }
+        });
+    }
+    if (needAppend) {
+        appendShadowChildrenToGraphic(graphic, children, count);
+    }
+    return children;
+};
+const multiToOneMorph = (fromGraphics, toGraphic, animationConfig) => {
+    var _a, _b, _c;
+    const validateFromGraphics = fromGraphics.filter(graphic => graphic.toCustomPath && graphic.valid);
+    if (!validateFromGraphics.length) {
+        if (__DEV__) {
+            console.error(fromGraphics, ' is not validate');
+        }
+    }
+    if (!toGraphic.valid || !toGraphic.toCustomPath) {
+        if (__DEV__) {
+            console.error(toGraphic, ' is not validate');
+        }
+    }
+    const childGraphics = ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.splitPath) === 'clone' ? cloneGraphic : (_a = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.splitPath) !== null && _a !== void 0 ? _a : splitGraphic)(toGraphic, validateFromGraphics.length, true);
+    const toAttrs = toGraphic.attribute;
+    toGraphic.setAttribute('visible', false);
+    const morphingData = validateFromGraphics.map((graphic, index) => {
+        return parseMorphingData(graphic.toCustomPath(), childGraphics[index].toCustomPath(), {
+            fromTransform: graphic.globalTransMatrix,
+            toTransfrom: childGraphics[index].globalTransMatrix
+        });
+    });
+    const otherAttrs = validateFromGraphics.map((graphic, index) => {
+        return parseOtherAnimateAttrs(graphic.attribute, toAttrs);
+    });
+    if (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.individualDelay) {
+        const oldOnEnd = animationConfig.onEnd;
+        let count = validateFromGraphics.length;
+        const onEachEnd = () => {
+            count--;
+            if (count === 0) {
+                toGraphic.setAttributes({ visible: true, ratio: null }, false, {
+                    type: AttributeUpdateType.ANIMATE_END
+                });
+                toGraphic.detachShadow();
+                if (oldOnEnd) {
+                    oldOnEnd();
+                }
+            }
+        };
+        childGraphics.forEach((to, index) => {
+            var _a, _b, _c;
+            const delay = ((_a = animationConfig.delay) !== null && _a !== void 0 ? _a : 0) +
+                animationConfig.individualDelay(index, validateFromGraphics.length, fromGraphics[index], to);
+            const animate = to.animate(Object.assign({}, animationConfig, { onEnd: onEachEnd }));
+            animate.wait(delay);
+            animate.play(new MorphingPath({
+                morphingData: morphingData[index],
+                saveOnEnd: true,
+                otherAttrs: otherAttrs[index]
+            }, (_b = animationConfig.duration) !== null && _b !== void 0 ? _b : DefaultMorphingAnimateConfig.duration, (_c = animationConfig.easing) !== null && _c !== void 0 ? _c : DefaultMorphingAnimateConfig.easing));
+        });
+    }
+    else {
+        const oldOnEnd = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.onEnd;
+        const config = animationConfig ? Object.assign({}, animationConfig) : {};
+        config.onEnd = () => {
+            toGraphic.setAttribute('visible', true, false, { type: AttributeUpdateType.ANIMATE_END });
+            toGraphic.detachShadow();
+            if (oldOnEnd) {
+                oldOnEnd();
+            }
+        };
+        const animate = toGraphic.animate(config);
+        if (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.delay) {
+            animate.wait(animationConfig.delay);
+        }
+        animate.play(new MultiToOneMorphingPath({ morphingData, otherAttrs }, (_b = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) !== null && _b !== void 0 ? _b : DefaultMorphingAnimateConfig.duration, (_c = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.easing) !== null && _c !== void 0 ? _c : DefaultMorphingAnimateConfig.easing));
+    }
+};
+
 class InputText extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
@@ -2482,7 +3077,7 @@ class InputText extends ACustomAnimate {
 
 class ClipGraphicAnimate extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
-        super(null, null, duration, easing, params);
+        super(null, {}, duration, easing, params);
         this.clipFromAttribute = from;
         this.clipToAttribute = to;
         this._group = params === null || params === void 0 ? void 0 : params.group;
@@ -2749,6 +3344,14 @@ class TagPointsUpdate extends ACustomAnimate {
         }
     }
     onUpdate(end, ratio, out) {
+        if (end) {
+            Object.keys(this.to).forEach(k => {
+                this.target.attribute[k] = this.to[k];
+            });
+            this.target.addUpdatePositionTag();
+            this.target.addUpdateShapeAndBoundsTag();
+            return;
+        }
         this.points = this.points.map((point, index) => {
             const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
             newPoint.context = point.context;
@@ -2776,7 +3379,7 @@ class TagPointsUpdate extends ACustomAnimate {
                 start = end;
                 return Object.assign(Object.assign({}, segment), { points });
             });
-            this.target.attribute.points = segments;
+            this.target.attribute.segments = segments;
         }
         else {
             this.target.attribute.points = this.points;
@@ -2791,29 +3394,28 @@ class CommonIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a;
+        var _a, _b, _c;
         super.onBind();
         const attrs = this.target.getFinalAttribute();
         const fromAttrs = (_a = this.target.attribute) !== null && _a !== void 0 ? _a : {};
         const to = {};
-        const from = {};
+        const from = (_b = this.from) !== null && _b !== void 0 ? _b : {};
         this.keys.forEach(key => {
-            var _a, _b;
+            var _a, _b, _c;
             to[key] = (_a = attrs === null || attrs === void 0 ? void 0 : attrs[key]) !== null && _a !== void 0 ? _a : 1;
-            from[key] = (_b = fromAttrs[key]) !== null && _b !== void 0 ? _b : 0;
+            from[key] = (_c = (_b = from[key]) !== null && _b !== void 0 ? _b : fromAttrs[key]) !== null && _c !== void 0 ? _c : 0;
         });
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.props = to;
         this.propKeys = this.keys;
         this.from = from;
         this.to = to;
-        this.target.setAttributes(from);
-    }
-    onEnd(cb) {
-        super.onEnd(cb);
+        if (((_c = this.params.controlOptions) === null || _c === void 0 ? void 0 : _c.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
     onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -2863,6 +3465,7 @@ class GroupFadeIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.keys = ['baseOpacity'];
+        this.from = { baseOpacity: 0 };
     }
 }
 class GroupFadeOut extends CommonOut {
@@ -2921,6 +3524,15 @@ class ClipIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.keys = ['clipRange'];
+        this.from = { clipRange: 0 };
+    }
+    onFirstRun() {
+        var _a;
+        super.onFirstRun();
+        const { clipDimension } = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.options) || {};
+        if (clipDimension) {
+            this.target.attribute.clipRangeByDimension = clipDimension;
+        }
     }
 }
 class ClipOut extends CommonOut {
@@ -2933,13 +3545,14 @@ class ClipOut extends CommonOut {
 class FadeIn extends CommonIn {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
-        this.keys = ['opacity'];
+        this.keys = ['opacity', 'fillOpacity', 'strokeOpacity'];
+        this.from = { opacity: 0, fillOpacity: 0, strokeOpacity: 0 };
     }
 }
 class FadeOut extends CommonOut {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
-        this.keys = ['opacity'];
+        this.keys = ['opacity', 'fillOpacity', 'strokeOpacity'];
     }
 }
 
@@ -3106,7 +3719,7 @@ class GrowAngleIn extends GrowAngleBase {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.target.setAttributes(fromAttrs);
         this.determineUpdateFunction();
@@ -3291,7 +3904,7 @@ class GrowCenterIn extends ACustomAnimate {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.target.setAttributes(fromAttrs);
     }
@@ -3351,7 +3964,7 @@ function growHeightInIndividual(graphic, options, animationParameters) {
     };
 }
 function growHeightInOverall(graphic, options, animationParameters) {
-    var _a;
+    var _a, _b, _c;
     const attrs = graphic.getFinalAttribute();
     const y = attrs.y;
     const y1 = attrs.y1;
@@ -3362,7 +3975,8 @@ function growHeightInOverall(graphic, options, animationParameters) {
             overallValue = options.overall;
         }
         else if (animationParameters.group) {
-            overallValue = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
+            overallValue =
+                (_c = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : (_b = options.layoutRect) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : animationParameters.group.getBounds().height();
             animationParameters.groupHeight = overallValue;
         }
         else {
@@ -3398,7 +4012,7 @@ class GrowHeightIn extends ACustomAnimate {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.target.setAttributes(fromAttrs);
     }
@@ -3431,7 +4045,7 @@ function growHeightOutIndividual(graphic, options, animationParameters) {
     };
 }
 function growHeightOutOverall(graphic, options, animationParameters) {
-    var _a;
+    var _a, _b, _c;
     const attrs = graphic.getFinalAttribute();
     const y1 = attrs.y1;
     const height = attrs.height;
@@ -3441,7 +4055,8 @@ function growHeightOutOverall(graphic, options, animationParameters) {
             overallValue = options.overall;
         }
         else if (animationParameters.group) {
-            overallValue = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
+            overallValue =
+                (_c = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : (_b = options.layoutRect) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : animationParameters.group.getBounds().height();
             animationParameters.groupHeight = overallValue;
         }
         else {
@@ -3545,6 +4160,7 @@ class GworPointsBase extends ACustomAnimate {
 }
 class GrowPointsIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsIn(this.target, this.params.options, this.params);
@@ -3554,9 +4170,11 @@ class GrowPointsIn extends GworPointsBase {
             this.to = to;
             const finalAttribute = this.target.getFinalAttribute();
             if (finalAttribute) {
-                Object.assign(this.target.attribute, finalAttribute);
+                this.target.setAttributes(finalAttribute);
+            }
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
             }
-            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
@@ -3583,12 +4201,10 @@ const changePointsX = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     const points = attrs.points;
     return points.map((point) => {
-        var _a;
         if (options && options.orient === 'negative') {
-            let groupRight = animationParameters.width;
-            if (animationParameters.group) {
-                groupRight = (_a = animationParameters.groupWidth) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().width();
-                animationParameters.groupWidth = groupRight;
+            let groupRight = graphic.stage.viewWidth;
+            if (graphic.parent.parent.parent) {
+                groupRight = graphic.parent.parent.parent.AABBBounds.width();
             }
             return Object.assign(Object.assign({}, point), { x: groupRight, y: point.y, x1: groupRight, y1: point.y1, defined: point.defined !== false });
         }
@@ -3598,7 +4214,7 @@ const changePointsX = (graphic, options, animationParameters) => {
 const growPointsXIn = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
-        from: { points: changePointsX(graphic, options, animationParameters) },
+        from: { points: changePointsX(graphic, options) },
         to: { points: attrs.points }
     };
 };
@@ -3606,11 +4222,12 @@ const growPointsXOut = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
         from: { points: attrs.points },
-        to: { points: changePointsX(graphic, options, animationParameters) }
+        to: { points: changePointsX(graphic, options) }
     };
 };
 class GrowPointsXIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
@@ -3620,9 +4237,11 @@ class GrowPointsXIn extends GworPointsBase {
             this.to = to;
             const finalAttribute = this.target.getFinalAttribute();
             if (finalAttribute) {
-                Object.assign(this.target.attribute, finalAttribute);
+                this.target.setAttributes(finalAttribute);
+            }
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
             }
-            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
@@ -3649,12 +4268,10 @@ const changePointsY = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     const points = attrs.points;
     return points.map((point) => {
-        var _a;
         if (options && options.orient === 'negative') {
-            let groupBottom = animationParameters.height;
-            if (animationParameters.group) {
-                groupBottom = (_a = animationParameters.groupHeight) !== null && _a !== void 0 ? _a : animationParameters.group.getBounds().height();
-                animationParameters.groupHeight = groupBottom;
+            let groupBottom = graphic.stage.viewHeight;
+            if (graphic.parent.parent.parent) {
+                groupBottom = graphic.parent.parent.parent.AABBBounds.height();
             }
             return Object.assign(Object.assign({}, point), { x: point.x, y: groupBottom, x1: point.x1, y1: groupBottom, defined: point.defined !== false });
         }
@@ -3664,7 +4281,7 @@ const changePointsY = (graphic, options, animationParameters) => {
 const growPointsYIn = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
-        from: { points: changePointsY(graphic, options, animationParameters) },
+        from: { points: changePointsY(graphic, options) },
         to: { points: attrs.points }
     };
 };
@@ -3672,11 +4289,12 @@ const growPointsYOut = (graphic, options, animationParameters) => {
     const attrs = graphic.getFinalAttribute();
     return {
         from: { points: attrs.points },
-        to: { points: changePointsY(graphic, options, animationParameters) }
+        to: { points: changePointsY(graphic, options) }
     };
 };
 class GrowPointsYIn extends GworPointsBase {
     onBind() {
+        var _a;
         super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
@@ -3686,9 +4304,11 @@ class GrowPointsYIn extends GworPointsBase {
             this.to = to;
             const finalAttribute = this.target.getFinalAttribute();
             if (finalAttribute) {
-                Object.assign(this.target.attribute, finalAttribute);
+                this.target.setAttributes(finalAttribute);
+            }
+            if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+                this.target.setAttributes(from);
             }
-            this.target.setAttributes(from);
         }
         else {
             this.valid = false;
@@ -3802,7 +4422,7 @@ class GrowRadiusIn extends GrowPointsBase {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.target.setAttributes(fromAttrs);
     }
@@ -3931,7 +4551,7 @@ class GrowWidthIn extends ACustomAnimate {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.target.setAttributes(fromAttrs);
     }
@@ -4272,10 +4892,10 @@ class InputRichText extends ACustomAnimate {
         this.showCursor = false;
         this.cursorChar = '|';
         this.blinkCursor = true;
-        this.beforeText = '';
-        this.afterText = '';
         this.fadeInChars = false;
         this.fadeInDuration = 0.3;
+        this.strokeFirst = false;
+        this.strokeToFillRatio = 0.3;
         if ((params === null || params === void 0 ? void 0 : params.showCursor) !== undefined) {
             this.showCursor = params.showCursor;
         }
@@ -4285,18 +4905,18 @@ class InputRichText extends ACustomAnimate {
         if ((params === null || params === void 0 ? void 0 : params.blinkCursor) !== undefined) {
             this.blinkCursor = params.blinkCursor;
         }
-        if ((params === null || params === void 0 ? void 0 : params.beforeText) !== undefined) {
-            this.beforeText = params.beforeText;
-        }
-        if ((params === null || params === void 0 ? void 0 : params.afterText) !== undefined) {
-            this.afterText = params.afterText;
-        }
         if ((params === null || params === void 0 ? void 0 : params.fadeInChars) !== undefined) {
             this.fadeInChars = params.fadeInChars;
         }
         if ((params === null || params === void 0 ? void 0 : params.fadeInDuration) !== undefined) {
             this.fadeInDuration = params.fadeInDuration;
         }
+        if ((params === null || params === void 0 ? void 0 : params.strokeFirst) !== undefined) {
+            this.strokeFirst = params.strokeFirst;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.strokeToFillRatio) !== undefined) {
+            this.strokeToFillRatio = params.strokeToFillRatio;
+        }
     }
     onFirstRun() {
         const fromProps = this.getLastProps();
@@ -4345,11 +4965,30 @@ class InputRichText extends ACustomAnimate {
         }
         else {
             currentTextConfig = this.toTextConfig.slice(0, currentLength).map((item, index) => {
-                if (this.fadeInChars && 'text' in item) {
-                    const appearTime = (index / totalItems) * maxTextShowRatio;
-                    const fadeProgress = (ratio - appearTime) / this.fadeInDuration;
-                    const opacity = Math.max(0, Math.min(1, fadeProgress));
-                    return Object.assign(Object.assign({}, item), { opacity: opacity });
+                if ('text' in item) {
+                    const newItem = Object.assign({}, item);
+                    if (this.strokeFirst) {
+                        const appearTime = (index / totalItems) * maxTextShowRatio;
+                        const itemLifetime = Math.max(0, ratio - appearTime);
+                        const maxLifetime = 1 - appearTime;
+                        const fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));
+                        if ('fill' in newItem && newItem.fill) {
+                            newItem.stroke = newItem.fill;
+                            if (fillProgress < 1) {
+                                newItem.fillOpacity = fillProgress;
+                            }
+                        }
+                        if (this.fadeInChars) {
+                            const fadeProgress = Math.min(1, itemLifetime / (this.fadeInDuration * maxLifetime));
+                            newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
+                        }
+                    }
+                    else if (this.fadeInChars) {
+                        const appearTime = (index / totalItems) * maxTextShowRatio;
+                        const fadeProgress = (ratio - appearTime) / this.fadeInDuration;
+                        newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
+                    }
+                    return newItem;
                 }
                 return item;
             });
@@ -4958,7 +5597,7 @@ class ScaleIn extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         super.onBind();
         let from;
         let to;
@@ -4986,12 +5625,14 @@ class ScaleIn extends ACustomAnimate {
         }
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
         }
         this.props = to;
         this.from = from;
         this.to = to;
-        this.target.setAttributes(from);
+        if (((_l = this.params.controlOptions) === null || _l === void 0 ? void 0 : _l.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
+        }
     }
     onEnd(cb) {
         super.onEnd(cb);
@@ -5030,6 +5671,7 @@ class ScaleIn extends ACustomAnimate {
         if (this._updateFunction) {
             this._updateFunction(ratio);
             this.target.addUpdatePositionTag();
+            this.target.addUpdateBoundTag();
         }
     }
 }
@@ -5073,6 +5715,7 @@ class ScaleOut extends ACustomAnimate {
             attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
         this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
     }
 }
 
@@ -5227,6 +5870,155 @@ class SpinIn extends ACustomAnimate {
         this.target.addUpdateShapeAndBoundsTag();
     }
 }
+class StrokeIn extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.perimeter = 0;
+        this.originalAttributes = {};
+    }
+    onBind() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        super.onBind();
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.target.type === 'rect') {
+            const attr = this.target.attribute;
+            const width = (_a = attr.width) !== null && _a !== void 0 ? _a : 100;
+            const height = (_b = attr.height) !== null && _b !== void 0 ? _b : 100;
+            this.perimeter = 2 * (width + height);
+        }
+        else if (this.target.type === 'circle') {
+            const attr = this.target.attribute;
+            const radius = (_c = attr.radius) !== null && _c !== void 0 ? _c : 50;
+            this.perimeter = 2 * Math.PI * radius;
+        }
+        else if (this.target.type === 'ellipse') {
+            const attr = this.target.attribute;
+            const radiusX = (_d = attr.radiusX) !== null && _d !== void 0 ? _d : 50;
+            const radiusY = (_e = attr.radiusY) !== null && _e !== void 0 ? _e : 50;
+            this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        }
+        else {
+            this.perimeter = 1000;
+        }
+        const lineWidth = (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.lineWidth) !== null && _g !== void 0 ? _g : 2;
+        const strokeColor = (_j = (_h = this.params) === null || _h === void 0 ? void 0 : _h.strokeColor) !== null && _j !== void 0 ? _j : 'black';
+        const fromOpacity = (_l = (_k = this.params) === null || _k === void 0 ? void 0 : _k.fromOpacity) !== null && _l !== void 0 ? _l : 1;
+        const dashLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.dashLength) !== null && _o !== void 0 ? _o : this.perimeter;
+        const showFill = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.showFill) !== null && _q !== void 0 ? _q : false;
+        const fillOpacity = (_s = (_r = this.params) === null || _r === void 0 ? void 0 : _r.fillOpacity) !== null && _s !== void 0 ? _s : 0;
+        this.from = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: dashLength,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        this.to = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: 0,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        if (showFill) {
+            this.from.fillOpacity = fillOpacity;
+            this.to.fillOpacity = (_t = this.originalAttributes.fillOpacity) !== null && _t !== void 0 ? _t : 1;
+        }
+        else {
+            this.from.fillOpacity = 0;
+            this.to.fillOpacity = 0;
+        }
+        this.propKeys = ['lineDash', 'lineDashOffset', 'lineWidth', 'stroke', 'strokeOpacity', 'fillOpacity'];
+        this.props = this.to;
+        this.target.setAttributes(this.from);
+    }
+    onUpdate(end, ratio, out) {
+        var _a;
+        const attribute = this.target.attribute;
+        attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.showFill) {
+            attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio;
+        }
+    }
+    onEnd() {
+        var _a;
+        super.onEnd();
+        if (!((_a = this.params) === null || _a === void 0 ? void 0 : _a.showFill)) {
+            const originalAttrs = Object.assign({}, this.originalAttributes);
+            originalAttrs.fillOpacity = 0;
+            this.target.setAttributes(originalAttrs);
+        }
+    }
+}
+class StrokeOut extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.perimeter = 0;
+        this.originalAttributes = {};
+    }
+    onFirstRun() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.target.type === 'rect') {
+            const attr = this.target.attribute;
+            const width = (_a = attr.width) !== null && _a !== void 0 ? _a : 100;
+            const height = (_b = attr.height) !== null && _b !== void 0 ? _b : 100;
+            this.perimeter = 2 * (width + height);
+        }
+        else if (this.target.type === 'circle') {
+            const attr = this.target.attribute;
+            const radius = (_c = attr.radius) !== null && _c !== void 0 ? _c : 50;
+            this.perimeter = 2 * Math.PI * radius;
+        }
+        else if (this.target.type === 'ellipse') {
+            const attr = this.target.attribute;
+            const radiusX = (_d = attr.radiusX) !== null && _d !== void 0 ? _d : 50;
+            const radiusY = (_e = attr.radiusY) !== null && _e !== void 0 ? _e : 50;
+            this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
+        }
+        else {
+            this.perimeter = 1000;
+        }
+        const lineWidth = (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.lineWidth) !== null && _g !== void 0 ? _g : 2;
+        const strokeColor = (_j = (_h = this.params) === null || _h === void 0 ? void 0 : _h.strokeColor) !== null && _j !== void 0 ? _j : 'black';
+        const fromOpacity = (_l = (_k = this.params) === null || _k === void 0 ? void 0 : _k.fromOpacity) !== null && _l !== void 0 ? _l : 1;
+        const dashLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.dashLength) !== null && _o !== void 0 ? _o : this.perimeter;
+        const showFill = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.showFill) !== null && _q !== void 0 ? _q : false;
+        this.from = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: 0,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        this.to = {
+            lineDash: [dashLength, dashLength],
+            lineDashOffset: -dashLength,
+            lineWidth,
+            stroke: strokeColor,
+            strokeOpacity: fromOpacity
+        };
+        if (showFill) {
+            this.from.fillOpacity = (_r = this.originalAttributes.fillOpacity) !== null && _r !== void 0 ? _r : 1;
+            this.to.fillOpacity = 0;
+        }
+        else {
+            this.from.fillOpacity = 0;
+            this.to.fillOpacity = 0;
+        }
+        this.propKeys = ['lineDash', 'lineDashOffset', 'lineWidth', 'stroke', 'strokeOpacity', 'fillOpacity'];
+        this.props = this.to;
+        this.target.setAttributes(this.from);
+    }
+    onUpdate(end, ratio, out) {
+        var _a;
+        const attribute = this.target.attribute;
+        attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio;
+        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.showFill) {
+            attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio;
+        }
+    }
+}
 class MoveScaleIn extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         var _a;
@@ -5505,6 +6297,121 @@ class MoveRotateOut extends ACustomAnimate {
     onUpdate(end, ratio, out) {
     }
 }
+class PulseAnimate extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.originalAttributes = {};
+        this.pulseCount = 3;
+        this.pulseOpacity = 0.3;
+        this.pulseScale = 1.05;
+        this.pulseColor = null;
+        this.pulseColorIntensity = 0.2;
+        this.strokeOnly = false;
+        this.fillOnly = false;
+        this.useScale = true;
+        this.useOpacity = true;
+        this.useStroke = true;
+        this.useFill = true;
+        this.useColor = false;
+        this.originalFill = null;
+        this.originalStroke = null;
+        if ((params === null || params === void 0 ? void 0 : params.pulseCount) !== undefined) {
+            this.pulseCount = params.pulseCount;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseScale) !== undefined) {
+            this.pulseScale = params.pulseScale;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseColor) !== undefined) {
+            this.pulseColor = params.pulseColor;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.pulseColorIntensity) !== undefined) {
+            this.pulseColorIntensity = params.pulseColorIntensity;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.strokeOnly) !== undefined) {
+            this.strokeOnly = params.strokeOnly;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.fillOnly) !== undefined) {
+            this.fillOnly = params.fillOnly;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useScale) !== undefined) {
+            this.useScale = params.useScale;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useOpacity) !== undefined) {
+            this.useOpacity = params.useOpacity;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useStroke) !== undefined) {
+            this.useStroke = params.useStroke;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useFill) !== undefined) {
+            this.useFill = params.useFill;
+        }
+        if ((params === null || params === void 0 ? void 0 : params.useColor) !== undefined) {
+            this.useColor = params.useColor;
+        }
+    }
+    onBind() {
+        super.onBind();
+        this.originalAttributes = Object.assign({}, this.target.getAttributes());
+        if (this.useColor) {
+            this.originalFill = this.originalAttributes.fill || null;
+            this.originalStroke = this.originalAttributes.stroke || null;
+            if (!this.pulseColor) {
+                if (this.fillOnly && this.originalFill) {
+                    this.pulseColor = this.originalFill;
+                }
+                else if (this.strokeOnly && this.originalStroke) {
+                    this.pulseColor = this.originalStroke;
+                }
+                else if (this.originalFill) {
+                    this.pulseColor = this.originalFill;
+                }
+                else if (this.originalStroke) {
+                    this.pulseColor = this.originalStroke;
+                }
+                else {
+                    this.pulseColor = '#FFFFFF';
+                }
+            }
+        }
+    }
+    onUpdate(end, ratio, out) {
+        const angle = ratio * Math.PI * this.pulseCount;
+        const pulseValue = Math.abs(Math.sin(angle));
+        const attribute = this.target.attribute;
+        if (this.useOpacity) {
+            const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
+            if (this.useStroke) {
+                attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity;
+            }
+            if (this.useFill) {
+                attribute.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity;
+            }
+        }
+        if (this.useScale) {
+            const scale = 1 + (this.pulseScale - 1) * pulseValue;
+            attribute.scaleX = (this.originalAttributes.scaleX || 1) * scale;
+            attribute.scaleY = (this.originalAttributes.scaleY || 1) * scale;
+        }
+        if (this.useColor && this.pulseColor) {
+            this.applyColorPulse(attribute, pulseValue);
+        }
+        this.target.addUpdateShapeAndBoundsTag();
+        this.target.addUpdatePositionTag();
+    }
+    applyColorPulse(attribute, pulseValue) {
+        const colorRatio = this.pulseColorIntensity * pulseValue;
+        if (this.useFill && this.originalFill && this.pulseColor) {
+            attribute.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, true);
+        }
+        if (this.useStroke && this.originalStroke && this.pulseColor) {
+            attribute.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, true);
+        }
+    }
+    onEnd() {
+        super.onEnd();
+        this.target.setAttributes(this.originalAttributes);
+    }
+}
 
 class Update extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
@@ -5515,8 +6422,8 @@ class Update extends ACustomAnimate {
         super.onBind();
         let { diffAttrs = {} } = (_a = this.target.context) !== null && _a !== void 0 ? _a : {};
         const { options } = this.params;
+        diffAttrs = Object.assign({}, diffAttrs);
         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];
             });
@@ -5545,25 +6452,19 @@ 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 : {};
+    var _a, _b, _c, _d;
+    const { offset = 0, orient, direction, point: pointOpt, excludeChannels = [], layoutRect = {} } = 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 = (_a = layoutRect.width) !== null && _a !== void 0 ? _a : graphic.stage.viewWidth;
+        changedY = (_b = layoutRect.height) !== null && _b !== void 0 ? _b : graphic.stage.viewHeight;
     }
     changedX += offset;
     changedY += offset;
-    const point = isFunction(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt;
+    const point = isFunction(pointOpt)
+        ? pointOpt.call(null, (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, animationParameters)
+        : pointOpt;
     const fromX = point && isValidNumber(point.x) ? point.x : changedX;
     const fromY = point && isValidNumber(point.y) ? point.y : changedY;
     const finalAttrs = graphic.getFinalAttribute();
@@ -5592,14 +6493,15 @@ const moveIn = (graphic, options, animationParameters) => {
     }
 };
 const moveOut = (graphic, options, animationParameters) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { offset = 0, orient, direction, point: pointOpt } = options !== null && options !== void 0 ? options : {};
-    const groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null;
-    const groupWidth = (_a = groupBounds === null || groupBounds === void 0 ? void 0 : groupBounds.width()) !== null && _a !== void 0 ? _a : animationParameters.width;
-    const groupHeight = (_b = groupBounds === null || groupBounds === void 0 ? void 0 : groupBounds.height()) !== null && _b !== void 0 ? _b : animationParameters.height;
+    const groupWidth = (_b = (_a = options.layoutRect) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : graphic.stage.viewWidth;
+    const groupHeight = (_d = (_c = options.layoutRect) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : graphic.stage.viewHeight;
     const changedX = (orient === 'negative' ? groupWidth : 0) + offset;
     const changedY = (orient === 'negative' ? groupHeight : 0) + offset;
-    const point = isFunction(pointOpt) ? pointOpt.call(null, graphic.getDatum(), graphic, animationParameters) : pointOpt;
+    const point = isFunction(pointOpt)
+        ? pointOpt.call(null, (_f = (_e = graphic.context) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f[0], graphic, animationParameters)
+        : pointOpt;
     const fromX = point && isValidNumber(point.x) ? point.x : changedX;
     const fromY = point && isValidNumber(point.y) ? point.y : changedY;
     switch (direction) {
@@ -5639,6 +6541,7 @@ class MoveBase extends ACustomAnimate {
 }
 class MoveIn extends MoveBase {
     onBind() {
+        var _a;
         super.onBind();
         const { from, to } = moveIn(this.target, this.params.options, this.params);
         this.props = to;
@@ -5647,9 +6550,11 @@ class MoveIn extends MoveBase {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
+        }
+        if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
         }
-        this.target.setAttributes(from);
     }
 }
 class MoveOut extends MoveBase {
@@ -5722,6 +6627,7 @@ class RotateBase extends ACustomAnimate {
 }
 class RotateIn extends RotateBase {
     onBind() {
+        var _a;
         super.onBind();
         const { from, to } = rotateIn(this.target, this.params.options);
         this.props = to;
@@ -5730,9 +6636,11 @@ class RotateIn extends RotateBase {
         this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
         if (finalAttribute) {
-            Object.assign(this.target.attribute, finalAttribute);
+            this.target.setAttributes(finalAttribute);
+        }
+        if (((_a = this.params.controlOptions) === null || _a === void 0 ? void 0 : _a.immediatelyApply) !== false) {
+            this.target.setAttributes(from);
         }
-        this.target.setAttributes(from);
     }
 }
 class RotateOut extends RotateBase {
@@ -5746,12 +6654,46 @@ class RotateOut extends RotateBase {
     }
 }
 
+class MotionPath extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        if (params) {
+            this.pathLength = params.path.getLength();
+            this.path = params.path;
+            this.distance = params.distance;
+            this.totalLength = this.distance * this.pathLength;
+            this.initAngle = (_a = params.initAngle) !== null && _a !== void 0 ? _a : 0;
+            this.changeAngle = !!params.changeAngle;
+            this.cb = params.cb;
+        }
+    }
+    onBind() {
+        this.from = { x: 0, y: 0 };
+        this.to = this.path.getAttrAt(this.totalLength).pos;
+        this.props = this.to;
+    }
+    onUpdate(end, ratio, out) {
+        const attrs = {};
+        const at = this.totalLength * ratio;
+        const { pos, angle } = this.path.getAttrAt(at);
+        attrs.x = pos.x;
+        attrs.y = pos.y;
+        if (this.changeAngle) {
+            attrs.angle = angle + this.initAngle;
+        }
+        this.cb && this.cb(this.from, this.to, ratio, this.target);
+        this.target.setAttributes(attrs);
+    }
+}
+
 class FromTo extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
         this.from = from !== null && from !== void 0 ? from : {};
     }
     onBind() {
+        var _a, _b;
         super.onBind();
         const finalAttribute = this.target.getFinalAttribute();
         Object.keys(this.from).forEach(key => {
@@ -5759,9 +6701,16 @@ class FromTo extends ACustomAnimate {
                 this.props[key] = finalAttribute[key];
             }
         });
+        if (((_a = this.target.context) === null || _a === void 0 ? void 0 : _a.animationState) === 'appear') {
+            if (finalAttribute) {
+                this.target.setAttributes(finalAttribute);
+            }
+        }
+        if (((_b = this.params.controlOptions) === null || _b === void 0 ? void 0 : _b.immediatelyApply) !== false) {
+            this.target.setAttributes(this.from);
+        }
     }
     onFirstRun() {
-        var _a;
         this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
         const startProps = this.animate.getStartProps();
         this.propKeys &&
@@ -5769,10 +6718,6 @@ class FromTo extends ACustomAnimate {
                 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) {
@@ -5797,6 +6742,244 @@ class FromTo extends ACustomAnimate {
     }
 }
 
+class StreamLight extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getEndProps() {
+        return {};
+    }
+    onStart() {
+        if (!this.target) {
+            return;
+        }
+        if (this.target.type === 'rect') {
+            this.onStartRect();
+        }
+        else if (this.target.type === 'line') {
+            this.onStartLineOrArea('line');
+        }
+        else if (this.target.type === 'area') {
+            this.onStartLineOrArea('area');
+        }
+    }
+    onStartLineOrArea(type) {
+        var _a;
+        const root = this.target.attachShadow();
+        const line = application.graphicService.creator[type](Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.attribute));
+        this[type] = line;
+        line.pathProxy = new CustomPath2D();
+        root.add(line);
+    }
+    onStartRect() {
+        var _a, _b, _c;
+        const root = this.target.attachShadow();
+        const isHorizontal = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.isHorizontal) !== null && _b !== void 0 ? _b : true;
+        const sizeAttr = isHorizontal ? 'height' : 'width';
+        const otherSizeAttr = isHorizontal ? 'width' : 'height';
+        const size = this.target.AABBBounds[sizeAttr]();
+        const y = isHorizontal ? 0 : this.target.AABBBounds.y1;
+        const rect = application.graphicService.creator.rect(Object.assign(Object.assign({ [sizeAttr]: size, fill: '#bcdeff', shadowBlur: 30, shadowColor: '#bcdeff' }, (_c = this.params) === null || _c === void 0 ? void 0 : _c.attribute), { x: 0, y, [otherSizeAttr]: 0 }));
+        this.rect = rect;
+        root.add(rect);
+    }
+    onBind() {
+        return;
+    }
+    onEnd() {
+        this.target.detachShadow();
+    }
+    onUpdate(end, ratio, out) {
+        if (this.rect) {
+            return this.onUpdateRect(end, ratio, out);
+        }
+        else if (this.line || this.area) {
+            return this.onUpdateLineOrArea(end, ratio, out);
+        }
+    }
+    onUpdateRect(end, ratio, out) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const isHorizontal = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.isHorizontal) !== null && _b !== void 0 ? _b : true;
+        const parentAttr = this.target.attribute;
+        if (isHorizontal) {
+            const parentWidth = (_d = (_c = parentAttr.width) !== null && _c !== void 0 ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) !== null && _d !== void 0 ? _d : 250;
+            const streamLength = (_f = (_e = this.params) === null || _e === void 0 ? void 0 : _e.streamLength) !== null && _f !== void 0 ? _f : parentWidth;
+            const maxLength = (_j = (_h = (_g = this.params) === null || _g === void 0 ? void 0 : _g.attribute) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : 60;
+            const startX = -maxLength;
+            const currentX = startX + (streamLength - startX) * ratio;
+            const x = Math.max(currentX, 0);
+            const w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX);
+            const width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+            this.rect.setAttributes({
+                x,
+                width,
+                dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+            }, false, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio,
+                    end
+                }
+            });
+        }
+        else {
+            const parentHeight = (_l = (_k = parentAttr.height) !== null && _k !== void 0 ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) !== null && _l !== void 0 ? _l : 250;
+            const streamLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.streamLength) !== null && _o !== void 0 ? _o : parentHeight;
+            const maxLength = (_r = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.attribute) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 60;
+            const startY = parentHeight;
+            const currentY = startY - (streamLength + maxLength) * ratio;
+            let y = Math.min(currentY, parentHeight);
+            const h = Math.min(parentHeight - currentY, maxLength);
+            let height;
+            if (y <= 0) {
+                height = Math.max(y + h, 0);
+                y = 0;
+            }
+            else {
+                height = h;
+            }
+            this.rect.setAttributes({
+                y,
+                height,
+                dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+            }, false, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio,
+                    end
+                }
+            });
+        }
+    }
+    onUpdateLineOrArea(end, ratio, out) {
+        const target = this.line || this.area;
+        if (!target) {
+            return;
+        }
+        const customPath = target.pathProxy;
+        const targetLine = this.target;
+        if (targetLine.cache || targetLine.cacheArea) {
+            this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out);
+        }
+        else {
+            this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
+        }
+        const targetAttrs = targetLine.attribute;
+        target.setAttributes(Object.assign({ stroke: targetAttrs.stroke }, target.attribute));
+        target.addUpdateBoundTag();
+    }
+    _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
+        var _a, _b;
+        customPath.clear();
+        if (g.type === 'line') {
+            let cache = g.cache;
+            if (!Array.isArray(cache)) {
+                cache = [cache];
+            }
+            const totalLen = cache.reduce((l, c) => l + c.getLength(), 0);
+            const curves = [];
+            cache.forEach((c) => {
+                c.curves.forEach((ci) => curves.push(ci));
+            });
+            return this._updateCurves(customPath, curves, totalLen, ratio);
+        }
+        else if (g.type === 'area' && ((_b = (_a = g.cacheArea) === null || _a === void 0 ? void 0 : _a.top) === null || _b === void 0 ? void 0 : _b.curves)) {
+            const cache = g.cacheArea;
+            const totalLen = cache.top.curves.reduce((a, b) => a + b.getLength(), 0);
+            return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
+        }
+    }
+    _updateCurves(customPath, curves, totalLen, ratio) {
+        var _a, _b;
+        const startLen = totalLen * ratio;
+        const endLen = Math.min(startLen + ((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength) !== null && _b !== void 0 ? _b : 10), totalLen);
+        let lastLen = 0;
+        let start = false;
+        for (let i = 0; i < curves.length; i++) {
+            if (curves[i].defined !== false) {
+                const curveItem = curves[i];
+                const len = curveItem.getLength();
+                const startPercent = 1 - (lastLen + len - startLen) / len;
+                let endPercent = 1 - (lastLen + len - endLen) / len;
+                let curveForStart;
+                if (lastLen < startLen && lastLen + len > startLen) {
+                    start = true;
+                    if (curveItem.p2 && curveItem.p3) {
+                        const [_, curve2] = divideCubic(curveItem, startPercent);
+                        customPath.moveTo(curve2.p0.x, curve2.p0.y);
+                        curveForStart = curve2;
+                    }
+                    else {
+                        const p = curveItem.getPointAt(startPercent);
+                        customPath.moveTo(p.x, p.y);
+                    }
+                }
+                if (lastLen < endLen && lastLen + len > endLen) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        if (curveForStart) {
+                            endPercent = (endLen - startLen) / curveForStart.getLength();
+                        }
+                        const [curve1] = divideCubic(curveForStart || curveItem, endPercent);
+                        customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+                    }
+                    else {
+                        const p = curveItem.getPointAt(endPercent);
+                        customPath.lineTo(p.x, p.y);
+                    }
+                    break;
+                }
+                else if (start) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        const curve = curveForStart || curveItem;
+                        customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+                    }
+                    else {
+                        customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+                    }
+                }
+                lastLen += len;
+            }
+        }
+    }
+    _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+        var _a, _b;
+        const { points, curveType } = line.attribute;
+        if (!points || points.length < 2 || curveType !== 'linear') {
+            return;
+        }
+        let totalLen = 0;
+        for (let i = 1; i < points.length; i++) {
+            totalLen += PointService.distancePP(points[i], points[i - 1]);
+        }
+        const startLen = totalLen * ratio;
+        const endLen = Math.min(startLen + ((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength) !== null && _b !== void 0 ? _b : 10), totalLen);
+        const nextPoints = [];
+        let lastLen = 0;
+        for (let i = 1; i < points.length; i++) {
+            const len = PointService.distancePP(points[i], points[i - 1]);
+            if (lastLen < startLen && lastLen + len > startLen) {
+                nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len));
+            }
+            if (lastLen < endLen && lastLen + len > endLen) {
+                nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
+                break;
+            }
+            else if (nextPoints.length) {
+                nextPoints.push(points[i]);
+            }
+            lastLen += len;
+        }
+        if (!nextPoints.length || nextPoints.length < 2) {
+            return;
+        }
+        customPath.clear();
+        customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
+        for (let i = 1; i < nextPoints.length; i++) {
+            customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
+        }
+    }
+}
+
 const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
     AnimateExecutor.registerBuiltInAnimate('fromTo', FromTo);
@@ -5842,11 +7025,16 @@ const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('spinIn', SpinIn);
     AnimateExecutor.registerBuiltInAnimate('moveScaleIn', MoveScaleIn);
     AnimateExecutor.registerBuiltInAnimate('moveRotateIn', MoveRotateIn);
+    AnimateExecutor.registerBuiltInAnimate('strokeIn', StrokeIn);
     AnimateExecutor.registerBuiltInAnimate('slideOut', SlideOut);
     AnimateExecutor.registerBuiltInAnimate('growOut', GrowOut);
     AnimateExecutor.registerBuiltInAnimate('spinOut', SpinOut);
     AnimateExecutor.registerBuiltInAnimate('moveScaleOut', MoveScaleOut);
     AnimateExecutor.registerBuiltInAnimate('moveRotateOut', MoveRotateOut);
+    AnimateExecutor.registerBuiltInAnimate('strokeOut', StrokeOut);
+    AnimateExecutor.registerBuiltInAnimate('pulse', PulseAnimate);
+    AnimateExecutor.registerBuiltInAnimate('MotionPath', MotionPath);
+    AnimateExecutor.registerBuiltInAnimate('streamLight', StreamLight);
 };
 
-export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, TagPointsUpdate, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MorphingPath, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, MultiToOneMorphingPath, OutputRichText, PoptipAppear, PoptipDisappear, PulseAnimate, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, StrokeIn, StrokeOut, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, morphPath, multiToOneMorph, oneToMultiMorph, registerAnimate, registerCustomAnimate, transitionRegistry };