feat: support guide animation.

antvis · Jul 30, 2018 · 51fd1dd · 51fd1dd
1 parent 8b1f7b1
commit 51fd1dd
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 22 deletions.
diff --git a/demos/area-00.html b/demos/area-00.html
@@ -30,6 +30,15 @@
   });
 
   chart.source(data);
+  chart.animate({
+    'guide-tag': {
+      appear: {
+        animation: 'fadeIn',
+        duration: 450,
+        delay: 1000
+      }
+    }
+  });
   chart.scale({
     time: {
       range: [ 0, 1 ]
@@ -63,16 +72,57 @@
     content: '最高点',
     offsetY: -5,
     direct: 'tl'
+  }).tag({
+    position: [2, 2000],
+    content: '2000',
+    offsetY: -5,
+    direct: 'tc'
   });
   chart.area().position('time*tem');
   chart.line().position('time*tem');
   chart.render();
 
-  const point = chart.getPosition({
-    time: 'Apr.',
-    tem: 2600
-  });
-  chart.showTooltip(point);
+  setTimeout(() => {
+    const newData = [
+      { time: 'Jan.', tem: 1000 },
+      { time: 'Feb.', tem: 2200 },
+      { time: 'Mar.', tem: 2000 },
+      { time: 'Apr.', tem: 2600 },
+      { time: 'May.', tem: 2000 },
+      { time: 'Jun.', tem: 2600 },
+      { time: 'Jul.', tem: 2800 },
+      { time: 'Aug.', tem: 2000 },
+      { time: 'SSS.', tem: 2300 },
+      { time: 'FSD.', tem: 1500 },
+      { time: '343.', tem: 3060 },
+      { time: 'IUE.', tem: 3000 },
+    ];
+    chart.guide().clear();
+    chart.guide().tag({
+      position: [6, 2800],
+      content: '最高点',
+      offsetY: -5,
+      direct: 'tl'
+    }).tag({
+      position: [2, 2000],
+      content: '2000',
+      offsetY: -5,
+      direct: 'tc'
+    }).tag({
+      position: ['IUE.', 3000],
+      content: '3000',
+      offsetY: -5,
+      direct: 'tl'
+    });
+    chart.changeData(newData);
+  }, 2000);
+  // console.log(chart.get('canvas'));
+
+  // const point = chart.getPosition({
+  //   time: 'Apr.',
+  //   tem: 2600
+  // });
+  // chart.showTooltip(point);
 </script>
 </body>
 </html>
diff --git a/demos/multiple-y-guide.html b/demos/multiple-y-guide.html
@@ -40,6 +40,26 @@
     max: 30
   }
 });
+chart.animate({
+  'guide-line': {
+    appear: {
+      animation(shape, animateCfg) {
+        const attrs = shape.attr();
+        console.log(shape.get('index'));
+        const { x1, x2, y1, y2 } = attrs;
+        shape.attr('x2', x1);
+
+        shape.animate().to(F2.Util.mix({
+          attrs: {
+            x2
+          }
+        }, animateCfg));
+      },
+      duration: 1000,
+      delay: 1000
+    }
+  }
+});
 
 // 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
 chart.axis("time", {
@@ -51,7 +71,7 @@
 chart.axis("tem", {
   label: {
     fontSize: 14
-  }
+  },
 });
 chart.axis("rain", {
   label: {
@@ -74,10 +94,10 @@
   start(xScale, yScales) {
     let sum = 0;
 
-    console.log(xScale, yScales);
+    // console.log(xScale, yScales);
     const yScale = yScales[1];
     yScale.values.forEach(v => (sum += 1 - v / 40));
-    console.log(sum / yScale.values.length);
+    // console.log(sum / yScale.values.length);
     return ["0%", sum / yScale.values.length * 100];
   },
   end(xScale, yScales) {
@@ -96,6 +116,7 @@
 });
 
 chart.render();
+console.log(chart.get('canvas'));
 </script>
 </body>
 </html>
diff --git a/src/animation/detail.js b/src/animation/detail.js
@@ -152,7 +152,6 @@ function getShapes(geoms, chart, coord) {
   Util.each(geoms, geom => {
     const geomContainer = geom.get('container');
     const geomShapes = geomContainer.get('children'); // 获取几何标记的 shapes
-    // const coord = geom.get('coord');
     const type = geom.get('type');
     const animateCfg = Util.isNil(geom.get('animateCfg')) ? _getAnimateCfgByShapeType(type, chart) : geom.get('animateCfg');
     if (animateCfg !== false) {
@@ -307,6 +306,10 @@ function addAnimate(cache, shapes, canvas) {
 function _getAnimateCfgByShapeType(type, chart) {
   const animateCfg = chart.get('animate');
 
+  if (type.indexOf('guide-tag') > -1) {
+    type = 'guide-tag'; // 因为 guide.tag 包含多个 shape，但是对外它们是一体的
+  }
+
   if (animateCfg) {
     return animateCfg[type];
   }
@@ -334,19 +337,28 @@ module.exports = {
       isUpdate = false;
     }
 
-    const shapes = getShapes(geoms, chart, coord); // geom 上的图形
-
+    const cacheShapes = getShapes(geoms, chart, coord);
     const { frontPlot, backPlot } = chart.get('axisController');
-    const axisShapes = [];
-    // get axes' shapes
-    frontPlot.get('children').concat(backPlot.get('children')).forEach(s => {
+    const axisShapes = frontPlot.get('children').concat(backPlot.get('children'));
+    let guideShapes = [];
+    if (chart.get('guideController')) {
+      guideShapes = chart.get('guideController').guideShapes;
+    }
+    axisShapes.concat(guideShapes).forEach(s => {
       const className = s.get('className');
+      const animateCfg = _getAnimateCfgByShapeType(className, chart);
       s.set('coord', coord);
-      s.set('animateCfg', _getAnimateCfgByShapeType(className, chart));
-      axisShapes.push(s);
+      s.set('animateCfg', animateCfg);
+      if (!isUpdate && animateCfg && animateCfg.appear) { // 首次入场动画
+        const defaultCfg = Animate.getAnimateCfg(className, 'appear');
+        const appearCfg = Util.deepMix({}, defaultCfg, animateCfg.appear);
+        const animate = getAnimate(className, coord, 'appear', appearCfg.animation);
+        if (Util.isFunction(animate)) {
+          animate(s, appearCfg, coord);
+        }
+      }
+      cacheShapes.push(s);
     });
-
-    const cacheShapes = shapes.concat(axisShapes);
     canvas.set('caches', cache(cacheShapes));
 
     if (isUpdate) {

diff --git a/src/component/guide/arc.js b/src/component/guide/arc.js
@@ -44,6 +44,7 @@ class Arc extends GuideBase {
       }, self.style)
     });
     self.element = shape;
+    return shape;
   }
 }
 

diff --git a/src/component/guide/line.js b/src/component/guide/line.js
@@ -26,6 +26,7 @@ class Line extends GuideBase {
       }, this.style)
     });
     this.element = shape;
+    return shape;
   }
 }
 

diff --git a/src/component/guide/rect.js b/src/component/guide/rect.js
@@ -25,6 +25,7 @@ class Rect extends GuideBase {
       }, this.style)
     });
     this.element = shape;
