@visactor/vrender 1.1.0-alpha.2 → 1.1.0-alpha.4

package/dist/index.js

@@ -32343,6 +32343,19 @@
       return !1;
     }
 
+    function applyAnimationTransientAttributes(target, attributes, type = exports.AttributeUpdateType.ANIMATE_UPDATE) {
+      var _a;
+      if (!attributes) return;
+      const context = {
+          type: type
+        },
+        transientTarget = target;
+      "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context);
+    }
+    function applyAppearStartAttributes(target, attributes) {
+      applyAnimationTransientAttributes(target, attributes, exports.AttributeUpdateType.ANIMATE_BIND);
+    }
+
     function noop() {}
     class Step {
       constructor(type, props, duration, easing) {
@@ -32468,7 +32481,7 @@
       onStart() {
         super.onStart();
         const fromProps = this.getFromProps();
-        this.target.setAttributes(fromProps);
+        applyAnimationTransientAttributes(this.target, fromProps, exports.AttributeUpdateType.ANIMATE_START);
       }
       update(end, ratio, out) {
         this.onStart();
@@ -32830,7 +32843,7 @@
           const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
           newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
         }
-        newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+        newLoop && !bounceTime && applyAnimationTransientAttributes(this.target, this._startProps, exports.AttributeUpdateType.ANIMATE_START);
         let targetStep = null;
         if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
           let currentStep = this._firstStep;
@@ -33396,7 +33409,8 @@
           void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
         }), diffAttrs) for (const key in diffAttrs) {
           const value = diffAttrs[key];
-          void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+          if (void 0 === value) continue;
+          props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (attrOutChannel[key] = value, hasAttrs = !0);
         }
         return {
           from: from,
@@ -33854,7 +33868,9 @@
           const parts = formattedNumber.toString().split(".");
           parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
         } else formattedWithBasicFormat = formattedNumber;
-        formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+        formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, applyAnimationTransientAttributes(this.target, {
+          text: formattedText
+        });
       }
     }
 
@@ -33961,7 +33977,7 @@
       onUpdate(end, ratio, out) {
         const target = this.target,
           pathProxy = "function" == typeof target.pathProxy ? target.pathProxy(target.attribute) : target.pathProxy;
-        interpolateMorphingData(this.morphingData, pathProxy, ratio), this.otherAttrs && this.otherAttrs.length && interpolateOtherAttrs(this.otherAttrs, out, ratio), this.target.setAttributes(out), end && !this.saveOnEnd && (this.target.pathProxy = null);
+        interpolateMorphingData(this.morphingData, pathProxy, ratio), this.otherAttrs && this.otherAttrs.length && interpolateOtherAttrs(this.otherAttrs, out, ratio), end && this.saveOnEnd ? this.target.setAttributes(out) : applyAnimationTransientAttributes(this.target, out), end && !this.saveOnEnd && (this.target.pathProxy = null);
       }
     }
     const morphPath = (fromGraphic, toGraphic, animationConfig, fromGraphicTransform) => {
@@ -34192,7 +34208,9 @@
           const blinkRate = .1;
           Math.floor(ratio / blinkRate) % 2 == 0 && (displayText = this.beforeText + currentText + this.cursorChar + this.afterText);
         } else displayText = this.beforeText + currentText + this.cursorChar + this.afterText;
-        this.target.setAttribute("text", displayText);
+        applyAnimationTransientAttributes(this.target, {
+          text: displayText
+        });
       }
     }
 
