Animate

Animate

概述

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

动画的控制开关

动画默认开启,配置动画的开关有三种方法:

  1. Global.animate 全局配置

    var Global = G2.Global
    Global.animate = false;
  2. 实例化 chart 时配置属性

    var chart = new G2.Chart({
      id: 'c1',
      animate: false
    });
  3. 调用 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);
});

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