Animate

Animate

概述

G2 给每个 Geom 都提供了一套默认的动画，用户在需要使用动画时，打开动画的控制开关即可。同时，G2 给用户提供了最大限度的动画控制：首先，用户可以对默认动画的动画时间和动画效果进行配置；其次，G2 提供了常用动画库供用户选择使用；最后，用户可以自定义 Geom 的动画，以满足特殊场景的需求。

动画的控制开关

动画默认开启，配置动画的开关有三种方法：

Global.animate 全局配置

var Global = G2.Global
Global.animate = false;

实例化 chart 时配置属性

var chart = new G2.Chart({
  id: 'c1',
  animate: false
});

调用 chart 对象的 animate 方法

chart.animate(false);

动画配置

配置接口 Geom.animate()

animate(cfg)

参数

cfg: Object

动画的配置项，支持的配置属性如下：

{
  appear: {
    // 初始入场动画配置
  }
  enter: {
    // 更新时出现动画配置
  },
  leave: {
    // 更新时销毁动画配置
  },
  update: {
    // 更新时改变动画配置
  }
});

四个场景的配置项如下：

animation: 动画名称{string}
duration: 动画时间{Number}，单位毫秒(ms)
easing: 缓动函数{string}
delay: 动画延时{Number}，单位毫秒(ms)

duration、easing 和 delay 均支持回调函数，且参数相同

.animate({
  appear: {
    delay: function(index, id) { //index:图形的序号，id：图形的唯一识别码
      return index * 30;
    }
  }
})

easing 的可选类型见 G2 canvas API。

动画库

G2 提供了两种动画：

整体动画：画布中所有 shape （图形）组成的 group （图形组）的整体动画，性能较高，但使用场景有限；
个体动画：画布中某个 shape （图形）的个体动画，更为灵活，但数据量巨大时性能较低。

名称	类型	支持的场景	备注
groupWaves	group	appear	水平平铺
groupWaveh	group	appear	垂直平铺
groupCircle	group	appear	放射平铺
groupAngle	group	appear	环形平铺
groupScaleX	group	appear	延 X 轴放大
groupScaleY	group	appear	延 Y 轴放大
groupScaleXY	group	appear	双向放大
fadeIn	shape	appear/enter	出现
fadeOut	shape	leave	消失
zoomIn	shape	appear/enter	放大
zoomOut	shape	leave	缩小
scaleInX	shape	appear/enter	延 X 轴放大
scaleInY	shape	appear/enter	延 Y 轴放大

 chart.interval().position('x*y').animate({
    enter:{
      animation: 'fadeIn',
      easing: 'easeInQuart'
    },
    update: {
      duration: 2000
    }
  });

自定义动画：

配置接口 Animate.registAnimation()

var Animate = G2.Animate;
Animate.registAnimation(animationType, animationName, animationFun);

参数：

animationType: String

动画场景类型，支持四种场景：

appear: 初始化时的入场动画
enter: 更新时的出现动画
update: 更新时的变化动画
leave: 更新时的销毁动画
- animationName: String

动画名

animationFun: Function

自定义动画实现

appear/enter/leave

var animationFun = function(/* shape, animateCfg */){
 // 自定义动画实现
});

update

var animationFun = function(/* shape1, shape2, animateCfg */){
 // 自定义动画实现
});

说明：

shape1 是缓存图形对象，包含原图形的属性和数据
shape／shape2 是真实图形对象，其类型、通用属性和通用方法见 G2 canvas API
animateCfg是动画配置，包括：duration (动画时间)、easing (缓动函数)、delay（动画延时）

var Canvas = require('@ali/g-canvas');
var Vector3 = Canvas.Matrix.Vector3;
// 注册更新时的销毁动画
Animate.registAnimation('leave', 'myAnimation', function(shape, animateCfg){
  var box = shape.getBBox(); // 获取图形的包围盒
  var minX = box.minX;
  var minY = box.minY;
  var maxX = box.maxX;
  var maxY = box.maxY;
  var x = (minX + maxX) / 2;
  var y = (minY + maxY) / 2;
  // 底层动画接口
  shape.animate({
    transform: [
      ['t', -x, -y],
      ['s', 0.1, 0.1],
      ['t', x, y]
    ],
    destroy: true,
    animateCfg.delay,
  }, animateCfg.duration, animateCfg.easing);
});

自定义动画的详细流程见自定义动画教程