图表动画配置

阅读时间约 2 分钟

动画类型

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

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

动画元素

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

  1. Geometry shapes
  2. Geometry labels
  3. 图表组件 Component,在 G2 层,主要是以下组件进行动画
  4. Axis

    1. ticks
    2. labels
    3. grid
  5. Annotation

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

动画配置

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

Chart

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

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

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

View

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

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

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

Geometry

包含 Geometry Shapes 以及 Geometry labels.

geometry.animate(false); // Geometry 不执行动画

geometry.animate(cfg); // 进行具体的动画配置

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

Geometry label 上的动画配置

// 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,
});

4.0 内置默认动画函数

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

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