【动效增强】【修改bug，支持整体路径动画】

zhaokai · zhaokai · commit 19e1077e885e · 2022-06-30T17:06:40.000+08:00
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotBaseAnimation.js b/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-16 17:38:39
+ * @LastEditTime: 2022-06-30 15:52:51
  */
 import { AnimationUtil } from '../utils/AnimationUtil';
 import { easingFunc } from '../utils/Easing';
@@ -41,7 +41,7 @@ export default class PlotBaseAnimation {
         // 状态
         this._updateGeometry = true;
         // 允许动画作用
-        this._allowAnimation= false
+        this._allowAnimation = false;
     }
     /**
      * @function: Module:PlotBaseAnimation.prototype.update
@@ -95,16 +95,22 @@ export default class PlotBaseAnimation {
         const totalDuration = insDuration + insTimelineOffset;
         const insDelay = this.delay + insTimelineOffset;
         const insEndDelay = totalDuration - this.endDelay;
+
         const insTime = this.adjustTime(engineTime);
 
         this.currentTime = this.minMax(insTime, 0, totalDuration);
 
         if (!this.loopBegan && this.currentTime > 0) {
             this.loopBegan = true;
         }
-        if (insTime <= insDelay) {
+        if (insTime <= insTimelineOffset ) {
+            return;
+        }
+
+        if(insTime <= insDelay && this.remaining>1){
             this.setAnimationsProgress(0);
         }
+
         if (insTime >= insEndDelay) {
             this.setAnimationsProgress(insDuration);
         }
@@ -159,7 +165,7 @@ export default class PlotBaseAnimation {
      * @return {*}
      */
     restore() {
-        this.updateGeometry()
+        this.updateGeometry();
         this.reset();
     }
 
@@ -276,8 +282,8 @@ export default class PlotBaseAnimation {
         }
         return false;
     }
-    resetGeometryStatus(){
-        this.render(0.001)
+    resetGeometryStatus() {
+        this.render(0.001);
     }
     updateGeometry() {
         if (this._updateGeometry) {
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotBlinkAnimation.js b/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotBlinkAnimation.js
@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-08 11:47:33
+ * @LastEditTime: 2022-06-29 17:30:44
  */
 import PlotColorAnimation from './PlotColorAnimation';
 import { GradientColor } from '../../../utils/GradientColor';
@@ -19,8 +19,8 @@ export default class PlotBlinkAnimation extends PlotColorAnimation {
         // animation type
         this.animationType = 'blink-animation';
         //init base options
-        this.loop = AnimationUtil.defineValue(options.loop, 500);
-        this.duration = AnimationUtil.defineValue(options.duration, 1000);
+        this.loop = AnimationUtil.defineValue(options.loop, 50000000);
+        this.duration = AnimationUtil.defineValue(options.duration, 500);
         // init options
         this.blinkColors = AnimationUtil.defineValue(options.blinkColors, []);
         this.isBlinkGrad = AnimationUtil.defineValue(options.isBlinkGrad, true);
@@ -59,36 +59,44 @@ export default class PlotBlinkAnimation extends PlotColorAnimation {
         if (blinkColors.length === 0) {
             color = null;
         } else {
-            const lastColor = blinkColors[blinkColors.length - 1];
-            if (!this.endStatus) {
-                blinkColors = blinkColors.concat([this._calcColorRate(lastColor, 0)]);
-            }
             color = this.isBlinkGrad ? this._calcColorArrByRate(blinkColors, rate) : this._calcColorArrByRateWithNoGrad(blinkColors, rate);
         }
 
         keys.forEach((s) => {
             if (Object.prototype.toString.call(colorItem[s]) === '[object Object]') {
                 this._applyColorByRate(colorItem[s], rate);
             } else {
-                colorItem[s] = color ? color : (this.isBlinkGrad ? this._calcColorRate(colorItem[s], rate) : colorItem[s]);
+                if (color) {
+                    colorItem[s] = color;
+                } else {
+                    const defaultColorArr = [];
+                    defaultColorArr.push(colorItem[s]);
+                    defaultColorArr.unshift(this._calcColorRate(colorItem[s], 0))
+                    colorItem[s] = this.isBlinkGrad
+                        ? this._calcColorArrByRate(defaultColorArr, rate)
+                        : this._calcColorArrByRateWithNoGrad(defaultColorArr, rate);
+                }
             }
         });
     }
 
-    
-    exportOption(){
-        const object = super.exportOption()
-        const propertys= PlotBlinkAnimation.cacheProperty.split(',')
-        propertys.forEach((s)=>{
-            object[s]=this[s]
-        })
-        return object
+    exportOption() {
+        const object = super.exportOption();
+        const propertys = PlotBlinkAnimation.cacheProperty.split(',');
+        propertys.forEach((s) => {
+            object[s] = this[s];
+        });
+        return object;
     }
 
     render(rate) {
+        if(rate>=1){
+             this.clearColorItem()
+             return
+        }
         const colorItems = this._getColorItemByRate(rate);
         this._setColorItems(colorItems);
     }
 }
 
-PlotBlinkAnimation.cacheProperty='blinkColors,isBlinkGrad,endStatus'
+PlotBlinkAnimation.cacheProperty = 'blinkColors,isBlinkGrad,endStatus';
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotColorAnimation.js b/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotColorAnimation.js
@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-08 12:49:59
+ * @LastEditTime: 2022-06-29 17:06:36
  */
 import PlotBaseAnimation from '../../PlotBaseAnimation';
 import { AnimationColorUtil } from '../../../utils/ColorUtil';
@@ -95,7 +95,7 @@ export default class PlotColorAnimation extends PlotBaseAnimation {
             if (Object.prototype.toString.call(colorItem[s]) === '[object Object]') {
                 this._applyColorByRate(colorItem[s], rate);
             } else {
-                colorItem[s] = this._calcColorRate(colorItem[s], colorRate);
+                colorItem[s] = this._calcColorRate(colorItem[s], rate);
             }
         });
     }
@@ -167,11 +167,15 @@ export default class PlotColorAnimation extends PlotBaseAnimation {
             });
         });
     }
