解决多个动画对象同时作用产生的问题

Author: zhaokai

src/service/PlotBase/Animation/AnimationTypes/PlotBaseAnimation.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-15 20:11:18
+ * @LastEditTime: 2022-06-16 17:38:39
  */
 import { AnimationUtil } from '../utils/AnimationUtil';
 import { easingFunc } from '../utils/Easing';
@@ -159,6 +159,7 @@ export default class PlotBaseAnimation {
      * @return {*}
      */
     restore() {
+        this.updateGeometry()
         this.reset();
     }
 
@@ -275,11 +276,14 @@ export default class PlotBaseAnimation {
         }
         return false;
     }
+    resetGeometryStatus(){
+        this.render(0.001)
+    }
     updateGeometry() {
         if (this._updateGeometry) {
             this._updateGeometry = false;
             this.update();
-            this.render(0.00001);
+            // this.render(0.00001);
         }
     }
 }

src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotAttributeAnimation.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-16 11:45:57
+ * @LastEditTime: 2022-06-16 15:46:02
  */
 import { AnimationUtil } from '../../utils/AnimationUtil';
 import { GradientColor } from '../../utils/GradientColor';
@@ -101,11 +101,11 @@ export default class PlotAttributeAnimation extends PlotBaseAnimation {
         this._plotObjects.forEach((s) => {
             this._attrsItems.forEach((item) => {
                 const t = item.getRateValue(rate);
-                s.setValue(item.type, t, item.ids, false);
+                s.setValue(item.type, t, item.ids, true);
             });
         });
     }
 }
 PlotAttributeAnimation.limitColorItems = ['compareLineColor', 'wallColor', 'wallGradColor', 'strokeStyle', 'fillGradColor', 'fillStyle'];
 PlotAttributeAnimation.limitNumberItems = ['compareLineWidth', 'dimModHeight', 'lineWidth'];
-PlotAttributeAnimation.cacheProperty = 'attrItem';
+PlotAttributeAnimation.cacheProperty = 'attrsItem';

src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotCoordsAnimation.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-16 14:36:33
+ * @LastEditTime: 2022-06-16 17:21:09
  */
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
 import PlotBaseAnimation from '../../PlotBaseAnimation';
@@ -34,10 +34,10 @@ export default class PlotCoordsAnimation extends PlotBaseAnimation {
         super.restore();
         this._plotObjects.forEach((s, i) => {
             this._setPnts(s, this._animationPolys[i]);
+            s.isInitCoords = false;
         });
     }
     _setPnts(obj, positions) {
-        
         if (obj.positions) {
             obj.positions = positions;
         }

src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotGrowAnimation.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-16 11:37:25
+ * @LastEditTime: 2022-06-16 17:20:50
  */
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
 import Spline from '../../../../../PlotUtilBase/Geometry/Spline';

src/service/PlotBase/Animation/TimeLine/TimeLine.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 11:53:45
  * @LastEditors: zk
- * @LastEditTime: 2022-06-16 10:42:15
+ * @LastEditTime: 2022-06-16 17:38:44
  */
 
 import { AnimationReg } from '../AnimationTypes';
@@ -24,6 +24,8 @@ export default class TimeLine {
         this.raf = null;
         // 是否重新刷新动画队列
         // this._refreshAnimationList = false;
+        // 统一设置初始状态
+        this._initGeometryStatus=false
     }
 
     /**
@@ -87,8 +89,16 @@ export default class TimeLine {
      * @return {*}
      */
     play() {
+        // 重置当前时间
         this.resetTime();
+        // 修改动画状态
         this.animationAction((t) => t.play())();
+        // 动画对象默认从rate=0处开始
+        if(this._initGeometryStatus){
+            this._initGeometryStatus=false
+            this.animationAction((t) => t.resetGeometryStatus())();
+        }
+        // 强制刷新
         this.handleRender();
         let activeInstances = this._animationArr.concat([]);
         const that = this;
@@ -309,6 +319,7 @@ export default class TimeLine {
      * @return {*}
      */
     restore() {
+        this._initGeometryStatus=true
         this.reversed(false);
         this.setSpeed(1);
         this.animationAction((t) => t.restore())();

src/service/PlotBase/Animation/limit.js

@@ -4,7 +4,7 @@
  * @Author: zk
  * @Date: 2022-06-06 21:00:52
  * @LastEditors: zk
- * @LastEditTime: 2022-06-08 11:32:50
+ * @LastEditTime: 2022-06-16 15:42:45
  */
 
 /**