动画

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

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

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

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

如何按需引用

  • 群组入场动画
  1. const F2 =require('@antv/f2/lib/core');
  2. constGroupAnimation=require('@antv/f2/lib/animation/group');
  3. F2.Chart.plugins.register(GroupAnimation);// 这里进行全局注册,也可以给 chart 的实例注册
  • 精细动画版本
  1. const F2 =require('@antv/f2/lib/core');
  2. constAnimation=require('@antv/f2/lib/animation/detail');
  3. 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) 即数据发生变更时,会触发 updateleaveenter 类型的动画。

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

chart.animate()

图表动画的整体配置。

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

  • chart.animate(cfg)
    对 chart 上的图形元素进行具体的动画配置。

  • 参数:cfg

  • 类型: Object
  • 返回: 当前 chart 实例
    具体配置参考如下:
  1. chart.animate({
  2. 'axis-label':{
  3. appear:{
  4. animation:{String}||{Function},// 定义动画执行函数
  5. easing:{String}||{Function},// 动画缓动函数
  6. delay:{Number}||{Function},// 动画延迟执行时间,单位 ms
  7. duration:{Number}// 动画执行时间,单位 ms
  8. },// 初始化入场动画配置
  9. update:{},// 更新动画配置,配置属性同 appear
  10. enter:{},// 数据变更后,新产生的图形的入场动画配置,配置属性同 appear
  11. leave:{}// 销毁动画配置,配置属性同 appear
  12. },// 对坐标轴文本进行动画配置
  13. 'axis-tick':{}// 对坐标轴刻度线进行动画配置,配置属性同 axis-label
  14. 'axis-grid':{}// 对坐标轴网格线进行动画配置,配置属性同 axis-label
  15. 'axis-line':{}// 对坐标轴线进行动画配置,配置属性同 axis-label
  16. line:{}// 对折线图进行动画配置,配置属性同 axis-label
  17. area:{}// 对面积图进行动画配置,配置属性同 axis-label
  18. interval:{}// 对柱状图进行动画配置,配置属性同 axis-label
  19. path:{}// 对路径图进行动画配置,配置属性同 axis-label
  20. point:{}// 对点图进行动画配置,配置属性同 axis-label
  21. polygon:{}// 对多边形进行动画配置,配置属性同 axis-label
  22. schema:{}// 对自定义图形进行动画配置,配置属性同 axis-label
  23. });

关闭动画的方式如下:

  1. // 关闭图表所有动画
  2. chart.animate(false);
  3.  
  4. // 关闭某种图形元素的动画,如线图 line
  5. chart.animate({
  6. line:false// 关闭线图动画
  7. });
  8.  
  9. // 关闭某种图形元素下某一类动画,如线图的出场动画
  10. chart.animate({
  11. line:{
  12. appear:false
  13. }
  14. });

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

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

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

  1. // 对首次出场动画的配置
  2. appear:{
  3. animation:'fadeIn',// 执行的具体动画
  4. easing:'elasticIn',// 动画缓动函数
  5. delay:1000,// 动画延迟执行时间,单位 ms
  6. duration:600// 动画执行时间,单位 ms
  7. }
  8.  
  9. // 或者直接关闭 appear 类型动画
  10. appear:false
  • animation,类型:String/Function,定义动画的具体执行动作
    该属性用于定义动画执行函数,可以指定动画名称,该动画名称可以是 F2 默认提供的动画(见以下列表),也可以是用户通过动画注册机制进行注册之后的动画名称。
  1. // 指定动画名称
  2. animation:'groupWaveIn'

也可以直接定义回调函数,使用如下:

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

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

动画名称描述效果
groupWaveIn整体动画,不同坐标系下效果不同Animate - 图1Animate - 图2
groupScaleInX整体动画Animate - 图3Animate - 图4
groupScaleInY整体动画Animate - 图5Animate - 图6
groupScaleInXY整体动画Animate - 图7Animate - 图8
shapesScaleInX整体动画,不同于 groupScale,每个 shape 都会参与Animate - 图9
shapesScaleInY整体动画,不同于 groupScale,每个 shape 都会参与Animate - 图10
shapesScaleInXY整体动画,不同于 groupScale,每个 shape 都会参与Animate - 图11
fadeIn单个 shape 的动画Animate - 图12
  • easing,类型:String/Function,定义动画的缓动函数
    使用 F2 默认提供的缓动函数名,或者直接传入缓动函数:
  1. // 方式一:指定缓动函数名称
  2. easing:'quadraticOut',
  3.  
  4. // 方式二:直接传入缓动函数
  5. easing:(t)=>{
  6. returnMath.sqrt(1---t * t);
  7. }

默认提供的缓动函数名为:linearquadraticInquadraticOutquadraticInOutcubicIncubicOutcubicInOutelasticInelasticOutelasticInOutbackInbackOutbackInOutbounceInbounceOutbounceInOut

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

  • delay,类型:Number/Function,指定动画的延迟执行时间
    该属性支持回调函数,回调函数的使用如下:
  1. // 方式一,直接指定延迟时间,单位为 ms
  2. delay:1000,
  3.  
  4. // 方式二,使用回调函数
  5. /**
  6. * 返回动画延迟执行时间
  7. * @param {Number} index 当前 shape 的索引值(相对于数据集中的顺序)
  8. * @param {String} id 当前 shape 的 id
  9. * @return {Number} 返回延迟执行时间,单位为 ms
  10. */
  11. delay:(index, id){
  12.  
  13. }
  • duration,类型:Number,动画的执行时间,单位为 ms

geom.animate()

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

注意:

  • 当用户调用 chart.animate(false) 关闭了图表动画之后,geom.animate() 方法上的配置不生效。
  • 当用户在 chart.animate() 和 geom.animate() 两个接口上均对该 geometry 进行了动画配置时,以 geom.animate() 的配置为准。
    具体可配置的属性为 animationeasingdelayduration,具体的使用见上文:
  1. geom.animate({
  2. appear:{
  3. animation:{String}||{Function},// 定义动画执行函数
  4. easing:{String}||{Function},// 动画缓动函数
  5. delay:{Number}||{Function},// 动画延迟执行时间,单位 ms
  6. duration:{Number}// 动画执行时间,单位 ms
  7. },
  8. enter:{
  9. animation:{String}||{Function},// 定义动画执行函数
  10. easing:{String}||{Function},// 动画缓动函数
  11. delay:{Number}||{Function},// 动画延迟执行时间,单位 ms
  12. duration:{Number}// 动画执行时间,单位 ms
  13. },
  14. update:{
  15. animation:{String}||{Function},// 定义动画执行函数
  16. easing:{String}||{Function},// 动画缓动函数
  17. delay:{Number}||{Function},// 动画延迟执行时间,单位 ms
  18. duration:{Number}// 动画执行时间,单位 ms
  19. },
  20. leave:{
  21. animation:{String}||{Function},// 定义动画执行函数
  22. easing:{String}||{Function},// 动画缓动函数
  23. delay:{Number}||{Function},// 动画延迟执行时间,单位 ms
  24. duration:{Number}// 动画执行时间,单位 ms
  25. },
  26. });

shape.animate()

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

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

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