Animate

    • appear: 初始化时的入场动画；
    • enter: 更新时的出现动画；
    • update: 更新时的变化动画；
    • leave: 更新时的动画；
      通过如下方式为图形定义这四种动画场景的配置：

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

    1. /**
    2.  * @param  {Number} index      shape 的索引值
    3.  * @param  {Number} id shape 的 id 标识
    4.  **/
    5. delay(index, id) {}

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

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

    图形 Shape 的动画接口说明：

    说明：

    例子
    1. const { Chart, Animate, Util } = G2;
    2. Animate.registerAnimation('appear', 'delayScaleInY', function(shape, animateCfg) {
    3.   const box = shape.getBBox(); // 获取柱子包围盒
    4.   const origin = shape.get('origin'); // 获取柱子原始数据
    5.   const points = origin.points; // 获取柱子顶点
    6.   // 计算柱子的变换中点
    7.   const centerX = (box.minX + box.maxX) / 2;
    8.   let centerY;
    9.   if (points[0].y - points[1].y <= 0) { // 当顶点在零点之下
    10.     centerY = box.maxY;
    11.     centerY = box.minY;
    12.   }
    13.   // 设置初始态
    14.   shape.attr('transform', [
    15.     [ 't', -centerX, -centerY ],
    16.     [ 's', 1, 0.1 ],
    17.     [ 't', centerX, centerY ]
    18.   ]);
    19.   const index = shape.get('index');
    20.   let delay = animateCfg.delay;
    21.   if (Util.isFunction(delay)) {
    22.     delay = animateCfg.delay(index);
    23.   }
    24.   let easing = animateCfg.easing;
    25.   if (Util.isFunction(easing)) {
    26.     easing = animateCfg.easing(index);
    27.   }
    28.   // 设置动画目标态
    29.   shape.animate({
    30.     transform: [
    31.       [ 't', -centerX, -centerY ],
    32.       [ 's', 1, 10 ],
    33.       [ 't', centerX, centerY ]
    34.     ]
    35.   }, animateCfg.duration, easing, animateCfg.callback, delay);
    36. });
    37.  
    38. for (let i = 0; i < 50; i++) {
    39.   data.push({
    40.     x: i,
    41.     y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
    42.   });
    43. }
    44. const chart = new Chart({
    45.   container: 'c1',
    46.   forceFit: true,
    47.   height: 400
    48. });
    49. chart.axis('x', false);
    50. chart.legend(false);
    51. chart.source(data);
    52. chart.interval()
    53.   .position('x*y')
    54.   .color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055')
    55.   .animate({
    56.     appear: {
    57.       animation: 'delayScaleInY',
    58.       easing: 'easeElasticOut',
    59.       delay(index) {
    60.         return index * 10;
    61.       }
    62.     }
    63.   });
    64. chart.render();

    配置项声明方式