优化时间轴方法 打包问题

Author: zhaokai

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-15 20:47:28
+ * @LastEditTime: 2022-06-16 11:37:25
  */
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
 import Spline from '../../../../../PlotUtilBase/Geometry/Spline';
@@ -14,8 +14,8 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
     constructor(options) {
         super(options);
     }
-    _initBaseAttributes(options){
-        super._initBaseAttributes(options)
+    _initBaseAttributes(options) {
+        super._initBaseAttributes(options);
         // animation type
         this.animationType = 'grow-animation';
         // init options
@@ -31,7 +31,11 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
         // 1.spline
         if (mode === 'spline') {
             this.splines = polysArr.map((s) => {
-                return new Spline(s,{});
+                if (s.length >= 2) {
+                    return new Spline(s, {});
+                } else {
+                    return null;
+                }
             });
         } else if (mode === 'center') {
             this.modeFunArr = [];
@@ -40,6 +44,10 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
                 const len = polys.length;
                 const v = [];
                 let center;
+                if (len <= 1) {
+                    v.push(null);
+                    continue;
+                }
                 if (len === 2) {
                     center = [(polys[1].x - polys[0].x) / 2 + polys[0].x, (polys[1].y - polys[0].y) / 2 + polys[0].y];
                 } else {
@@ -69,6 +77,7 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
         const splines = this.splines;
         const trueRate = this._calcTrueRate(rate);
         splines.forEach((t, index) => {
+            if (!t) return;
             const animationPoly = this._animationPolys[index];
             const animationObject = this._plotObjects[index];
             if (animationPoly.length > 0) {
@@ -92,25 +101,25 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
     _centerAction(rate) {
         const trueRate = this._calcTrueRate(rate);
         this._plotObjects.forEach((plotObject, i) => {
-            const tPolys = this.modeFunArr[i].map((s) => {  
+            if (!this.modeFunArr || !this.modeFunArr[i]) return;
+            const tPolys = this.modeFunArr[i].map((s) => {
                 const p = s(trueRate);
-                
+
                 return new Point(p[0], p[1]);
             });
             this._setPnts(plotObject, tPolys);
         });
     }
 
-    exportOption(){
-        const object = super.exportOption()
-        const propertys= PlotGrowAnimation.cacheProperty.split(',')
-        propertys.forEach((s)=>{
-            object[s]=this[s]
-        })
-        return object
+    exportOption() {
+        const object = super.exportOption();
+        const propertys = PlotGrowAnimation.cacheProperty.split(',');
+        propertys.forEach((s) => {
+            object[s] = this[s];
+        });
+        return object;
     }
 
-
     _render(rate) {
         const mode = this.growMode;
         if (mode === 'spline') {
@@ -124,4 +133,4 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
     }
 }
 
-PlotGrowAnimation.cacheProperty='startRate,endRate,growMode'
+PlotGrowAnimation.cacheProperty = 'startRate,endRate,growMode';

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-15 20:52:13
+ * @LastEditTime: 2022-06-16 10:42:15
  */
 
 import { AnimationReg } from '../AnimationTypes';
@@ -15,13 +15,15 @@ export default class TimeLine {
         this._animationArr = [];
         // 初始化图层组方法
         this.initLayerGroupFunction(layerGroup);
-        //-- 时间轴选项 --
+        //-- 时间轴选项 -
         // 反转
         this.invert = false;
         // 速率
         this.speed = 1;
         // 请求raf
         this.raf = null;
+        // 是否重新刷新动画队列
+        // this._refreshAnimationList = false;
     }
 
     /**
@@ -88,13 +90,23 @@ export default class TimeLine {
         this.resetTime();
         this.animationAction((t) => t.play())();
         this.handleRender();
-        const activeInstances = this._animationArr.concat([]);
+        let activeInstances = this._animationArr.concat([]);
         const that = this;
         const engine = (function () {
             function start() {
                 that.raf = requestAnimationFrame(step);
             }
             function step(t) {
+                
+                // 重新刷新动画队列
+                // if (that._refreshAnimationList) {
+                //     activeInstances = that._animationArr.concat([]);
+                //     activeInstances.forEach((ani) => {
+                //         ani.play();
+                //     });
+                //     that._refreshAnimationList = false;
+                // }
+
                 let activeInstancesLength = activeInstances.length;
                 if (activeInstancesLength) {
                     let i = 0;
@@ -227,10 +239,12 @@ export default class TimeLine {
      * @return {*}
      */
     seek(time) {
+        this.pause()
         this.animationAction((s) => {
             s.seek(time);
         })();
         this.handleRender();
+        this._refreshAnimationList = true;
     }
 
     /**

src/service/PlotBase/SvgLoader/element/StyleElement.js

@@ -4,20 +4,21 @@
  * @Author: zk
  * @Date: 2022-06-14 13:54:55
  * @LastEditors: zk
- * @LastEditTime: 2022-06-14 14:47:59
+ * @LastEditTime: 2022-06-16 11:37:48
  */
 
 import Element from './Element';
 import StringUtil from '../../../PlotUtilBase/Util/StringUtil'
 import Property from './Property';
 export default class StyleElement extends Element {
 
-	type = 'style';
+
 	constructor(
 		node
 	) {
 		super(node);
         const that=this
+		this.type = 'style';
         this._styles={}
 		const css = StringUtil.compressSpaces(
 			Array.from(node.childNodes)