-    restore() {
-        super.restore();
+    
+    clearColorItem(){
         if (this.firstColorItem) {
             const colorItems = JSON.parse(JSON.stringify(this.firstColorItem));
             this._setColorItems(colorItems);
         }
     }
+    restore() {
+        super.restore();
+        this.clearColorItem()
+    }
 }
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotVisibleAnimation.js b/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotColorAnimation/PlotVisibleAnimation.js
@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-07 15:41:34
+ * @LastEditTime: 2022-06-29 17:27:48
  */
 import { AnimationUtil } from '../../../utils/AnimationUtil';
 import PlotColorAnimation from './PlotColorAnimation';
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotGrowAnimation.js b/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 17:20:50
+ * @LastEditTime: 2022-06-30 12:09:04
  */
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
 import Spline from '../../../../../PlotUtilBase/Geometry/Spline';
diff --git a/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotPathAnimation.js b/src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotPathAnimation.js
@@ -2,13 +2,14 @@ import { AnimationUtil } from '../../../utils/AnimationUtil';
 import PlotCoordsAnimation from './PlotCoordsAnimation';
 import Spline from '../../../../../PlotUtilBase/Geometry/Spline';
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
+import { calculatePolygonGravityCenter } from '../../../../../PlotUtilBase/Math/MathUtils';
 
 /*
  * @Description: 路径动画类
  * @Author: zk
  * @Date: 2022-04-19 09:59:57
  * @LastEditors: zk
- * @LastEditTime: 2022-06-15 20:43:05
+ * @LastEditTime: 2022-06-30 15:34:50
  */
 export default class PlotPathAnimation extends PlotCoordsAnimation {
     constructor(options) {
@@ -90,6 +91,26 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
                 return 0;
             }
         });
