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

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText, divideCubic } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, cloneDeep, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose, PointService } 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() {
@@ -567,32 +567,52 @@ class WaitStep extends Step {
 
 class DefaultTimeline {
     get animateCount() {
-        return this.animates.length;
+        return this._animateCount;
     }
     constructor() {
-        this.animates = [];
+        this.head = null;
+        this.tail = null;
+        this.animateMap = new Map();
+        this._animateCount = 0;
         this._playSpeed = 1;
         this._totalDuration = 0;
         this._startTime = 0;
         this._currentTime = 0;
-        this._endAnimatePtr = -1;
         this.id = Generator.GenAutoIncrementId();
-        this.animates = [];
         this.paused = false;
     }
     isRunning() {
-        return !this.paused && this._endAnimatePtr >= 0;
+        return !this.paused && this._animateCount > 0;
     }
     forEachAccessAnimate(cb) {
-        for (let i = 0; i <= this._endAnimatePtr; i++) {
-            cb(this.animates[i], i);
+        let current = this.head;
+        let index = 0;
+        while (current) {
+            const next = current.next;
+            cb(current.animate, index);
+            index++;
+            current = next;
         }
     }
     addAnimate(animate) {
-        this.animates.push(animate);
-        this._endAnimatePtr++;
-        this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr];
-        this.animates[this._endAnimatePtr] = animate;
+        const newNode = {
+            animate,
+            next: null,
+            prev: null
+        };
+        if (!this.head) {
+            this.head = newNode;
+            this.tail = newNode;
+        }
+        else {
+            if (this.tail) {
+                this.tail.next = newNode;
+                newNode.prev = this.tail;
+                this.tail = newNode;
+            }
+        }
+        this.animateMap.set(animate, newNode);
+        this._animateCount++;
         this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
     }
     pause() {
@@ -609,7 +629,7 @@ class DefaultTimeline {
         this._currentTime += scaledDelta;
         this.forEachAccessAnimate((animate, i) => {
             if (animate.status === AnimateStatus.END) {
-                this.removeAnimate(animate, true, i);
+                this.removeAnimate(animate, true);
             }
             else if (animate.status === AnimateStatus.RUNNING || animate.status === AnimateStatus.INITIAL) {
                 animate.advance(scaledDelta);
@@ -620,25 +640,43 @@ class DefaultTimeline {
         this.forEachAccessAnimate(animate => {
             animate.release();
         });
-        this.animates = [];
+        this.head = null;
+        this.tail = null;
+        this.animateMap.clear();
+        this._animateCount = 0;
         this._totalDuration = 0;
     }
-    removeAnimate(animate, release = true, index) {
-        if (this._endAnimatePtr < 0) {
+    removeAnimate(animate, release = true) {
+        const node = this.animateMap.get(animate);
+        if (!node) {
             return;
         }
         if (release) {
             animate._onRemove && animate._onRemove.forEach(cb => cb());
             animate.release();
         }
-        index = index !== null && index !== void 0 ? index : this.animates.indexOf(animate);
-        this.animates[index] = this.animates[this._endAnimatePtr];
-        this._endAnimatePtr--;
+        if (node.prev) {
+            node.prev.next = node.next;
+        }
+        else {
+            this.head = node.next;
+        }
+        if (node.next) {
+            node.next.prev = node.prev;
+        }
+        else {
+            this.tail = node.prev;
+        }
+        this.animateMap.delete(animate);
+        this._animateCount--;
+        if (animate.getStartTime() + animate.getDuration() >= this._totalDuration) {
+            this.recalculateTotalDuration();
+        }
         return;
     }
     recalculateTotalDuration() {
         this._totalDuration = 0;
-        this.animates.forEach(animate => {
+        this.forEachAccessAnimate(animate => {
             this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
         });
     }
@@ -892,8 +930,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;
         }
@@ -1077,13 +1117,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()) {
@@ -1126,6 +1159,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);
@@ -1251,19 +1287,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() {
@@ -1273,8 +1315,7 @@ class ManualTickHandler {
         return this.currentTime;
     }
     tickTo(time, cb) {
-        if (this.startTime < 0) {
-            this.startTime = 0;
+        if (this.currentTime < 0) {
             this.currentTime = 0;
         }
         const interval = time - this.currentTime;
@@ -1295,6 +1336,9 @@ class ManualTicker extends DefaultTicker {
         this.tickerHandler = handler;
         return true;
     }
+    checkSkip(delta) {
+        return false;
+    }
     getTime() {
         return this.tickerHandler.getTime();
     }
@@ -1507,7 +1551,7 @@ class AnimateExecutor {
         var _a, _b;
         const totalTime = this.resolveValue(params.totalTime, undefined, undefined);
         const startTime = this.resolveValue(params.startTime, undefined, 0);
-        const parsedParams = cloneDeep(params);
+        const parsedParams = Object.assign({}, params);
         parsedParams.oneByOneDelay = 0;
         parsedParams.startTime = startTime;
         parsedParams.totalTime = totalTime;
@@ -1518,19 +1562,19 @@ class AnimateExecutor {
                 parsedParams.timeSlices = [timeSlices];
             }
             let sliceTime = 0;
-            parsedParams.timeSlices.forEach(slice => {
-                slice.delay = this.resolveValue(slice.delay, child, 0);
-                slice.delayAfter = this.resolveValue(slice.delayAfter, child, 0);
-                slice.duration = this.resolveValue(slice.duration, child, 300);
-                sliceTime += slice.delay + slice.duration + slice.delayAfter;
+            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) {
@@ -1550,7 +1594,6 @@ class AnimateExecutor {
                             customType });
                     }) });
             });
-            parsedParams.oneByOne = oneByOneTime * scale;
             parsedParams.oneByOneDelay = oneByOneDelay * scale;
             parsedParams.startTime = startTime * scale;
         }
@@ -1558,13 +1601,11 @@ class AnimateExecutor {
             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'];
@@ -1580,7 +1621,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;
             }
@@ -1732,14 +1772,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;
@@ -1768,7 +1808,7 @@ class AnimateExecutor {
             }
             const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
             const customType = effect.customType;
-            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, null, options, type, graphic);
+            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -2447,6 +2487,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);
@@ -2543,7 +3048,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;
@@ -2984,6 +3489,14 @@ class ClipIn extends CommonIn {
         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 {
     constructor(from, to, duration, easing, params) {
@@ -2995,14 +3508,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.from = { opacity: 0 };
+        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'];
     }
 }
 
@@ -3414,7 +3927,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;
@@ -3425,7 +3938,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 {
@@ -3494,7 +4008,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;
@@ -3504,7 +4018,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 {
@@ -4340,10 +4855,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;
         }
@@ -4353,18 +4868,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();
@@ -4413,11 +4928,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;
             });
@@ -5100,6 +5634,7 @@ class ScaleIn extends ACustomAnimate {
         if (this._updateFunction) {
             this._updateFunction(ratio);
             this.target.addUpdatePositionTag();
+            this.target.addUpdateBoundTag();
         }
     }
 }
@@ -5143,6 +5678,7 @@ class ScaleOut extends ACustomAnimate {
             attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
         });
         this.target.addUpdatePositionTag();
+        this.target.addUpdateBoundTag();
     }
 }
 
@@ -5297,6 +5833,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;
@@ -5575,6 +6260,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) {
@@ -5615,18 +6415,18 @@ 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') {
-        changedX = graphic.stage.viewWidth;
-        changedY = graphic.stage.viewHeight;
+        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, (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, animationParameters)
+        ? 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;
@@ -5656,14 +6456,14 @@ 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 groupWidth = graphic.stage.viewWidth;
-    const groupHeight = graphic.stage.viewHeight;
+    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, (_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0], graphic, animationParameters)
+        ? 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;
@@ -6193,13 +6993,16 @@ const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('spinIn', SpinIn);
     AnimateExecutor.registerBuiltInAnimate('moveScaleIn', MoveScaleIn);
     AnimateExecutor.registerBuiltInAnimate('moveRotateIn', MoveRotateIn);
+    AnimateExecutor.registerBuiltInAnimate('strokeIn', StrokeIn);
     AnimateExecutor.registerBuiltInAnimate('slideOut', SlideOut);
     AnimateExecutor.registerBuiltInAnimate('growOut', GrowOut);
     AnimateExecutor.registerBuiltInAnimate('spinOut', SpinOut);
     AnimateExecutor.registerBuiltInAnimate('moveScaleOut', MoveScaleOut);
     AnimateExecutor.registerBuiltInAnimate('moveRotateOut', MoveRotateOut);
+    AnimateExecutor.registerBuiltInAnimate('strokeOut', StrokeOut);
+    AnimateExecutor.registerBuiltInAnimate('pulse', PulseAnimate);
     AnimateExecutor.registerBuiltInAnimate('MotionPath', MotionPath);
     AnimateExecutor.registerBuiltInAnimate('streamLight', StreamLight);
 };
 
-export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, OutputRichText, PoptipAppear, PoptipDisappear, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, 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 };