2021SC@SDUSC f2源码分析（13）

2021SC@SDUSC

如何按需引用

1. 群组入场动画

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

1. 精细动画版本

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

动画类型	解释	触发时机
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()

图表动画的整体配置。

1. chart.animate(false)

关闭图表动画。

1. 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