动画

群组入场动画
精细动画，以 shape 为对象单位的动画，包含 appear、enter 两种入场动画、update 更新动画以及 leave 销毁动画
当图表仅用于展示时，为了缩减代码体量，用户可以选择第一种动画策略，即仅包含入场动画。如果需要更丰富的动画，可以选择第二种动画策略。

另外 F2 还提供了自定义动画机制，帮助用户定制更加生动、更具场景的动画。

完整版的 F2 我们默认提供的是精细动画，当然用户也可以使用按需引用策略，选择适合自己场景的动画：

群组入场动画

精细动画版本

const F2 = require('@antv/f2/lib/core');
const Animation = require('@antv/f2/lib/animation/detail');
F2.Chart.plugins.register(Animation); // 这里进行全局注册，也可以给 chart 的实例注册

注意：

两个版本的动画择其一即可。
当你引用 require('@antv/f2') 版本时，提供的是精细动画。

动画配置详解

在 F2 的动画中，围绕图表数据的变化，我们将图形元素的动画划分为以下四种类型：

第一次 chart.render() 时会触发 appear 类型的动画，而 chart.changeData(data) 即数据发生变更时，会触发 update、leave、enter 类型的动画。

如果用户使用的是仅包含群组入场动画版本，那么仅提供了 appear 类型的动画。在精细动画版本中，完整提供了以上四种动画类型机制。具体的配置方法在下文进行说明。

chart.animate(false)
关闭图表动画。
chart.animate(cfg)
对 chart 上的图形元素进行具体的动画配置。
参数：cfg
类型： Object
返回：当前 chart 实例
具体配置参考如下：

chart.animate({
  'axis-label': {
    appear: {
      animation: {String} || {Function}, // 定义动画执行函数
      easing: {String} || {Function}, // 动画缓动函数
      delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms
      duration: {Number}  // 动画执行时间，单位 ms
    }, // 初始化入场动画配置
    update: {}, // 更新动画配置，配置属性同 appear
    enter: {}, // 数据变更后，新产生的图形的入场动画配置，配置属性同 appear
    leave: {} // 销毁动画配置，配置属性同 appear
  }, // 对坐标轴文本进行动画配置
  'axis-tick': {} // 对坐标轴刻度线进行动画配置，配置属性同 axis-label
  'axis-line': {} // 对坐标轴线进行动画配置，配置属性同 axis-label
  line: {} // 对折线图进行动画配置，配置属性同 axis-label
  area: {} // 对面积图进行动画配置，配置属性同 axis-label
  interval: {} // 对柱状图进行动画配置，配置属性同 axis-label
  path: {} // 对路径图进行动画配置，配置属性同 axis-label
  point: {} // 对点图进行动画配置，配置属性同 axis-label
  polygon: {} // 对多边形进行动画配置，配置属性同 axis-label
  schema: {} // 对自定义图形进行动画配置，配置属性同 axis-label
});

关闭动画的方式如下：

目前对动画开放的图形元素包括：

每一种图形元素均包含以上四种动画类型(appear、enter、update、leave)，而每一种动画类型，可进行如下属性的配置：

// 对首次出场动画的配置
appear: {
  animation: 'fadeIn', // 执行的具体动画
  easing: 'elasticIn', // 动画缓动函数
  delay: 1000, // 动画延迟执行时间，单位 ms
  duration: 600 // 动画执行时间，单位 ms
}
 
// 或者直接关闭 appear 类型动画
appear: false

animation，类型：String/Function，定义动画的具体执行动作
该属性用于定义动画执行函数，可以指定动画名称，该动画名称可以是 F2 默认提供的动画（见以下列表），也可以是用户通过动画注册机制进行注册之后的动画名称。

// 指定动画名称
animation: 'groupWaveIn'

默认我们提供了如下几种动画：

easing，类型：String/Function，定义动画的缓动函数
使用 F2 默认提供的缓动函数名，或者直接传入缓动函数：

// 方式一：指定缓动函数名称
easing: 'quadraticOut',
 
// 方式二：直接传入缓动函数
easing: (t) => {
  return Math.sqrt(1 - --t * t);
}

默认提供的缓动函数名为：linear quadraticIn quadraticInOut cubicIn cubicOut cubicInOut elasticIn elasticOut elasticInOut backIn backOut backInOut bounceIn bounceOut bounceInOut

各个函数的缓动效果可参考：

delay，类型：Number/Function，指定动画的延迟执行时间
该属性支持回调函数，回调函数的使用如下：

// 方式一，直接指定延迟时间，单位为 ms
delay: 1000,
// 方式二，使用回调函数
/**
 * 返回动画延迟执行时间
 * @param  {Number} index      当前 shape 的索引值（相对于数据集中的顺序）
 * @param  {String} id         当前 shape 的 id
 * @return {Number}            返回延迟执行时间，单位为 ms
 */
delay: (index, id) {
 
}

duration，类型：Number，动画的执行时间，单位为 ms

为 geometry 图形元素进行具体的动画配置，默认 F2 已针对各个 geometry 设定了动画类型以及配置，用户可以通过该接口进行动画的个性化配置。

注意：

当用户调用 chart.animate(false) 关闭了图表动画之后，geom.animate() 方法上的配置不生效。
当用户在 chart.animate() 和 geom.animate() 两个接口上均对该 geometry 进行了动画配置时，以 geom.animate() 的配置为准。
具体可配置的属性为 animation easing duration，具体的使用见上文：

我们为每个 shape 实例提供了 animate 接口，用于执行具体的动画行为，具体使用如下：

shape.animate()
  .to({
    attrs: {Object}, // shape 最终的图形属性
    easing: {String} || {Function}, // 缓动函数
    duration: {Number}, // 动画持续时间，单位为 ms
    delay: {Number} // 动画延迟时间，单位为 ms
  }) // 定义动画行为
  .onStart(function() {
    // 动画开始的回调函数
  })
  .onUpdate(function() {
    // 动画进行时的回调函数
  })
  .onEnd(function() {
    // 动画结束时的回调函数
  })
  .onFrame(t => {
    // t 为 0 - 1 范围的数字，表示当前执行的进度
    // 用户自定义每一帧的动画操作
  });

Animate

动画

动画配置详解