动画
- 如何按需引用
- 动画配置详解

动画

面向移动端的图表追求生动性，因此 F2 提供了一套动画机制。但同时移动端对大小有一定的要求，因此针对不同的场景，F2 提供了两种动画版本：

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

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

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

如何按需引用

群组入场动画

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

精细动画版本

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 的动画中，围绕图表数据的变化，我们将图形元素的动画划分为以下四种类型：

动画类型	解释	触发时机
appear	图表第一次加载时的入场动画	第一次 `chart.render()`
enter	图表绘制完成，数据发生变更后，产生的新图形的进场动画	`chart.changeData(data)`
update	图表绘制完成，数据发生变更后，有状态变更的图形的更新动画	`chart.changeData(data)`
leave	图表绘制完成，数据发生变更后，被销毁图形的销毁动画	`chart.changeData(data)`

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

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

chart.animate()

图表动画的整体配置。

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-grid': {} // 对坐标轴网格线进行动画配置，配置属性同 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
});

关闭动画的方式如下：

// 关闭图表所有动画
chart.animate(false);
 
// 关闭某种图形元素的动画，如线图 line
chart.animate({
  line: false // 关闭线图动画
});
 
// 关闭某种图形元素下某一类动画，如线图的出场动画
chart.animate({
  line: {
    appear: false
  }
});

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

图形元素名	解释
`axis-label`	坐标轴文本
`axis-grid`	坐标轴网格线
`axis-tick`	坐标轴刻度线
`axis-line`	坐标轴线
`line`	折线图
`area`	面积图
`interval`	柱状图
`path`	路径图
`point`	点图
`polygon`	多边形
`schema`	自定义图形

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

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

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

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

也可以直接定义回调函数，使用如下：

/**
 * 定义动画执行函数
 * @param  {Shape} shape       指定动画的 shape
 * @param  {Object} animateCfg 动画的配置，包含 easing、duration 等
 * @param  {Coord} coord       当前的坐标系对象
 * @return {null}              不需要返回
 */
animation: (shape, animateCfg, coord) {
 
}

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

动画名称	描述	效果
`groupWaveIn`	整体动画，不同坐标系下效果不同
`groupScaleInX`	整体动画
`groupScaleInY`	整体动画
`groupScaleInXY`	整体动画
`shapesScaleInX`	整体动画，不同于 groupScale，每个 shape 都会参与
`shapesScaleInY`	整体动画，不同于 groupScale，每个 shape 都会参与
`shapesScaleInXY`	整体动画，不同于 groupScale，每个 shape 都会参与
`fadeIn`	单个 shape 的动画

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

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

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

各个函数的缓动效果可参考：http://sole.github.io/tween.js/examples/03_graphs.html

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

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

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

geom.animate()

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

注意：

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

geom.animate({
  appear: {
    animation: {String} || {Function}, // 定义动画执行函数
    easing: {String} || {Function}, // 动画缓动函数
    delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms
    duration: {Number}  // 动画执行时间，单位 ms
  },
  enter: {
    animation: {String} || {Function}, // 定义动画执行函数
    easing: {String} || {Function}, // 动画缓动函数
    delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms
    duration: {Number}  // 动画执行时间，单位 ms
  },
  update: {
    animation: {String} || {Function}, // 定义动画执行函数
    easing: {String} || {Function}, // 动画缓动函数
    delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms
    duration: {Number}  // 动画执行时间，单位 ms
  },
  leave: {
    animation: {String} || {Function}, // 定义动画执行函数
    easing: {String} || {Function}, // 动画缓动函数
    delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms
    duration: {Number}  // 动画执行时间，单位 ms
  },
});

shape.animate()

我们为每个 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 范围的数字，表示当前执行的进度
    // 用户自定义每一帧的动画操作
  });

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/animation.html