支持 Lottie 播放能力 #4221

问题背景

除了使用 Web Animations API 描述动画，我们还支持播放 Lottie 格式，为此我们提供了一个类似 lottie-web 的播放器。配合图表中已有元素也可以增强动画表现力。

ECharts 中的用法如下：https://github.com/pissang/lottie-parser#basic-usage 经由 Lottie Parser 解析后得到的 elements 可以加入 group 中渲染：

const { elements } = lottieParser.parse(data);

chart.setOption({
  graphic: {
    elements: [
      {
        type: 'group',
        scaleX: scale,
        scaleY: scale,
        // Elements is compatitable with echarts graphic.
        children: elements,
      },
    ],
  },
});

我们提供的 g-lottie-player 使用方式如下。同时提供简单的动画控制方法例如播放、暂停以及跳转到指定时刻或帧，加入到画布后就可以像基础图形一样任意操作它们。

import { loadAnimation } from '@antv/g-lottie-player';

// 解析 Lottie 文件
const animation = loadAnimation(lottie_json, { loop: true, autoplay: true });

// 返回一个 Group 并渲染到画布
const wrapper = animation.render(canvas);

// 自由操作
wrapper.scale(0.5);
wrapper.translate(100, 100);

// 动画控制
animation.play();
animation.pause();
animation.goTo(2000);

Chart API

由于 g-lottie-player 返回的是一个解析后的容器 Group，随后的变换、动画控制都交由用户自由操作。因此只需要拿到画布即可：

const chart = new Chart({
  container: node,
});
const { canvas } = chart.context();

// 解析后的 Group 渲染到画布
const wrapper = animation.render(canvas);
animation.play();

这样也不用 G2 设计额外的 API 了。