+    return shape;
   }
 }
 

diff --git a/src/component/guide/tag.js b/src/component/guide/tag.js
@@ -72,19 +72,21 @@ class Tag extends GuideBase {
   render(coord, container) {
     const position = this.parsePoint(coord, this.position);
     const { content, background, textStyle } = this;
+    const shapes = [];
 
     const wrapperContainer = container.addGroup({
       className: 'guide-tag'
     });
 
     if (this.withPoint) {
-      wrapperContainer.addShape('Circle', {
+      const pointShape = wrapperContainer.addShape('Circle', {
         className: 'guide-tag-point',
         attrs: Util.mix({
           x: position.x,
           y: position.y
         }, this.pointStyle)
       });
+      shapes.push(pointShape);
     }
 
     const tagContainer = wrapperContainer.addGroup();
@@ -98,6 +100,7 @@ class Tag extends GuideBase {
         text: content
       }, textStyle)
     });
+    shapes.push(tagText);
 
     // 绘制背景框
     const textBBox = tagText.getBBox();
@@ -116,6 +119,7 @@ class Tag extends GuideBase {
         height: tagHeight
       }, background)
     });
+    shapes.push(tagBg);
     const direct = this._getDirect(container, position, tagWidth, tagHeight);
     const side = this.side;
     let x = position.x + this.offsetX;
@@ -193,19 +197,22 @@ class Tag extends GuideBase {
       y = y - tagHeight - side;
     }
 
-    tagContainer.addShape('Polygon', {
+    const sideShape = tagContainer.addShape('Polygon', {
+      className: 'guide-tag-side',
       zIndex: 0,
       attrs: {
         points: arrowPoints,
         fill: background.fill
       }
     });
+    shapes.push(sideShape);
 
     tagBg.attr('radius', radius);
     tagContainer.moveTo(x - xMin, y - yMin);
     tagContainer.sort();
 
     this.element = wrapperContainer;
+    return shapes;
   }
 }
 

diff --git a/src/component/guide/text.js b/src/component/guide/text.js
@@ -55,6 +55,7 @@ class Text extends GuideBase {
       }, style)
     });
     this.element = shape;
+    return shape;
   }
 }
 

diff --git a/src/plugin/guide.js b/src/plugin/guide.js
@@ -63,20 +63,59 @@ class GuideController {
     this.guides = [];
     this.xScale = null;
     this.yScales = null;
+    this.guideShapes = [];
     Util.mix(this, cfg);
   }
 
+  _toString(position) {
+    if (Util.isFunction(position)) {
+      position = position(this.xScale, this.yScales);
+    }
+    position = position.toString();
+    return position;
+  }
+
+  _getId(shape, guide) { // 用于标定每一个 guide shape 的 id，主要用于动画
+    let id = guide.id;
+    if (!id) { // 用户未指定
+      const type = guide.type;
+      if (type === 'arc' || type === 'line' || type === 'rect') {
+        id = this._toString(guide.start) + '-' + this._toString(guide.end);
+      } else {
+        id = this._toString(guide.position);
+      }
+    }
+
+    return id;
+  }
+
   paint(coord) {
     const self = this;
     const guides = self.guides;
     const xScale = self.xScale;
     const yScales = self.yScales;
-    Util.each(guides, function(guide) {
+    const guideShapes = [];
+    // const ids = [];
+    Util.each(guides, function(guide, idx) {
       guide.xScale = xScale;
       guide.yScales = yScales;
       const container = guide.top ? self.frontPlot : self.backPlot;
-      guide.render(coord, container);
+      const shape = guide.render(coord, container);
+      if (shape) {
+        const id = self._getId(shape, guide);
+        // if (ids.indexOf(id) === -1) { // 防止 ID 重复
+        //   ids.push(id);
+        // } else {
+        //   id += idx;
+        // }
+        [].concat(shape).forEach(s => {
+          s._id = s.get('className') + '-' + id;
+          s.set('index', idx);
+          guideShapes.push(s);
+        });
+      }
     });
+    self.guideShapes = guideShapes; // TODO: 变量命名
   }
 
   clear() {