@@ -34201,11 +34219,9 @@
         super(null, {}, duration, easing, params), this.clipFromAttribute = from, this.clipToAttribute = to, this._group = null == params ? void 0 : params.group, this._clipGraphic = null == params ? void 0 : params.clipGraphic;
       }
       onBind() {
-        super.onBind(), this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, this._lastPath = this._group.attribute.path, this._group.setAttributes({
+        super.onBind(), this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, this._lastPath = this._group.attribute.path, applyAppearStartAttributes(this._group, {
           clip: !0,
           path: [this._clipGraphic]
-        }, !1, {
-          type: exports.AttributeUpdateType.ANIMATE_BIND
         }));
       }
       onEnd() {
@@ -34418,7 +34434,7 @@
           return newPoint.context = point.context, newPoint;
         }), this.clipRange) {
           if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
-          this.target.setAttributes({
+          applyAnimationTransientAttributes(this.target, {
             clipRange: this.clipRange + (1 - this.clipRange) * ratio
           });
         }
@@ -34451,7 +34467,7 @@
         this.keys.forEach(key => {
           var _a, _b, _c;
           to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_c = null !== (_b = from[key]) && void 0 !== _b ? _b : fromAttrs[key]) && void 0 !== _c ? _c : 0;
-        }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(from);
+        }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -34705,7 +34721,7 @@
             to: to
           } = growAngleIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs), this.determineUpdateFunction();
       }
     }
     class GrowAngleOut extends GrowAngleBase {
@@ -34855,7 +34871,7 @@
             to: to
           } = growCenterIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -34960,7 +34976,7 @@
             to: to
           } = growHeightIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -35074,7 +35090,7 @@
             from: from,
             to: to
           } = growPointsIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35136,7 +35152,7 @@
             from: from,
             to: to
           } = growPointsXIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35198,7 +35214,7 @@
             from: from,
             to: to
           } = growPointsYIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35310,7 +35326,7 @@
             to: to
           } = growRadiusIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
     }
     class GrowRadiusOut extends GrowPointsBase {
@@ -35432,7 +35448,7 @@
             to: to
           } = growWidthIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -35483,7 +35499,7 @@
           } = this.params,
           symbolTime = duration / 10;
         let symbolStartOuterFrom, symbolStartOuterTo;
