@visactor/vrender-animate 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText } from '@visactor/vrender-core';
-import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose } from '@visactor/vutils';
+import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, AttributeUpdateType, pointInterpolation, RichText, divideCubic } from '@visactor/vrender-core';
+import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isValidNumber, clamp, Point, pi, isNumber, isValid, isNil, isNumberClose, PointService } from '@visactor/vutils';
 
 class Easing {
     constructor() {
@@ -349,6 +349,9 @@ class Step {
     constructor(type, props, duration, easing) {
         this._startTime = 0;
         this._hasFirstRun = false;
+        this._syncAttributeUpdate = () => {
+            this.target.setAttributes(this.target.attribute);
+        };
         this.type = type;
         this.props = props;
         this.duration = duration;
@@ -362,11 +365,13 @@ class Step {
             this.onUpdate = noop;
         }
         this.id = Generator.GenAutoIncrementId();
+        this.syncAttributeUpdate = noop;
     }
     bind(target, animate) {
         this.target = target;
         this.animate = animate;
         this.onBind();
+        this.syncAttributeUpdate();
     }
     append(step) {
         this.next = step;
@@ -446,6 +451,9 @@ class Step {
         return this._startTime;
     }
     onBind() {
+        if (this.target.type === 'glyph') {
+            this.syncAttributeUpdate = this._syncAttributeUpdate;
+        }
     }
     onFirstRun() {
     }
@@ -513,6 +521,7 @@ class Step {
                 func(key, fromValue, toValue, easedRatio, this, this.target);
             });
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
     onUpdate(end, ratio, out) {
     }
@@ -1632,7 +1641,7 @@ class AnimateExecutor {
         if (custom && customType) {
             const customParams = this.resolveValue(customParameters, graphic, {});
             const objOptions = isFunction(options)
-                ? options.call(null, (_b = (customParameters && ((_a = customParameters.data) === null || _a === void 0 ? void 0 : _a[0]))) !== null && _b !== void 0 ? _b : (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, customParameters)
+                ? options.call(null, (_b = (customParams && ((_a = customParams.data) === null || _a === void 0 ? void 0 : _a[0]))) !== null && _b !== void 0 ? _b : (_d = (_c = graphic.context) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0], graphic, customParams)
                 : options;
             customParams.options = objOptions;
             if (customType === 1) {
@@ -1686,6 +1695,7 @@ class AnimateExecutor {
         }
         const effectsArray = Array.isArray(effects) ? effects : [effects];
         effectsArray.forEach(effect => {
+            var _a, _b;
             const { type = 'fromTo', channel, customParameters, easing = 'linear', options } = effect;
             let parsedFromProps = null;
             let props = effect.to;
@@ -1702,7 +1712,9 @@ class AnimateExecutor {
                 }
                 from = parsedFromProps.from;
             }
-            this._handleRunAnimate(animate, effect.custom, effect.customType, from, props, duration, easing, customParameters, options, type, graphic);
+            const custom = (_a = effect.custom) !== null && _a !== void 0 ? _a : AnimateExecutor.builtInAnimateMap[type];
+            const customType = (_b = effect.customType) !== null && _b !== void 0 ? _b : (custom && isFunction(custom) ? (/^class\s/.test(Function.prototype.toString.call(custom)) ? 1 : 2) : 0);
+            this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, options, type, graphic);
         });
         if (delayAfterValue > 0) {
             animate.wait(delayAfterValue);
@@ -1733,8 +1745,9 @@ class AnimateExecutor {
             };
         }
         if (!Array.isArray(channel)) {
-            Object.entries(channel).forEach(([key, config]) => {
+            Object.keys(channel).forEach(key => {
                 var _a, _b;
+                const config = channel[key];
                 if (config.to !== undefined) {
                     if (typeof config.to === 'function') {
                         props[key] = config.to((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.data, graphic, {});
@@ -2095,6 +2108,7 @@ class ACustomAnimate extends Step {
         }
         const easedRatio = this.easing(ratio);
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
     setProps(props) {
         this.props = props;
@@ -2476,6 +2490,7 @@ class ClipGraphicAnimate extends ACustomAnimate {
         this._clipGraphic = params === null || params === void 0 ? void 0 : params.clipGraphic;
     }
     onBind() {
+        super.onBind();
         if (this._group && this._clipGraphic) {
             this._lastClip = this._group.attribute.clip;
             this._lastPath = this._group.attribute.path;
@@ -2644,6 +2659,7 @@ class TagPointsUpdate extends ACustomAnimate {
         return [];
     }
     onBind() {
+        super.onBind();
         const { points, segments } = this.target.attribute;
         const { points: pointsTo, segments: segmentsTo } = this.target.getFinalAttribute();
         this.from = { points, segments };
@@ -2777,6 +2793,7 @@ class CommonIn extends ACustomAnimate {
     }
     onBind() {
         var _a;
+        super.onBind();
         const attrs = this.target.getFinalAttribute();
         const fromAttrs = (_a = this.target.attribute) !== null && _a !== void 0 ? _a : {};
         const to = {};
@@ -2813,6 +2830,7 @@ class CommonOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
+        super.onBind();
         const attrs = this.target.attribute;
         const to = {};
         const from = {};
@@ -2870,6 +2888,7 @@ class RotateBySphereAnimate extends ACustomAnimate {
         this.phi = phi;
     }
     onBind() {
+        super.onBind();
         return;
     }
     onEnd() {
@@ -3079,6 +3098,7 @@ class GrowAngleBase extends ACustomAnimate {
 class GrowAngleIn extends GrowAngleBase {
     onBind() {
         var _a, _b;
+        super.onBind();
         const { from, to } = growAngleIn(this.target, this.params.options, this.params);
         const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
@@ -3095,6 +3115,7 @@ class GrowAngleIn extends GrowAngleBase {
 }
 class GrowAngleOut extends GrowAngleBase {
     onBind() {
+        super.onBind();
         const { from, to } = growAngleOut(this.target, this.params.options, this.params);
         const fromAttrs = from;
         this.props = to;
@@ -3262,6 +3283,7 @@ class GrowCenterIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b;
+        super.onBind();
         const { from, to } = growCenterIn(this.target, this.params.options, this.params);
         const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
@@ -3291,6 +3313,7 @@ class GrowCenterOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
+        super.onBind();
         const { from, to } = growCenterOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -3367,6 +3390,7 @@ class GrowHeightIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b;
+        super.onBind();
         const { from, to } = growHeightIn(this.target, this.params.options, this.params);
         const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
@@ -3443,6 +3467,7 @@ class GrowHeightOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
+        super.onBind();
         const { from, to } = growHeightOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -3521,6 +3546,7 @@ class GworPointsBase extends ACustomAnimate {
 }
 class GrowPointsIn extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsIn(this.target, this.params.options, this.params);
             this.props = to;
@@ -3540,6 +3566,7 @@ class GrowPointsIn extends GworPointsBase {
 }
 class GrowPointsOut extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line'].includes(this.target.type)) {
             const attrs = this.target.getFinalAttribute();
             const { from, to } = growPointsOut(this.target, this.params.options, this.params);
@@ -3585,6 +3612,7 @@ const growPointsXOut = (graphic, options, animationParameters) => {
 };
 class GrowPointsXIn extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsXIn(this.target, this.params.options, this.params);
             this.props = to;
@@ -3604,6 +3632,7 @@ class GrowPointsXIn extends GworPointsBase {
 }
 class GrowPointsXOut extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line'].includes(this.target.type)) {
             const attrs = this.target.getFinalAttribute();
             const { from, to } = growPointsXOut(this.target, this.params.options, this.params);
@@ -3649,6 +3678,7 @@ const growPointsYOut = (graphic, options, animationParameters) => {
 };
 class GrowPointsYIn extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYIn(this.target, this.params.options, this.params);
             this.props = to;
@@ -3668,6 +3698,7 @@ class GrowPointsYIn extends GworPointsBase {
 }
 class GrowPointsYOut extends GworPointsBase {
     onBind() {
+        super.onBind();
         if (['area', 'line', 'polygon'].includes(this.target.type)) {
             const { from, to } = growPointsYOut(this.target, this.params.options, this.params);
             this.props = to;
@@ -3763,6 +3794,7 @@ class GrowPointsBase extends ACustomAnimate {
 class GrowRadiusIn extends GrowPointsBase {
     onBind() {
         var _a, _b;
+        super.onBind();
         const { from, to } = growRadiusIn(this.target, this.params.options, this.params);
         const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
@@ -3778,6 +3810,7 @@ class GrowRadiusIn extends GrowPointsBase {
 }
 class GrowRadiusOut extends GrowPointsBase {
     onBind() {
+        super.onBind();
         const { to } = growRadiusOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -3890,6 +3923,7 @@ class GrowWidthIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b;
+        super.onBind();
         const { from, to } = growWidthIn(this.target, this.params.options, this.params);
         const fromAttrs = (_b = (_a = this.target.context) === null || _a === void 0 ? void 0 : _a.lastAttrs) !== null && _b !== void 0 ? _b : from;
         this.props = to;
@@ -3919,6 +3953,7 @@ class GrowWidthOut extends ACustomAnimate {
         super(from, to, duration, easing, params);
     }
     onBind() {
+        super.onBind();
         const { from, to } = growWidthOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -3940,6 +3975,7 @@ class GrowWidthOut extends ACustomAnimate {
 
 class LabelItemAppear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4065,6 +4101,7 @@ class LabelItemAppear extends AComponentAnimate {
 }
 class LabelItemDisappear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4137,6 +4174,7 @@ class LabelItemDisappear extends AComponentAnimate {
 
 class PoptipAppear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4210,6 +4248,7 @@ class PoptipAppear extends AComponentAnimate {
 }
 class PoptipDisappear extends AComponentAnimate {
     onBind() {
+        super.onBind();
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
@@ -4921,6 +4960,7 @@ class ScaleIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        super.onBind();
         let from;
         let to;
         const attrs = this.target.getFinalAttribute();
@@ -5000,6 +5040,7 @@ class ScaleOut extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e;
+        super.onBind();
         let from;
         let to;
         const attrs = this.target.attribute;
@@ -5058,6 +5099,7 @@ class State extends ACustomAnimate {
                 func(key, fromValue, toValue, easedRatio, this, this.target);
             });
         this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
     }
 }
 
@@ -5067,6 +5109,7 @@ class SlideIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        super.onBind();
         const attrs = this.target.getFinalAttribute();
         const direction = ((_a = this.params) === null || _a === void 0 ? void 0 : _a.direction) || 'right';
         const distance = ((_b = this.params) === null || _b === void 0 ? void 0 : _b.distance) || 50;
@@ -5113,6 +5156,7 @@ class GrowIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f, _g;
+        super.onBind();
         const attrs = this.target.getFinalAttribute();
         const fromScale = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromScale) !== null && _b !== void 0 ? _b : 0;
         const direction = ((_c = this.params) === null || _c === void 0 ? void 0 : _c.direction) || 'xy';
@@ -5150,6 +5194,7 @@ class SpinIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super.onBind();
         const attrs = this.target.getFinalAttribute();
         const fromAngle = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.fromAngle) !== null && _b !== void 0 ? _b : Math.PI * 2;
         const fromScale = (_d = (_c = this.params) === null || _c === void 0 ? void 0 : _c.fromScale) !== null && _d !== void 0 ? _d : 0;
@@ -5193,6 +5238,7 @@ class MoveScaleIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f;
+        super.onBind();
         const executor = new AnimateExecutor(this.target);
         executor.execute({
             type: 'custom',
@@ -5231,6 +5277,7 @@ class MoveRotateIn extends ACustomAnimate {
     }
     onBind() {
         var _a, _b, _c, _d, _e, _f;
+        super.onBind();
         const executor = new AnimateExecutor(this.target);
         executor.execute({
             type: 'custom',
@@ -5466,6 +5513,7 @@ class Update extends ACustomAnimate {
     }
     onBind() {
         var _a, _b;
+        super.onBind();
         let { diffAttrs = {} } = (_a = this.target.context) !== null && _a !== void 0 ? _a : {};
         const { options } = this.params;
         if ((_b = options === null || options === void 0 ? void 0 : options.excludeChannels) === null || _b === void 0 ? void 0 : _b.length) {
@@ -5592,6 +5640,7 @@ class MoveBase extends ACustomAnimate {
 }
 class MoveIn extends MoveBase {
     onBind() {
+        super.onBind();
         const { from, to } = moveIn(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -5606,6 +5655,7 @@ class MoveIn extends MoveBase {
 }
 class MoveOut extends MoveBase {
     onBind() {
+        super.onBind();
         const { from, to } = moveOut(this.target, this.params.options, this.params);
         this.props = to;
         this.propKeys = Object.keys(to).filter(key => to[key] != null);
@@ -5673,6 +5723,7 @@ class RotateBase extends ACustomAnimate {
 }
 class RotateIn extends RotateBase {
     onBind() {
+        super.onBind();
         const { from, to } = rotateIn(this.target, this.params.options);
         this.props = to;
         this.propKeys = ['angle'];
@@ -5687,6 +5738,7 @@ class RotateIn extends RotateBase {
 }
 class RotateOut extends RotateBase {
     onBind() {
+        super.onBind();
         const { from, to } = rotateOut(this.target, this.params.options);
         this.props = to;
         this.propKeys = ['angle'];
@@ -5695,35 +5747,67 @@ class RotateOut extends RotateBase {
     }
 }
 
+class MotionPath extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a;
+        super(from, to, duration, easing, params);
+        if (params) {
+            this.pathLength = params.path.getLength();
+            this.path = params.path;
+            this.distance = params.distance;
+            this.totalLength = this.distance * this.pathLength;
+            this.initAngle = (_a = params.initAngle) !== null && _a !== void 0 ? _a : 0;
+            this.changeAngle = !!params.changeAngle;
+            this.cb = params.cb;
+        }
+    }
+    onBind() {
+        this.from = { x: 0, y: 0 };
+        this.to = this.path.getAttrAt(this.totalLength).pos;
+        this.props = this.to;
+    }
+    onUpdate(end, ratio, out) {
+        const attrs = {};
+        const at = this.totalLength * ratio;
+        const { pos, angle } = this.path.getAttrAt(at);
+        attrs.x = pos.x;
+        attrs.y = pos.y;
+        if (this.changeAngle) {
+            attrs.angle = angle + this.initAngle;
+        }
+        this.cb && this.cb(this.from, this.to, ratio, this.target);
+        this.target.setAttributes(attrs);
+    }
+}
+
 class FromTo extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
         super(from, to, duration, easing, params);
-        this.from = from;
-        this.to = to;
+        this.from = from !== null && from !== void 0 ? from : {};
     }
     onBind() {
-        var _a;
+        super.onBind();
         const finalAttribute = this.target.getFinalAttribute();
-        const currAttribute = this.target.attribute;
-        const fromKeys = Object.keys(this.from);
-        const toKeys = Object.keys(this.to);
-        fromKeys.forEach(key => {
-            var _a;
-            if (this.to[key] == null) {
-                this.to[key] = (_a = finalAttribute[key]) !== null && _a !== void 0 ? _a : 0;
-            }
-        });
-        toKeys.forEach(key => {
-            var _a;
-            if (this.from[key] == null) {
-                this.from[key] = (_a = currAttribute[key]) !== null && _a !== void 0 ? _a : 0;
+        Object.keys(this.from).forEach(key => {
+            if (this.props[key] == null) {
+                this.props[key] = finalAttribute[key];
             }
         });
-        this.propKeys = Object.keys(this.from);
+    }
+    onFirstRun() {
+        var _a;
+        this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
+        const startProps = this.animate.getStartProps();
+        this.propKeys &&
+            this.propKeys.forEach(key => {
+                var _a;
+                this.from[key] = (_a = this.from[key]) !== null && _a !== void 0 ? _a : startProps[key];
+            });
         if (((_a = this.target.context) === null || _a === void 0 ? void 0 : _a.animationState) === 'appear') {
             const finalAttribute = this.target.getFinalAttribute();
             this.target.setAttributes(finalAttribute);
         }
+        this.target.setAttributes(this.from);
     }
     update(end, ratio, out) {
         this.onStart();
@@ -5731,15 +5815,257 @@ class FromTo extends ACustomAnimate {
             return;
         }
         const easedRatio = this.easing(ratio);
-        this.interpolateUpdateFunctions.forEach((func, index) => {
-            if (!this.animate.validAttr(this.propKeys[index])) {
-                return;
+        this.animate.interpolateUpdateFunction
+            ? this.animate.interpolateUpdateFunction(this.from, this.props, easedRatio, this, this.target)
+            : this.interpolateUpdateFunctions.forEach((func, index) => {
+                if (!this.animate.validAttr(this.propKeys[index])) {
+                    return;
+                }
+                const key = this.propKeys[index];
+                const fromValue = this.from[key];
+                const toValue = this.props[key];
+                func(key, fromValue, toValue, easedRatio, this, this.target);
+            });
+        this.onUpdate(end, easedRatio, out);
+        this.syncAttributeUpdate();
+    }
+}
+
+class StreamLight extends ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getEndProps() {
+        return {};
+    }
+    onStart() {
+        if (!this.target) {
+            return;
+        }
+        if (this.target.type === 'rect') {
+            this.onStartRect();
+        }
+        else if (this.target.type === 'line') {
+            this.onStartLineOrArea('line');
+        }
+        else if (this.target.type === 'area') {
+            this.onStartLineOrArea('area');
+        }
+    }
+    onStartLineOrArea(type) {
+        var _a;
+        const root = this.target.attachShadow();
+        const line = application.graphicService.creator[type](Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.attribute));
+        this[type] = line;
+        line.pathProxy = new CustomPath2D();
+        root.add(line);
+    }
+    onStartRect() {
+        var _a, _b, _c;
+        const root = this.target.attachShadow();
+        const isHorizontal = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.isHorizontal) !== null && _b !== void 0 ? _b : true;
+        const sizeAttr = isHorizontal ? 'height' : 'width';
+        const otherSizeAttr = isHorizontal ? 'width' : 'height';
+        const size = this.target.AABBBounds[sizeAttr]();
+        const y = isHorizontal ? 0 : this.target.AABBBounds.y1;
+        const rect = application.graphicService.creator.rect(Object.assign(Object.assign({ [sizeAttr]: size, fill: '#bcdeff', shadowBlur: 30, shadowColor: '#bcdeff' }, (_c = this.params) === null || _c === void 0 ? void 0 : _c.attribute), { x: 0, y, [otherSizeAttr]: 0 }));
+        this.rect = rect;
+        root.add(rect);
+    }
+    onBind() {
+        return;
+    }
+    onEnd() {
+        this.target.detachShadow();
+    }
+    onUpdate(end, ratio, out) {
+        if (this.rect) {
+            return this.onUpdateRect(end, ratio, out);
+        }
+        else if (this.line || this.area) {
+            return this.onUpdateLineOrArea(end, ratio, out);
+        }
+    }
+    onUpdateRect(end, ratio, out) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const isHorizontal = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.isHorizontal) !== null && _b !== void 0 ? _b : true;
+        const parentAttr = this.target.attribute;
+        if (isHorizontal) {
+            const parentWidth = (_d = (_c = parentAttr.width) !== null && _c !== void 0 ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) !== null && _d !== void 0 ? _d : 250;
+            const streamLength = (_f = (_e = this.params) === null || _e === void 0 ? void 0 : _e.streamLength) !== null && _f !== void 0 ? _f : parentWidth;
+            const maxLength = (_j = (_h = (_g = this.params) === null || _g === void 0 ? void 0 : _g.attribute) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : 60;
+            const startX = -maxLength;
+            const currentX = startX + (streamLength - startX) * ratio;
+            const x = Math.max(currentX, 0);
+            const w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX);
+            const width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+            this.rect.setAttributes({
+                x,
+                width,
+                dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+            }, false, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio,
+                    end
+                }
+            });
+        }
+        else {
+            const parentHeight = (_l = (_k = parentAttr.height) !== null && _k !== void 0 ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) !== null && _l !== void 0 ? _l : 250;
+            const streamLength = (_o = (_m = this.params) === null || _m === void 0 ? void 0 : _m.streamLength) !== null && _o !== void 0 ? _o : parentHeight;
+            const maxLength = (_r = (_q = (_p = this.params) === null || _p === void 0 ? void 0 : _p.attribute) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 60;
+            const startY = parentHeight;
+            const currentY = startY - (streamLength + maxLength) * ratio;
+            let y = Math.min(currentY, parentHeight);
+            const h = Math.min(parentHeight - currentY, maxLength);
+            let height;
+            if (y <= 0) {
+                height = Math.max(y + h, 0);
+                y = 0;
             }
-            const key = this.propKeys[index];
-            const fromValue = this.from[key];
-            const toValue = this.to[key];
-            func(key, fromValue, toValue, easedRatio, this, this.target);
-        });
+            else {
+                height = h;
+            }
+            this.rect.setAttributes({
+                y,
+                height,
+                dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+            }, false, {
+                type: AttributeUpdateType.ANIMATE_PLAY,
+                animationState: {
+                    ratio,
+                    end
+                }
+            });
+        }
+    }
+    onUpdateLineOrArea(end, ratio, out) {
+        const target = this.line || this.area;
+        if (!target) {
+            return;
+        }
+        const customPath = target.pathProxy;
+        const targetLine = this.target;
+        if (targetLine.cache || targetLine.cacheArea) {
+            this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out);
+        }
+        else {
+            this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
+        }
+        const targetAttrs = targetLine.attribute;
+        target.setAttributes(Object.assign({ stroke: targetAttrs.stroke }, target.attribute));
+        target.addUpdateBoundTag();
+    }
+    _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
+        var _a, _b;
+        customPath.clear();
+        if (g.type === 'line') {
+            let cache = g.cache;
+            if (!Array.isArray(cache)) {
+                cache = [cache];
+            }
+            const totalLen = cache.reduce((l, c) => l + c.getLength(), 0);
+            const curves = [];
+            cache.forEach((c) => {
+                c.curves.forEach((ci) => curves.push(ci));
+            });
+            return this._updateCurves(customPath, curves, totalLen, ratio);
+        }
+        else if (g.type === 'area' && ((_b = (_a = g.cacheArea) === null || _a === void 0 ? void 0 : _a.top) === null || _b === void 0 ? void 0 : _b.curves)) {
+            const cache = g.cacheArea;
+            const totalLen = cache.top.curves.reduce((a, b) => a + b.getLength(), 0);
+            return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
+        }
+    }
+    _updateCurves(customPath, curves, totalLen, ratio) {
+        var _a, _b;
+        const startLen = totalLen * ratio;
+        const endLen = Math.min(startLen + ((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength) !== null && _b !== void 0 ? _b : 10), totalLen);
+        let lastLen = 0;
+        let start = false;
+        for (let i = 0; i < curves.length; i++) {
+            if (curves[i].defined !== false) {
+                const curveItem = curves[i];
+                const len = curveItem.getLength();
+                const startPercent = 1 - (lastLen + len - startLen) / len;
+                let endPercent = 1 - (lastLen + len - endLen) / len;
+                let curveForStart;
+                if (lastLen < startLen && lastLen + len > startLen) {
+                    start = true;
+                    if (curveItem.p2 && curveItem.p3) {
+                        const [_, curve2] = divideCubic(curveItem, startPercent);
+                        customPath.moveTo(curve2.p0.x, curve2.p0.y);
+                        curveForStart = curve2;
+                    }
+                    else {
+                        const p = curveItem.getPointAt(startPercent);
+                        customPath.moveTo(p.x, p.y);
+                    }
+                }
+                if (lastLen < endLen && lastLen + len > endLen) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        if (curveForStart) {
+                            endPercent = (endLen - startLen) / curveForStart.getLength();
+                        }
+                        const [curve1] = divideCubic(curveForStart || curveItem, endPercent);
+                        customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+                    }
+                    else {
+                        const p = curveItem.getPointAt(endPercent);
+                        customPath.lineTo(p.x, p.y);
+                    }
+                    break;
+                }
+                else if (start) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        const curve = curveForStart || curveItem;
+                        customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+                    }
+                    else {
+                        customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+                    }
+                }
+                lastLen += len;
+            }
+        }
+    }
+    _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+        var _a, _b;
+        const { points, curveType } = line.attribute;
+        if (!points || points.length < 2 || curveType !== 'linear') {
+            return;
+        }
+        let totalLen = 0;
+        for (let i = 1; i < points.length; i++) {
+            totalLen += PointService.distancePP(points[i], points[i - 1]);
+        }
+        const startLen = totalLen * ratio;
+        const endLen = Math.min(startLen + ((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength) !== null && _b !== void 0 ? _b : 10), totalLen);
+        const nextPoints = [];
+        let lastLen = 0;
+        for (let i = 1; i < points.length; i++) {
+            const len = PointService.distancePP(points[i], points[i - 1]);
+            if (lastLen < startLen && lastLen + len > startLen) {
+                nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len));
+            }
+            if (lastLen < endLen && lastLen + len > endLen) {
+                nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
+                break;
+            }
+            else if (nextPoints.length) {
+                nextPoints.push(points[i]);
+            }
+            lastLen += len;
+        }
+        if (!nextPoints.length || nextPoints.length < 2) {
+            return;
+        }
+        customPath.clear();
+        customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
+        for (let i = 1; i < nextPoints.length; i++) {
+            customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
+        }
     }
 }
 
@@ -5793,6 +6119,8 @@ const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('spinOut', SpinOut);
     AnimateExecutor.registerBuiltInAnimate('moveScaleOut', MoveScaleOut);
     AnimateExecutor.registerBuiltInAnimate('moveRotateOut', MoveRotateOut);
+    AnimateExecutor.registerBuiltInAnimate('MotionPath', MotionPath);
+    AnimateExecutor.registerBuiltInAnimate('streamLight', StreamLight);
 };
 
-export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, GraphicStateExtension, GroupFadeIn, GroupFadeOut, IncreaseCount, InputText, ManualTicker, RotateBySphereAnimate, TagPointsUpdate, createComponentAnimator, generatorPathEasingFunc, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, 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 };