2021SC@SDUSC
目录
简介
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动画机制与其他机制的融合交叉性,所以在接下来的研究分析中,我们将更加注意交叉方面代码的分析。