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

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() {
@@ -930,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;
         }
@@ -1549,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;
@@ -1560,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) {
@@ -1592,7 +1594,6 @@ class AnimateExecutor {
                             customType });
                     }) });
             });
-            parsedParams.oneByOne = oneByOneTime * scale;
             parsedParams.oneByOneDelay = oneByOneDelay * scale;
             parsedParams.startTime = startTime * scale;
         }
@@ -1600,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'];
@@ -1622,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;
             }
@@ -1774,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;
@@ -1810,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);
@@ -2489,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);
@@ -2585,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;
@@ -3026,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) {
@@ -3037,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'];
     }
 }
 
@@ -3456,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;
@@ -3467,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 {
@@ -3536,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;
@@ -3546,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 {
@@ -5161,6 +5634,7 @@ class ScaleIn extends ACustomAnimate {
         if (this._updateFunction) {
             this._updateFunction(ratio);
             this.target.addUpdatePositionTag();
+            this.target.addUpdateBoundTag();
         }
     }
 }
@@ -5204,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();
     }
 }
 
@@ -5940,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;
@@ -5981,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;
@@ -6530,4 +7005,4 @@ const registerCustomAnimate = () => {
     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, PulseAnimate, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, StrokeIn, StrokeOut, 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 };