支持 Lottie 播放能力

[xiaoiver]

问题背景

除了使用 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 了。

[pearmini]

嗯嗯，这是一个天然支持的方案。更好的方案如下（可以之后支持）：

const options = {
  children: [
    {
      type: 'lottie',
      encode: {
        x: '',
        y: '',
        src: data: lottie_json,
      },
      loop: true,
      autoplay: true,
      style: {
        transform: 'scale(0.5) translate(100, 100)',
      },
    },
  ],
};

[xiaoiver]

两种方式优缺点如下：

• 自由操作方案：
  • 优点：最高的自由度。从 Chart 上下文拿到画布后，用户自行操作：变换 & 动画控制（播放、暂停、跳转到任意帧）
  • 缺点：无法数据驱动
• Mark 方案：
  • 优点：数据驱动
  • 缺点：新增 Mark 类型，G2 需要内置 g-lottie-player。无法进行动画控制（或者有办法拿到 animation 对象）

两者并不冲突，可以都提供。

[pearmini]

嗯嗯，都可以提供

[hustcc]

以不侵入的方式加到官网吧，做成 mark 后面做！

[hustcc]

转入到讨论，这里关闭。