图表动画配置

动画类型

G2 根据数据的装载更新，将动画分为以下四类：

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

G2 图表中默认参与动画的元素：

说明：为了更好的动画效果，G2 为 Geometry shapes 内置了初始化时的群组入场动画，当用户自己配置了 appear 动画执行函数时（animation）的时候（这个时候执行的就是 shape 个体动画了），就会以用户配置的为准。

G2 在 Chart/View，Geometry，Geometry Label 以及组件层次都开放了动画接口，即只要是参与动画的图形元素都可以单独进行动画配置。

控制着整个图表的动画开关。

// 开启或者关闭 chart 动画
chart.animate(boolean);

说明: 当 chart.animate(false) 关闭动画时，该图表所有的元素都不会进行动画，即使用户进行了动画配置。

控制着当前整个 View 视图的动画开关。

// 开启或者关闭 view 上的动画
view.animate(boolean);

说明: 当 view.animate(false) 关闭动画时，该视图下所有的元素都不会进行动画，即使用户进行了动画配置。

包含 Geometry Shapes 以及 Geometry labels.

geometry.animate(false); // Geometry 不执行东湖
geometry.animate(cfg); // 进行具体的动画配置

通过 geometry.animate() 接口，可以进行具体的动画配置，支持的配置属性详见 API。

// Geometry labels 动画配置
geometry.label('labelField', {
  animate: AnimateOption | false,
});

label 上的动画配置类型同 geometry.animate() 接口的参数类型一致，支持的配置属性详见 API。

说明: 当 geometry 关闭动画时，即 geometry.animate(false)，label 的动画也会关闭。

对于图表组件的动画，目前只支持开关操作。

chart.axis('fieldName', {
  animate: boolean,
});
chart.annotation().line({
  animate: boolean,
});

G2 默认提供了以下几种动画执行函数，供用户按需使用：

animation	效果	说明
'fade-in'		渐现动画。
'fade-out'		渐隐动画。
'grow-in-x'		容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-y'		容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'grow-in-xy'		容器沿着 x,y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
'scale-in-x'		单个图形沿着 x 方向的生长动画。
'scale-in-y'		单个图形沿着 y 方向的生长动画。
'wave-in'		划入入场动画效果，不同坐标系下效果不同。
'zoom-in'		沿着图形中心点的放大动画。
'zoom-out'		沿着图形中心点的缩小动画。
'path-in'		path 路径入场动画。
'position-update'		图形位置移动动画。