介绍

这里的动画主要分为两种，一种是元素出现和消失的过渡动画，一种是可视化时序数据的动画，下面将分别讲述。主要的 API 的设计参考：https://chartanimation.github.io/canis/

过渡动画

目前的过渡只支持如下把 delay 和 duration 设置为 constant，这样如果元素的过渡效果和数据有关的化实现起来将非常的麻烦，比如如果要实现这个 demo 的效果，可能需要手动通过回掉去计算每一个元素的 delay 和 duration。

chart
 .interval()
 .animate({
    enter: {
      animation: 'fade-in', // 动画名称
      easing: 'easeQuadIn', // 动画缓动效果
      delay: 100, // 动画延迟执行时间
      duration: 600 // 动画执行时间
    }
 });

解决办法就是可以将 delay 和 duration 和字段关联起来，和其他的 attribute 一样。在真正的渲染之前，计算为回掉函数的形式。

chart
 .interval()
 .animate({
    enter: {
      animation: 'fade-in', // 动画名称
      easing: 'easeQuadIn', // 动画缓动效果
      delay: 'eventStartTime', // 数据的一个字段
      duration: 'eventDurationTime' // 数据的一个字段
    }
 });

时序动画

时许动画主要面对的场景就是一系列可以用时间作为索引的数据，这种数据实现动画的过程往往需要使用 setInterval 这种底层的 API，比较原始。

// https://g2.antv.vision/zh/examples/case/dynamic#dynamic-bubble
// 下面是目前的写法
const data = [/* 时序数据 */];
let index = 0;
let chart;
function init(data) {
  chart.data(data);
  chart
    .point()
    .position('income*life')
    .color('continent')
    .size('population')
    .shape('circle')
    .animate({
      update: {
        duration: 200,
        easing: 'easeLinear'
      }
    })
  chart.render();
}
init(data[index]);
setInterval(() => {
  index++;
  chart.changeData(data[index]);
}, 200);
// 期望的写法
// 下面的代码在运行时也会转换成上面的代码，所以最开始并不需要去动底层的渲染机制
chart.data(data);
chart
  .point()
  .position('income*life')
  .color('continent')
  .size('population')
  .shape('circle')
  .timing('', {
  })
  .animate({
  })
chart.render();