[incubator-echarts] 01/06: feat: change default line init animation

[ov...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a commit to branch line-label
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 87d1d718c21973bf2a280c5361fe51ade9f62380
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Sep 2 14:17:12 2020 +0800

    feat: change default line init animation
---
 src/chart/line/LineView.ts | 84 ++++++++++++++++++++++++++++++++++++++++++++++
 src/util/types.ts          |  2 +-
 2 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 2c77752..00425cc 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -43,6 +43,7 @@ import type Axis2D from '../../coord/cartesian/Axis2D';
 import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
 import { setStatesStylesFromModel, setStatesFlag, enableHoverEmphasis } from '../../util/states';
 import { getECData } from '../../util/ecData';
+import Displayable from 'zrender/src/graphic/Displayable';
 
 
 type PolarArea = ReturnType<Polar['getArea']>;
@@ -460,6 +461,7 @@ class LineView extends ChartView {
                 isIgnore: isIgnoreFunc,
                 clipShape: clipShapeForSymbol
             });
+            this._initAnimation(data, isCoordSysPolar, clipShapeForSymbol);
 
             if (step) {
                 // TODO If stacked series is not step
@@ -748,6 +750,88 @@ class LineView extends ChartView {
         return polygon;
     }
 
+    _initAnimation(
+        data: List,
+        isCoordSysPolar: boolean,
+        clipShape: PolarArea | Cartesian2DArea
+    ) {
+        const seriesModel = data.hostModel;
+        let seriesDuration = seriesModel.get('animationDuration');
+        if (typeof seriesDuration === 'function') {
+            seriesDuration = seriesDuration(null);
+        }
+        let seriesDalay = seriesModel.get('animationDelay') || 0;
+        if (typeof seriesDalay === 'function') {
+            seriesDalay = seriesDalay(null);
+        }
+
+        data.eachItemGraphicEl(function (symbol, idx) {
+            const el = (symbol as SymbolClz).childAt(0) as Displayable;
+            if (el) {
+                const symbolSize = data.getItemVisual(
+                    idx,
+                    'symbolSize'
+                );
+                const symbolSizeArr = zrUtil.isArray(symbolSize)
+                    ? symbolSize : [symbolSize, symbolSize];
+                const lineWidth = el.style.lineWidth;
+
+                const total = isCoordSysPolar
+                    ? 0
+                    : (clipShape as Cartesian2DArea).width;
+                const start = isCoordSysPolar
+                    ? 0
+                    : (clipShape as Cartesian2DArea).x;
+                const delay = (
+                    total === 0
+                        ? 0
+                        : seriesDuration / total * (symbol.x - start)
+                ) + seriesDalay;
+
+                el.stopAnimation();
+
+                el.attr({
+                    scaleX: 1,
+                    scaleY: 1,
+                    style: {
+                        lineWidth: 0
+                    }
+                });
+                el.animateTo({
+                    scaleX: symbolSizeArr[0] / 2,
+                    scaleY: symbolSizeArr[1] / 2,
+                    style: {
+                        lineWidth: lineWidth
+                    }
+                }, {
+                    duration: 200,
+                    delay: delay
+                });
+
+                const text = el.getTextContent();
+                const textOpacity = text.style.opacity == null ? 1 : text.style.opacity;
+                if (text) {
+                    text.stopAnimation();
+                    text.attr({
+                        style: {
+                            opacity: 0
+                        }
+                    });
+                    text.animateTo({
+                        style: {
+                            opacity: textOpacity
+                        }
+                    }, {
+                        duration: 300,
+                        delay: delay
+                    });
+                }
+
+                (el as ECElement).disableLabelAnimation = true;
+            }
+        });
+    }
+
     /**
      * @private
      */
diff --git a/src/util/types.ts b/src/util/types.ts
index 52b4906..b9e1b8d 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -695,7 +695,7 @@ export interface AnimationOptionMixin {
      * Delay of initialize animation
      * Can be a callback to specify duration of each element
      */
-    animationDelay?: AnimationDelayCallback
+    animationDelay?: number | AnimationDelayCallback
     // For update animation
     /**
      * Delay of data update animation.


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org