logoCreated with Sketch.

G2

Animate 动画

4 min read

在 G2 中，我们提供了四种动画场景类型：

  • appear: 初始化时的入场动画；
  • enter: 更新时的出现动画；
  • update: 更新时的变化动画；
  • leave: 更新时的动画；

通过如下方式为图形定义这四种动画场景的配置：

// 配置更新时的入场动画，其他动画类型相同
geom.animate({
  enter: {
    animation: 'fadeIn', // 动画名称
    easing: 'easeQuadIn', // 动画缓动效果
    delay: 100, // 动画延迟执行时间
    duration: 600 // 动画执行时间
  }
});

另外 easing delay duration 均可支持回调，如下：

/**
 * @param  {Number} index      shape 的索引值
 * @param  {Number} id shape 的 id 标识
 **/
delay(index, id) {}

参数 animation 为对应执行的动画名称，G2 默认内置了如下几种动画：

{
  enter: {
    clipIn,
    zoomIn,
    pathIn,
    scaleInY,
    scaleInX,
    fanIn,
    fadeIn
  },
  leave: {
    lineWidthOut,
    zoomOut,
    pathOut,
    fadeOut
  },
  appear: {
    clipIn,
    zoomIn,
    pathIn,
    scaleInY,
    scaleInX,
    fanIn,
    fadeIn
  },
  update: {
    fadeIn,
    fanIn
  }
}

如果上述动画动作不满足需求，用户也可以自己注册动画动作：

const { Animate } = G2;
/**
 * @param  {String} animationType      动画场景类型 appear enter leave update
 * @param  {String} 动画名称，用户自定义即可
 * @param  {Function} 动画执行函数
 **/
Animate.registerAnimation(animationType, animationName, animationFun);

图形 Shape 的动画接口说明：shape.animate(props, duration, delay, easing, callback)

/**
  * 执行动画
  * @param  {Object}   toProps  动画最终状态
  * @param  {Number}   duration 动画执行时间
  * @param  {Number}   delay    动画延迟时间
  * @param  {String}   easing   动画缓动效果
  * @param  {Function} callback 动画执行后的回调
  */
shape.animate(toProps, duration, delay = 0, easing, callback);

说明：

easing 动画缓动效果参见 d3-ease。

例子
const { Chart, Animate, Util } = G2;
Animate.registerAnimation('appear', 'delayScaleInY', function(shape, animateCfg) {
  const box = shape.getBBox(); // 获取柱子包围盒
  const origin = shape.get('origin'); // 获取柱子原始数据
  const points = origin.points; // 获取柱子顶点
  // 计算柱子的变换中点
  const centerX = (box.minX + box.maxX) / 2;
  let centerY;
  if (points[0].y - points[1].y <= 0) { // 当顶点在零点之下
    centerY = box.maxY;
  } else {
    centerY = box.minY;
  }
  // 设置初始态
  shape.attr('transform', [
    [ 't', -centerX, -centerY ],
    [ 's', 1, 0.1 ],
    [ 't', centerX, centerY ]
  ]);
  const index = shape.get('index');
  let delay = animateCfg.delay;
  if (Util.isFunction(delay)) {
    delay = animateCfg.delay(index);
  }
  let easing = animateCfg.easing;
  if (Util.isFunction(easing)) {
    easing = animateCfg.easing(index);
  }
  // 设置动画目标态
  shape.animate({
    transform: [
      [ 't', -centerX, -centerY ],
      [ 's', 1, 10 ],
      [ 't', centerX, centerY ]
    ]
  }, animateCfg.duration, easing, animateCfg.callback, delay);
});

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    x: i,
    y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
  });
}
const chart = new Chart({
  container: 'c1',
  forceFit: true,
  height: 400
});
chart.axis('x', false);
chart.legend(false);
chart.source(data);
chart.interval()
  .position('x*y')
  .color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055')
  .animate({
    appear: {
      animation: 'delayScaleInY',
      easing: 'easeElasticOut',
      delay(index) {
        return index * 10;
      }
    }
  });
chart.render();