-        if (target._symbolStart.setAttributes({
+        if (applyAppearStartAttributes(target._symbolStart, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target._symbolStart, {
@@ -35504,12 +35520,12 @@
           clipRange: 0
         }, symbolStartOuterTo = {
           clipRange: 1
-        }), target._symbolStartOuter.setAttributes(symbolStartOuterFrom), animator.animate(target._symbolStartOuter, {
+        }), applyAppearStartAttributes(target._symbolStartOuter, symbolStartOuterFrom), animator.animate(target._symbolStartOuter, {
           type: "to",
           to: symbolStartOuterTo,
           duration: 5 * symbolTime,
           easing: easing
-        }), target._symbolEnd.setAttributes({
+        }), applyAppearStartAttributes(target._symbolEnd, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target._symbolEnd, {
@@ -35521,7 +35537,7 @@
           duration: 2 * symbolTime,
           delay: 8 * symbolTime,
           easing: easing
-        }), target._line.setAttributes({
+        }), applyAppearStartAttributes(target._line, {
           clipRange: 0
         }), animator.animate(target._line, {
           type: "to",
@@ -35532,7 +35548,7 @@
           easing: easing
         }), "typewriter" === titleType) {
           const titleTopText = target._titleTop.attribute.text;
-          target._titleTop.setAttributes({
+          applyAppearStartAttributes(target._titleTop, {
             text: ""
           }), animator.animate(target._titleTop, {
             type: "custom",
@@ -35545,7 +35561,7 @@
             custom: InputText
           });
           const titleBottomText = target._titleBottom.attribute.text;
-          target._titleBottom.setAttributes({
+          applyAppearStartAttributes(target._titleBottom, {
             text: ""
           }), animator.animate(target._titleBottom, {
             type: "custom",
@@ -35557,7 +35573,7 @@
             },
             custom: InputText
           });
-        } else target._titleTop.setAttributes({
+        } else applyAppearStartAttributes(target._titleTop, {
           dy: target._titleTop.AABBBounds.height() + 10
         }), animator.animate(target._titleTop, {
           type: "to",
@@ -35567,7 +35583,7 @@
           delay: 5 * symbolTime,
           duration: 4 * symbolTime,
           easing: "linear"
-        }), target._titleBottom.setAttributes({
+        }), applyAppearStartAttributes(target._titleBottom, {
           dy: -(10 + target._titleBottom.AABBBounds.height())
         }), animator.animate(target._titleBottom, {
           type: "to",
@@ -35581,7 +35597,7 @@
         "scale" === titlePanelType ? [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
           var _a;
           const scaleX = null !== (_a = panel.attribute.scaleX) && void 0 !== _a ? _a : 1;
-          panel.setAttributes({
+          applyAppearStartAttributes(panel, {
             scaleX: 0
           }), animator.animate(panel, {
             type: "to",
@@ -35594,7 +35610,7 @@
         }) : "stroke" === titlePanelType && [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
           const b = panel.AABBBounds,
             totalLen = 2 * (b.width() + b.height());
-          panel.setAttributes({
+          applyAppearStartAttributes(panel, {
             lineDash: [0, 10 * totalLen]
           }), animator.animate(panel, {
             type: "to",
@@ -35701,7 +35717,7 @@
           {
             wave: wave
           } = this.params;
-        if (target.setAttributes({
+        if (applyAppearStartAttributes(target, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target, {
@@ -35854,7 +35870,9 @@
             }
           }
         }
-        this.target.setAttribute("textConfig", currentTextConfig);
+        applyAnimationTransientAttributes(this.target, {
+          textConfig: currentTextConfig
+        });
       }
     }
 
@@ -35881,18 +35899,21 @@
             displayedLength = Math.round(fromItems * (1 - adjustedRatio));
           } else displayedLength = Math.round(fromItems * (1 - ratio));
           let currentTextConfig = "forward" === this.direction ? this.fromTextConfig.slice(fromItems - displayedLength) : this.fromTextConfig.slice(0, displayedLength);
-          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), this.target.setAttribute("textConfig", currentTextConfig);
+          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), applyAnimationTransientAttributes(this.target, {
+            textConfig: currentTextConfig
+          });
         } else {
           if (this.fadeOutChars) {
             const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
             displayedLength = Math.round(fromItems * (1 - adjustedRatio));
           } else displayedLength = Math.round(fromItems * (1 - ratio));
           let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);
-          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), this.target.setAttribute("textConfig", currentTextConfig);
+          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), applyAnimationTransientAttributes(this.target, {
+            textConfig: currentTextConfig
+          });
         }
       }
       applyFadeEffect(textConfig, ratio, totalItems, displayedLength) {
-        "forward" === this.direction ? totalItems - displayedLength : displayedLength;
         const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration,
           fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));
         return textConfig.map((item, index) => {
@@ -35994,7 +36015,9 @@
         if (!this.valid) return;
         const maxTextShowRatio = 1 - this.fadeInDuration;
         let updatedTextConfig;
-        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), this.target.setAttribute("textConfig", updatedTextConfig);
+        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), applyAnimationTransientAttributes(this.target, {
+          textConfig: updatedTextConfig
+        });
       }
       updateByWord(ratio, maxTextShowRatio) {
         const totalGroups = this.wordGroups.length,
@@ -36123,7 +36146,9 @@
         if (!this.valid) return;
         const maxTextShowRatio = 1 - this.fadeOutDuration;
         let updatedTextConfig;
-        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), this.target.setAttribute("textConfig", updatedTextConfig);
+        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), applyAnimationTransientAttributes(this.target, {
+          textConfig: updatedTextConfig
+        });
       }
       updateByWord(ratio, maxTextShowRatio) {
         const totalGroups = this.wordGroups.length,
@@ -36222,7 +36247,7 @@
               scaleY: null !== (_k = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _k ? _k : 1
             }, this._updateFunction = this.updateXY;
         }
-        null === (_m = (_l = this.target).applyFinalAttributeToAttribute) || void 0 === _m || _m.call(_l), this.props = to, this.from = from, this.to = to, !1 !== (null === (_o = this.params.controlOptions) || void 0 === _o ? void 0 : _o.immediatelyApply) && this.target.setAttributes(from);
+        null === (_m = (_l = this.target).applyFinalAttributeToAttribute) || void 0 === _m || _m.call(_l), this.props = to, this.from = from, this.to = to, !1 !== (null === (_o = this.params.controlOptions) || void 0 === _o ? void 0 : _o.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -36325,7 +36350,7 @@
             opacity: 1,
             baseOpacity: 1
           };
-        "top" === direction ? (from.y = (null !== (_e = attrs.y) && void 0 !== _e ? _e : 0) - distance, to.y = null !== (_f = attrs.y) && void 0 !== _f ? _f : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = (null !== (_g = attrs.y) && void 0 !== _g ? _g : 0) + distance, to.y = null !== (_h = attrs.y) && void 0 !== _h ? _h : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = (null !== (_j = attrs.x) && void 0 !== _j ? _j : 0) - distance, to.x = null !== (_k = attrs.x) && void 0 !== _k ? _k : 0, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = (null !== (_l = attrs.x) && void 0 !== _l ? _l : 0) + distance, to.x = null !== (_m = attrs.x) && void 0 !== _m ? _m : 0, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        "top" === direction ? (from.y = (null !== (_e = attrs.y) && void 0 !== _e ? _e : 0) - distance, to.y = null !== (_f = attrs.y) && void 0 !== _f ? _f : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = (null !== (_g = attrs.y) && void 0 !== _g ? _g : 0) + distance, to.y = null !== (_h = attrs.y) && void 0 !== _h ? _h : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = (null !== (_j = attrs.x) && void 0 !== _j ? _j : 0) - distance, to.x = null !== (_k = attrs.x) && void 0 !== _k ? _k : 0, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = (null !== (_l = attrs.x) && void 0 !== _l ? _l : 0) + distance, to.x = null !== (_m = attrs.x) && void 0 !== _m ? _m : 0, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36353,7 +36378,7 @@
             opacity: 1,
             baseOpacity: 1
           };
-        this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = fromScale, to.scaleX = null !== (_f = attrs.scaleX) && void 0 !== _f ? _f : 1, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = fromScale, to.scaleY = null !== (_g = attrs.scaleY) && void 0 !== _g ? _g : 1, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = fromScale, to.scaleX = null !== (_f = attrs.scaleX) && void 0 !== _f ? _f : 1, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = fromScale, to.scaleY = null !== (_g = attrs.scaleY) && void 0 !== _g ? _g : 1, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36387,7 +36412,7 @@
             scaleX: null !== (_h = attrs.scaleX) && void 0 !== _h ? _h : 1,
             scaleY: null !== (_j = attrs.scaleY) && void 0 !== _j ? _j : 1
           };
-        this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36434,7 +36459,7 @@
           lineWidth: lineWidth,
           stroke: strokeColor,
           strokeOpacity: fromOpacity
-        }, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (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);
+        }, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, applyAppearStartAttributes(this.target, this.from);
       }
       onUpdate(end, ratio, out) {
         var _a;
@@ -36486,7 +36511,7 @@
           lineWidth: lineWidth,
           stroke: strokeColor,
           strokeOpacity: fromOpacity
-        }, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1, this.to.fillOpacity = 0) : (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);
+        }, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1, this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, applyAppearStartAttributes(this.target, this.from);
       }
       onUpdate(end, ratio, out) {
         var _a;
@@ -36903,7 +36928,7 @@
           from: from,
           to: to
         } = moveIn(this.target, this.params.options, this.params);
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class MoveOut extends MoveBase {
@@ -36962,7 +36987,7 @@
           from: from,
           to: to
         } = rotateIn(this.target, this.params.options);