+
+        this.centerActions = this._plotObjects.map((plotobject) => {
+            const positions = plotobject.getElement().positions;
+            const len = positions.length;
+            let center;
+            if (len === 1) {
+                center = [positions[0].x, positions[0].y];
+            } else if (len === 2) {
+                center = [(positions[1].x - positions[0].x) / 2 + positions[0].x, (positions[1].y - positions[0].y) / 2 + positions[0].y];
+            } else {
+                // 计算中心点
+                center = calculatePolygonGravityCenter(positions.map((t) => [t.x, t.y]));
+            }
+
+            return function (polys, pnt) {
+                return polys.map((pol) => {
+                    return new Point(pol.x + pnt.x - center[0], pol.y + pnt.y - center[1]);
+                });
+            };
+        });
     }
 
     _initPathWayObject(options) {
@@ -164,13 +185,14 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
 
         const pnt = new Point(v[0][0], v[0][1]);
 
-        this._plotObjects.forEach((plotobject) => {
+        this._plotObjects.forEach((plotobject, index) => {
             const element = plotobject.getElement();
+
             // 设置沿斜线方向的角度
-            if (this.alongTangent) {
+            if (this.alongTangent && element.setGeometryAngle) {
                 element.setGeometryAngle(v[1]);
             }
-            this._setPnts(plotobject, [pnt]);
+            this._setPnts(plotobject, this.centerActions[index](this._animationPolys[index], pnt));
         });
     }
 }
diff --git a/src/service/PlotBase/Animation/limit.js b/src/service/PlotBase/Animation/limit.js
@@ -4,7 +4,7 @@
  * @Author: zk
  * @Date: 2022-06-06 21:00:52
  * @LastEditors: zk
- * @LastEditTime: 2022-06-16 15:42:45
+ * @LastEditTime: 2022-06-29 17:33:29
  */
 
 /**
@@ -137,10 +137,6 @@ export const v = {
             isBlinkGrad: {
                 type: 'boolean',
                 default: true
-            },
-            endStatus: {
-                type: 'boolean',
-                default: true
             }
         }
     },
diff --git a/src/service/PlotBase/SvgLoader/element/PathElement.js b/src/service/PlotBase/SvgLoader/element/PathElement.js
@@ -3,7 +3,7 @@
 /*
  * @Author: your name
  * @Date: 2021-08-30 18:10:16
- * @LastEditTime: 2022-06-22 10:22:59
+ * @LastEditTime: 2022-06-29 17:13:53
  * @LastEditors: zk
  * @Description: In User Settings Edit
  * @FilePath: \MapGISPlotBase\src\svg-loader\PathElement.js
@@ -117,6 +117,7 @@ export default class PathElement extends RenderedElement {
   _getCoords(matrix) {
     const pathArr = this._geometryPnts();
     let v = [];
+    
     if (Array.isArray(matrix)) {
       matrix.forEach((m) => {
         let t = [];
@@ -138,7 +139,6 @@ export default class PathElement extends RenderedElement {
       }
       v = pathArr;
     }
-
     return v;
 
   }
@@ -147,6 +147,7 @@ export default class PathElement extends RenderedElement {
     const transformMatrix = this._getTransform();
     const matrix = this._getMatrix();
     let _coords = [];
+    
     if (this.isAllowCoords) {
       if (Array.isArray(transformMatrix)) {
         const trueMatrixs = transformMatrix.map((s) => {
@@ -160,7 +161,6 @@ export default class PathElement extends RenderedElement {
     } else {
       _coords = [];
     }
-
     return _coords;
   }
 
diff --git a/src/service/PlotBase/SvgLoader/element/TSpanElement.js b/src/service/PlotBase/SvgLoader/element/TSpanElement.js
@@ -2,7 +2,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 18:57:30
- * @LastEditTime: 2022-06-08 17:13:57
+ * @LastEditTime: 2022-06-28 17:55:21
  * @LastEditors: zk
  * @Description: In User Settings Edit
  * @FilePath: \MapGISPlotBase\src\svg-loader\element\TSapnElement.js
@@ -19,7 +19,6 @@ import FontStyleClass from './PropertyClass/BaseCanvasClass/FontStyleClass';
 import FillStyleClass from './PropertyClass/BaseCanvasClass/FillStyleClass';
 import StrokeStyleClass from './PropertyClass/BaseCanvasClass/StrokeStyleClass';
 import PropertyClass from './PropertyClass/PropertyClass';
-import DimModal from './DimModal';
 import Matrix3 from '../../../PlotUtilBase/Math/Matrix3';
 
 class TSpanElement extends TextElement {
diff --git a/src/service/PlotBase/SvgLoader/element/extend/MainLineElement.js b/src/service/PlotBase/SvgLoader/element/extend/MainLineElement.js

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`* @Author: zk`
`4`	`4`	`* @Date: 2022-03-23 10:02:49`
`5`	`5`	`* @LastEditors: zk`
`6`		`- * @LastEditTime: 2022-06-08 12:49:59`
	`6`	`+ * @LastEditTime: 2022-06-29 17:06:36`
`7`	`7`	`*/`
`8`	`8`	`import PlotBaseAnimation from '../../PlotBaseAnimation';`
`9`	`9`	`import { AnimationColorUtil } from '../../../utils/ColorUtil';`
`@@ -95,7 +95,7 @@ export default class PlotColorAnimation extends PlotBaseAnimation {`
`95`	`95`	`if (Object.prototype.toString.call(colorItem[s]) === '[object Object]') {`
`96`	`96`	`this._applyColorByRate(colorItem[s], rate);`
`97`	`97`	`} else {`
`98`		`- colorItem[s] = this._calcColorRate(colorItem[s], colorRate);`
	`98`	`+ colorItem[s] = this._calcColorRate(colorItem[s], rate);`
`99`	`99`	`}`
`100`	`100`	`});`
`101`	`101`	`}`
`@@ -167,11 +167,15 @@ export default class PlotColorAnimation extends PlotBaseAnimation {`
`167`	`167`	`});`
`168`	`168`	`});`
`169`	`169`	`}`
`170`		`- restore() {`
`171`		`- super.restore();`
	`170`	`+`
	`171`	`+ clearColorItem(){`
`172`	`172`	`if (this.firstColorItem) {`
`173`	`173`	`const colorItems = JSON.parse(JSON.stringify(this.firstColorItem));`
`174`	`174`	`this._setColorItems(colorItems);`
`175`	`175`	`}`
`176`	`176`	`}`
	`177`	`+ restore() {`
	`178`	`+ super.restore();`
	`179`	`+ this.clearColorItem()`
	`180`	`+ }`
`177`	`181`	`}`