@visactor/vrender 1.0.0-alpha.1 → 1.0.0-alpha.2

package/cjs/index.d.ts

@@ -1,5 +1,5 @@
 import '@visactor/vrender-core';
-export declare const version = "1.0.0-alpha.1";
+export declare const version = "1.0.0-alpha.2";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';
 export * from '@visactor/vrender-animate';

package/cjs/index.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "1.0.0-alpha.1", (0, vrender_core_1.preLoadAllModule)(), (0, vrender_core_1.isBrowserEnv)() ? (0, 
+exports.version = "1.0.0-alpha.2", (0, vrender_core_1.preLoadAllModule)(), (0, vrender_core_1.isBrowserEnv)() ? (0, 
 vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, vrender_core_1.isNodeEnv)() && (0, 
 vrender_kits_1.loadNodeEnv)(vrender_core_1.container), (0, vrender_kits_2.registerArc)(), 
 (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), (0, vrender_kits_2.registerCircle)(), 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,eAAe,CAAC;AAEvC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC;AACvC,4DAA0C","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"1.0.0-alpha.1\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\nexport * from '@visactor/vrender-animate';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,eAAe,CAAC;AAEvC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC;AACvC,4DAA0C","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"1.0.0-alpha.2\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\nexport * from '@visactor/vrender-animate';\n"]}

package/dist/index.es.js

@@ -16883,7 +16883,7 @@ class Stage extends Group {
   }
   initAnimate(params) {
     var _a;
-    this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "effect" !== (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
+    this.createTicker && this.createTimeline && (this.ticker = params.ticker || this.createTicker(this), "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) && this.ticker.setFPS(30), this.timeline = this.createTimeline(), this.ticker.addTimeline(this.timeline), this.ticker.on("tick", this.afterTickCb));
   }
   startAnimate() {
     this.ticker && this.timeline && (this.ticker.start(), this.timeline.resume());
@@ -30093,10 +30093,12 @@ function commonInterpolateUpdate(key, from, to, ratio, step, target) {
 function noop() {}
 class Step {
   constructor(type, props, duration, easing) {
-    this._startTime = 0, this._hasFirstRun = !1, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId();
+    this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
+      this.target.setAttributes(this.target.attribute);
+    }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
   }
   bind(target, animate) {
-    this.target = target, this.animate = animate, this.onBind();
+    this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
   }
   append(step) {
     this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
@@ -30139,7 +30141,9 @@ class Step {
   getStartTime() {
     return this._startTime;
   }
-  onBind() {}
+  onBind() {
+    "glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
+  }
   onFirstRun() {}
   onStart() {
     if (!this._hasFirstRun) {
@@ -30179,7 +30183,7 @@ class Step {
       if (!this.animate.validAttr(this.propKeys[index])) return;
       const key = this.propKeys[index];
       func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out);
+    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
   onUpdate(end, ratio, out) {}
   onEnd(cb) {
@@ -30880,6 +30884,7 @@ class AnimateExecutor {
       delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : delayAfter;
     delayValue > 0 && animate.wait(delayValue);
     (Array.isArray(effects) ? effects : [effects]).forEach(effect => {
+      var _a, _b;
       const {
         type = "fromTo",
         channel: channel,
@@ -30890,7 +30895,10 @@ class AnimateExecutor {
       let parsedFromProps = null,
         props = effect.to,
         from = effect.from;
-      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), this._handleRunAnimate(animate, effect.custom, effect.customType, from, props, duration, easing, customParameters, options, type, graphic);
+      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
+      const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
+        customType = null !== (_b = effect.customType) && void 0 !== _b ? _b : custom && isFunction$1(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);
     }), delayAfterValue > 0 && animate.wait(delayAfterValue);
   }
   createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
@@ -31162,7 +31170,7 @@ class ACustomAnimate extends Step {
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.onUpdate(end, easedRatio, out);
+    this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
   setProps(props) {
     this.props = props, this.propKeys = Object.keys(props), this.animate.reSyncProps();
@@ -31356,7 +31364,7 @@ class ClipGraphicAnimate extends ACustomAnimate {
     super(null, 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() {
-    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, this._group.setAttributes({
       clip: !0,
       path: [this._clipGraphic]
     }, !1, {
@@ -31514,6 +31522,7 @@ class TagPointsUpdate extends ACustomAnimate {
     return [];
   }
   onBind() {
+    super.onBind();
     const {
         points: points,
         segments: segments
@@ -31595,6 +31604,7 @@ class CommonIn extends ACustomAnimate {
   }
   onBind() {
     var _a;
+    super.onBind();
     const attrs = this.target.getFinalAttribute(),
       fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
       to = {},
@@ -31621,6 +31631,7 @@ class CommonOut extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
+    super.onBind();
     const attrs = this.target.attribute,
       to = {},
       from = {};
@@ -31664,7 +31675,9 @@ class RotateBySphereAnimate extends ACustomAnimate {
     let theta = Math.acos((startX - center.x) / r / Math.sin(phi));
     startZ - center.z < 0 && (theta = pi2 - theta), this.theta = theta, this.phi = phi;
   }
-  onBind() {}
+  onBind() {
+    super.onBind();
+  }
   onEnd() {}
   onUpdate(end, ratio, out) {
     if (null == this.phi || null == this.theta) return;
@@ -31828,6 +31841,7 @@ class GrowAngleBase extends ACustomAnimate {
 class GrowAngleIn extends GrowAngleBase {
   onBind() {
     var _a, _b;
+    super.onBind();
     const {
         from: from,
         to: to
@@ -31840,6 +31854,7 @@ class GrowAngleIn extends GrowAngleBase {
 }
 class GrowAngleOut extends GrowAngleBase {
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -31978,6 +31993,7 @@ class GrowCenterIn extends ACustomAnimate {
   }
   onBind() {
     var _a, _b;
+    super.onBind();
     const {
         from: from,
         to: to
@@ -32002,6 +32018,7 @@ class GrowCenterOut extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -32083,6 +32100,7 @@ class GrowHeightIn extends ACustomAnimate {
   }
   onBind() {
     var _a, _b;
+    super.onBind();
     const {
         from: from,
         to: to
@@ -32145,6 +32163,7 @@ class GrowHeightOut extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -32197,7 +32216,7 @@ class GworPointsBase extends ACustomAnimate {
 }
 class GrowPointsIn extends GworPointsBase {
   onBind() {
-    if (["area", "line", "polygon"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
         to: to
@@ -32210,7 +32229,7 @@ class GrowPointsIn extends GworPointsBase {
 }
 class GrowPointsOut extends GworPointsBase {
   onBind() {
-    if (["area", "line"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line"].includes(this.target.type)) {
       const attrs = this.target.getFinalAttribute(),
         {
           from: from,
@@ -32261,7 +32280,7 @@ const changePointsX = (graphic, options, animationParameters) => graphic.getFina
   };
 class GrowPointsXIn extends GworPointsBase {
   onBind() {
-    if (["area", "line", "polygon"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
         to: to
@@ -32274,7 +32293,7 @@ class GrowPointsXIn extends GworPointsBase {
 }
 class GrowPointsXOut extends GworPointsBase {
   onBind() {
-    if (["area", "line"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line"].includes(this.target.type)) {
       const attrs = this.target.getFinalAttribute(),
         {
           from: from,
@@ -32325,7 +32344,7 @@ const changePointsY = (graphic, options, animationParameters) => graphic.getFina
   };
 class GrowPointsYIn extends GworPointsBase {
   onBind() {
-    if (["area", "line", "polygon"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
         to: to
@@ -32338,7 +32357,7 @@ class GrowPointsYIn extends GworPointsBase {
 }
 class GrowPointsYOut extends GworPointsBase {
   onBind() {
-    if (["area", "line", "polygon"].includes(this.target.type)) {
+    if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
       const {
         from: from,
         to: to
@@ -32438,6 +32457,7 @@ class GrowPointsBase extends ACustomAnimate {
 class GrowRadiusIn extends GrowPointsBase {
   onBind() {
     var _a, _b;
+    super.onBind();
     const {
         from: from,
         to: to
@@ -32450,6 +32470,7 @@ class GrowRadiusIn extends GrowPointsBase {
 }
 class GrowRadiusOut extends GrowPointsBase {
   onBind() {
+    super.onBind();
     const {
       to: to
     } = (graphic = this.target, options = this.params.options, this.params, !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growRadiusOutOverall(graphic, options) : growRadiusOutIndividual(graphic, options));
@@ -32560,6 +32581,7 @@ class GrowWidthIn extends ACustomAnimate {
   }
   onBind() {
     var _a, _b;
+    super.onBind();
     const {
         from: from,
         to: to
@@ -32584,6 +32606,7 @@ class GrowWidthOut extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -32604,6 +32627,7 @@ class GrowWidthOut extends ACustomAnimate {
 
 class LabelItemAppear extends AComponentAnimate {
   onBind() {
+    super.onBind();
     const animator = createComponentAnimator(this.target);
     this._animator = animator;
     const duration = this.duration,
@@ -32742,6 +32766,7 @@ class LabelItemAppear extends AComponentAnimate {
 }
 class LabelItemDisappear extends AComponentAnimate {
   onBind() {
+    super.onBind();
     const animator = createComponentAnimator(this.target);
     this._animator = animator;
     const duration = this.duration,
@@ -32824,6 +32849,7 @@ class LabelItemDisappear extends AComponentAnimate {
 
 class PoptipAppear extends AComponentAnimate {
   onBind() {
+    super.onBind();
     const animator = createComponentAnimator(this.target);
     this._animator = animator;
     const duration = this.duration,
@@ -32906,6 +32932,7 @@ class PoptipAppear extends AComponentAnimate {
 }
 class PoptipDisappear extends AComponentAnimate {
   onBind() {
+    super.onBind();
     const animator = createComponentAnimator(this.target);
     this._animator = animator;
     const duration = this.duration,
@@ -33315,6 +33342,7 @@ class ScaleIn extends ACustomAnimate {
   onBind() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     let from, to;
+    super.onBind();
     const attrs = this.target.getFinalAttribute(),
       fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {};
     switch (null === (_b = this.params) || void 0 === _b ? void 0 : _b.direction) {
@@ -33372,6 +33400,7 @@ class ScaleOut extends ACustomAnimate {
   onBind() {
     var _a, _b, _c, _d, _e;
     let from, to;
+    super.onBind();
     const attrs = this.target.attribute;
     switch (null === (_a = this.params) || void 0 === _a ? void 0 : _a.direction) {
       case "x":
@@ -33421,7 +33450,7 @@ class State extends ACustomAnimate {
       if (!this.animate.validAttr(this.propKeys[index])) return;
       const key = this.propKeys[index];
       func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out);
+    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
 }
 
@@ -33431,6 +33460,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(),
       direction = (null === (_a = this.params) || void 0 === _a ? void 0 : _a.direction) || "right",
       distance = (null === (_b = this.params) || void 0 === _b ? void 0 : _b.distance) || 50,
@@ -33458,6 +33488,7 @@ class GrowIn extends ACustomAnimate {
   }
   onBind() {
     var _a, _b, _c, _d, _e, _f, _g;
+    super.onBind();
     const attrs = this.target.getFinalAttribute(),
       fromScale = null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fromScale) && void 0 !== _b ? _b : 0,
       direction = (null === (_c = this.params) || void 0 === _c ? void 0 : _c.direction) || "xy",
@@ -33485,6 +33516,7 @@ class SpinIn extends ACustomAnimate {
   }
   onBind() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    super.onBind();
     const attrs = this.target.getFinalAttribute(),
       fromAngle = null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fromAngle) && void 0 !== _b ? _b : 2 * Math.PI,
       fromScale = null !== (_d = null === (_c = this.params) || void 0 === _c ? void 0 : _c.fromScale) && void 0 !== _d ? _d : 0,
@@ -33521,6 +33553,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",
@@ -33556,6 +33589,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",
@@ -33751,6 +33785,7 @@ class Update extends ACustomAnimate {
   }
   onBind() {
     var _a, _b;
+    super.onBind();
     let {
       diffAttrs = {}
     } = null !== (_a = this.target.context) && void 0 !== _a ? _a : {};
@@ -33883,6 +33918,7 @@ class MoveBase extends ACustomAnimate {
 }
 class MoveIn extends MoveBase {
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -33894,6 +33930,7 @@ class MoveIn extends MoveBase {
 }
 class MoveOut extends MoveBase {
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -33941,6 +33978,7 @@ class RotateBase extends ACustomAnimate {
 }
 class RotateIn extends RotateBase {
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -33952,6 +33990,7 @@ class RotateIn extends RotateBase {
 }
 class RotateOut extends RotateBase {
   onBind() {
+    super.onBind();
     const {
       from: from,
       to: to
@@ -33962,33 +34001,36 @@ class RotateOut extends RotateBase {
 
 class FromTo extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params), this.from = from, this.to = to;
+    super(from, to, duration, easing, params), this.from = null != from ? from : {};
   }
   onBind() {
+    super.onBind();
+    const finalAttribute = this.target.getFinalAttribute();
+    Object.keys(this.from).forEach(key => {
+      null == this.props[key] && (this.props[key] = finalAttribute[key]);
+    });
+  }
+  onFirstRun() {
     var _a;
-    const finalAttribute = this.target.getFinalAttribute(),
-      currAttribute = this.target.attribute,
-      fromKeys = Object.keys(this.from),
-      toKeys = Object.keys(this.to);
-    if (fromKeys.forEach(key => {
-      var _a;
-      null == this.to[key] && (this.to[key] = null !== (_a = finalAttribute[key]) && void 0 !== _a ? _a : 0);
-    }), toKeys.forEach(key => {
+    this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
+    const startProps = this.animate.getStartProps();
+    if (this.propKeys && this.propKeys.forEach(key => {
       var _a;
-      null == this.from[key] && (this.from[key] = null !== (_a = currAttribute[key]) && void 0 !== _a ? _a : 0);
-    }), this.propKeys = Object.keys(this.from), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState)) {
+      this.from[key] = null !== (_a = this.from[key]) && void 0 !== _a ? _a : startProps[key];
+    }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState)) {
       const finalAttribute = this.target.getFinalAttribute();
       this.target.setAttributes(finalAttribute);
     }
+    this.target.setAttributes(this.from);
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.interpolateUpdateFunctions.forEach((func, index) => {
+    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];
-      func(key, this.from[key], this.to[key], easedRatio, this, this.target);
-    });
+      func(key, this.from[key], this.props[key], easedRatio, this, this.target);
+    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
 }
 
@@ -33996,7 +34038,7 @@ const registerCustomAnimate = () => {
   AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut);
 };
 
-const version = "1.0.0-alpha.1";
+const version = "1.0.0-alpha.2";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);