-        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class RotateOut extends RotateBase {
@@ -36978,8 +37003,8 @@
 
     class MotionPath extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        var _a;
-        super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), this.path = params.path, this.distance = params.distance, this.totalLength = this.distance * this.pathLength, this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, this.cb = params.cb);
+        var _a, _b, _c;
+        super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), this.path = params.path, this.distance = params.distance, this.totalLength = this.distance * this.pathLength, this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, this.commitOnEnd = null === (_c = null !== (_b = params.commitOnEnd) && void 0 !== _b ? _b : params.saveOnEnd) || void 0 === _c || _c, this.cb = params.cb);
       }
       onBind() {
         this.from = {
@@ -36994,7 +37019,7 @@
             pos: pos,
             angle: angle
           } = this.path.getAttrAt(at);
-        attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), this.target.setAttributes(attrs);
+        attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), end && this.commitOnEnd ? this.target.setAttributes(attrs) : applyAnimationTransientAttributes(this.target, attrs);
       }
     }
 
@@ -54292,7 +54317,7 @@
         return resolveLegacyApp().createStage(params);
     }
 
-    const version = "1.1.0-alpha.2";
+    const version = "1.1.0-alpha.4";
 
     exports.AComponentAnimate = AComponentAnimate;
     exports.ACustomAnimate = ACustomAnimate;