From dd950c78ae65c95b9eebc82027cdadbccf779c82 Mon Sep 17 00:00:00 2001 From: "wangguisong@sinotrans.com" Date: Tue, 26 Apr 2022 14:01:20 +0800 Subject: [PATCH 1/2] feat(LineDraw):series-lines support the effect animation go back --- src/chart/helper/EffectLine.ts | 26 +++++++++++++++++--------- src/chart/helper/EffectPolyline.ts | 8 ++++---- src/chart/helper/LineDraw.ts | 1 + 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/chart/helper/EffectLine.ts b/src/chart/helper/EffectLine.ts index 412b27297c..66aa96a4b2 100644 --- 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 _goback: 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 goback = effectModel.get('goback'); 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 || goback !== this._goback) { 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, goback ); } this._period = period; this._loop = loop; + this._goback = goback; } - private _animateSymbol(symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean) { + private _animateSymbol( + symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean, goback: boolean) { if (period > 0) { symbol.__t = 0; const self = this; const animator = symbol.animate('', loop) - .when(period, { - __t: 1 + .when(goback ? period * 2 : period, { + __t: goback ? 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; \ No newline at end of file +export default EffectLine; diff --git a/src/chart/helper/EffectPolyline.ts b/src/chart/helper/EffectPolyline.ts index a250cb590a..389dbe4d83 100644 --- 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; \ No newline at end of file +export default EffectPolyline; diff --git a/src/chart/helper/LineDraw.ts b/src/chart/helper/LineDraw.ts index d96595395b..d05231c93d 100644 --- 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 + goback?: boolean /** * Length of trail, 0 - 1 */ From 0478f51cdd2186291b4e98fb6bc73fa0fb950730 Mon Sep 17 00:00:00 2001 From: "wangguisong@sinotrans.com" Date: Tue, 26 Apr 2022 15:41:21 +0800 Subject: [PATCH 2/2] rename the option from goback to roundTrip --- src/chart/helper/EffectLine.ts | 16 ++++++++-------- src/chart/helper/LineDraw.ts | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/chart/helper/EffectLine.ts b/src/chart/helper/EffectLine.ts index 66aa96a4b2..f368d83ac0 100644 --- a/src/chart/helper/EffectLine.ts +++ b/src/chart/helper/EffectLine.ts @@ -47,7 +47,7 @@ class EffectLine extends graphic.Group { private _loop: boolean; - private _goback: boolean; + private _roundTrip: boolean; private _symbolScale: number[]; @@ -123,7 +123,7 @@ class EffectLine extends graphic.Group { let period = effectModel.get('period') * 1000; const loop = effectModel.get('loop'); - const goback = effectModel.get('goback'); + 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; @@ -138,7 +138,7 @@ class EffectLine extends graphic.Group { period = this._getLineLength(symbol) / constantSpeed * 1000; } - if (period !== this._period || loop !== this._loop || goback !== this._goback) { + if (period !== this._period || loop !== this._loop || roundTrip !== this._roundTrip) { symbol.stopAnimation(); let delayNum: number; if (zrUtil.isFunction(delayExpr)) { @@ -152,23 +152,23 @@ class EffectLine extends graphic.Group { } this._animateSymbol( - symbol, period, delayNum, loop, goback + symbol, period, delayNum, loop, roundTrip ); } this._period = period; this._loop = loop; - this._goback = goback; + this._roundTrip = roundTrip; } private _animateSymbol( - symbol: ECSymbolOnEffectLine, period: number, delayNum: number, loop: boolean, goback: boolean) { + 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(goback ? period * 2 : period, { - __t: goback ? 2 : 1 + .when(roundTrip ? period * 2 : period, { + __t: roundTrip ? 2 : 1 }) .delay(delayNum) .during(function () { diff --git a/src/chart/helper/LineDraw.ts b/src/chart/helper/LineDraw.ts index d05231c93d..94c417f4f7 100644 --- a/src/chart/helper/LineDraw.ts +++ b/src/chart/helper/LineDraw.ts @@ -73,7 +73,7 @@ export interface LineDrawModelOption extends LineDrawStateOption, symbol?: string symbolSize?: number | number[] loop?: boolean - goback?: boolean + roundTrip?: boolean /** * Length of trail, 0 - 1 */