Merge pull request #16943 from wangguisong/feat-goback

feat(LineDraw):series-lines support the effect animation go back
apache · Apr 27, 2022 · 0fa933d · 0fa933d
2 parents 4493fce + 0478f51
commit 0fa933d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/src/chart/helper/EffectLine.ts b/src/chart/helper/EffectLine.ts
@@ -47,6 +47,8 @@ class EffectLine extends graphic.Group {
 
     private _loop: boolean;
 
+    private _roundTrip: boolean;
+
     private _symbolScale: number[];
 
     constructor(lineData: SeriesData, idx: number, seriesScope: LineDrawSeriesScope) {
@@ -121,6 +123,7 @@ class EffectLine extends graphic.Group {
 
         let period = effectModel.get('period') * 1000;
         const loop = effectModel.get('loop');
+        const roundTrip = effectModel.get('roundTrip');
         const constantSpeed = effectModel.get('constantSpeed');
         const delayExpr = zrUtil.retrieve(effectModel.get('delay'), function (idx) {
             return idx / lineData.count() * period / 3;
@@ -135,7 +138,7 @@ class EffectLine extends graphic.Group {
             period = this._getLineLength(symbol) / constantSpeed * 1000;
         }
 
-        if (period !== this._period || loop !== this._loop) {
+        if (period !== this._period || loop !== this._loop || roundTrip !== this._roundTrip) {
             symbol.stopAnimation();
             let delayNum: number;
             if (zrUtil.isFunction(delayExpr)) {
@@ -149,21 +152,23 @@ class EffectLine extends graphic.Group {
             }
 
             this._animateSymbol(
-                symbol, period, delayNum, loop
+                symbol, period, delayNum, loop, roundTrip
             );
         }
 
         this._period = period;
         this._loop = loop;
+        this._roundTrip = roundTrip;
     }
 
-    private _animateSymbol(symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean) {
+    private _animateSymbol(
+        symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean, roundTrip: boolean) {
         if (period > 0) {
             symbol.__t = 0;
             const self = this;
             const animator = symbol.animate('', loop)
-                .when(period, {
-                    __t: 1
+                .when(roundTrip ? period * 2 : period, {
+                    __t: roundTrip ? 2 : 1
                 })
                 .delay(delayNum)
                 .during(function () {
@@ -202,7 +207,7 @@ class EffectLine extends graphic.Group {
         const p1 = symbol.__p1;
         const p2 = symbol.__p2;
         const cp1 = symbol.__cp1;
-        const t = symbol.__t;
+        const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
         const pos = [symbol.x, symbol.y];
         const lastPos = pos.slice();
         const quadraticAt = curveUtil.quadraticAt;
@@ -211,8 +216,11 @@ class EffectLine extends graphic.Group {
         pos[1] = quadraticAt(p1[1], cp1[1], p2[1], t);
 
         // Tangent
-        const tx = quadraticDerivativeAt(p1[0], cp1[0], p2[0], t);
-        const ty = quadraticDerivativeAt(p1[1], cp1[1], p2[1], t);
+        const tx = symbol.__t < 1 ? quadraticDerivativeAt(p1[0], cp1[0], p2[0], t)
+                 : quadraticDerivativeAt(p2[0], cp1[0], p1[0], 1 - t);
+         const ty = symbol.__t < 1 ? quadraticDerivativeAt(p1[1], cp1[1], p2[1], t)
+                 : quadraticDerivativeAt(p2[1], cp1[1], p1[1], 1 - t);
+
 
         symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
         // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
@@ -247,4 +255,4 @@ class EffectLine extends graphic.Group {
         this._updateEffectAnimation(lineData, effectModel, idx);
     }
 }
-export default EffectLine;
+export default EffectLine;
diff --git a/src/chart/helper/EffectPolyline.ts b/src/chart/helper/EffectPolyline.ts
@@ -67,7 +67,7 @@ class EffectPolyline extends EffectLine {
 
     // Override
     protected _updateSymbolPosition(symbol: ECSymbolOnEffectLine) {
-        const t = symbol.__t;
+        const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
         const points = this._points;
         const offsets = this._offsets;
         const len = points.length;
@@ -107,8 +107,8 @@ class EffectPolyline extends EffectLine {
         symbol.x = p0[0] * (1 - p) + p * p1[0];
         symbol.y = p0[1] * (1 - p) + p * p1[1];
 
-        const tx = p1[0] - p0[0];
-        const ty = p1[1] - p0[1];
+        const tx = symbol.__t < 1 ? p1[0] - p0[0] : p0[0] - p1[0];
+        const ty = symbol.__t < 1 ? p1[1] - p0[1] : p0[1] - p1[1];
         symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
 
         this._lastFrame = frame;
@@ -119,4 +119,4 @@ class EffectPolyline extends EffectLine {
 
 }
 
-export default EffectPolyline;
+export default EffectPolyline;
diff --git a/src/chart/helper/LineDraw.ts b/src/chart/helper/LineDraw.ts
@@ -73,6 +73,7 @@ export interface LineDrawModelOption extends LineDrawStateOption,
         symbol?: string
         symbolSize?: number | number[]
         loop?: boolean
+        roundTrip?: boolean
         /**
          * Length of trail, 0 - 1
          */