2021SC@SDUSC“F2移动端可视化方案”源码分析（七）——Plugin 插件机制——Animate深入分析

2021SC@SDUSC 

目录

简介

如何按需求引用？

1.群组入场动画

2.精细动画版本

注意：

动画配置详解

动画分类

如何进行配置？

chart.aninmate()

geom.animate()

shape.animate()

总结

---

简介

F2是移动端的可视化解决方案，因为移动端的图表追求的是生动性且对大小有一定的要求，所以针对不同的应用场景，F2为用户提供了两种动画版本：

        1.群组入场动画

        2.精细动画

精细动画是以shape为单位的动画（shape类在此前的第二篇文章中分析过），包含了appear、enter两种入场动画、update更新动画以及leave销毁动画。

两种动画策略适用于不同的情形，当图表仅仅是用来展示的时候，为了减少代码量，我们可以选择第一种策略；如果我们需要更加丰富多彩党的动画时，可以选择第二种策略。

当然，F2也提供了自定义动画机制，这在此前的第二篇文章中提到过。

完整版的F2默认的是提供精细动画，在使用的时候，我们也可以按需求引用策略。

如何按需求引用？

1.群组入场动画

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

2.精细动画版本

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

注意：

1）两个版本动画只需引用其一即可；

2）当我们应用require('@antv/f2')版本是，F2为我们提供的是精细动画。

动画配置详解

动画分类

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

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

图标来自F2官网

第一次 chart.render() 时会触发 appear 类型动画，当数据发生变更即 chart.changeData(data) 触发时会出发另外三种类型的动画。

在这里不难发现，如果我们使用的是群组入场动画策略，那么F2仅仅只为我们提供了 appear 类型的动画；而在精细动画策略中，F2为我们提供了完整的动画类型机制，即包含上述四种动画机制。

如何进行配置？

chart.aninmate()

图表动画的整体配置。

1.chart.animate(false)         关闭图表动画

2.chart.animate(cfg)            对 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
  }
});

可以从网络上找到F2目前对动画开放的图形元素，如下表：

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

图标信息来自F2官网

以上每一种图形元素均包含刚刚提到的四种动画类型（即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 的动画

（图标内容来自F2官方网站）

        easing，类型：String/Function，定义动画的缓动函数

可以使用F2默认提供的缓动函数名，或者直接传入缓动函数：

// 方式一：指定缓动函数名称
easing: 'quadraticOut',

// 方式二：直接传入缓动函数
easing: (t) => {
  return Math.sqrt(1 - --t * t);
}

F2为我们提供了众多缓动函数，具体名称与作用可参考：Tween.js / graphs

        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 设定了动画类型以及配置，用户可以通过该接口进行动画的个性化配置。

注意：

1. 当用户调用 chart.animate(false) 关闭了图表动画之后， geom.animate() 方法上的配置将不会生效；

2. 当用户在 chart.animate() 和 geom.animate() 两个接口上均对该 geom 进行了动画配置时，F2会以 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()

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 的进一步分析可以更加详细地了解到F2动画机制的运作，但其中仍有一些细节是模糊的，并且我们也进一步看到了F2动画机制与其他机制的融合交叉性，所以在接下来的研究分析中，我们将更加注意交叉方面代码的分析。