Animation

1 min read

Usage

图形动画配置有两种方式:

第一种,传入 false 设置关闭动画。

animation: false; // close animation

第二种,传入 AnimateOption 对进行动画参数配置。

animation: {
  // Configuration of the first animation
  appear: {
    animation: 'wave-in', // Effects of the first animation
    duration: 5000, // Duration of the first animation
  },
}

Configuration(AnimateOption

ComponentAnimateOption 为组件各个动画类型配置。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成,发生更新后,产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  animation?: string; // 动画效果,内置的动画效果见下表,也可以通过自定义动画的方式实现自定义效果
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

其中 animation 传入动画函数名称,内置默认动画函数如下表,同时也可以通过 registerAnimation 自定义动画函数。

动画效果,前往图表示例查看效果

animation效果说明不适用场景
'fade-in'fade-in.gif渐现动画。
'fade-out'fade-out.gif渐隐动画。
'grow-in-x'grow-in-x.gif容器沿着 x 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。不适用于饼图、玫瑰图等 polar、theta 坐标系下的图表以及柱、条状图
'grow-in-y'grow-in-y.gif容器沿着 y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。不适用于饼图、玫瑰图等 polar、theta 坐标系下的图表以及柱、条状图
'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'图形位置移动动画。限用于图表标签 label 上

Easing Effects

Easing method used to control apparent motion in animation. Varied easing effects can be found at d3-ease