G2

lottie

G2

lottie

Loading...

Lottie 能极大丰富动画的描述能力。在可视化叙事中也有不错的使用场景。

在 G2 中通过 @antv/g-lottie-player 可以将 Lottie 加入画布。同时提供简单的动画控制方法例如播放、暂停以及跳转到指定时刻或帧，加入到画布后就可以像基础图形一样任意操作它们。

开始使用

首先安装 @antv/g-lottie-player 播放器：

npm install @antv/g-lottie-player --save

等待画布初始化、Lottie 文件加载完成后，即可创建 Lottie 动画对象，随后渲染到画布得到一个 Group，可任意对它进行变换，例如缩放或者移动到指定地点：

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

(async () => {
  // 从上下文中获取画布
  const { canvas } = chart.getContext();
  await canvas.ready;

  // 加载 Lottie 文件
  const lottieJSON = await fetch(
    'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*C9f6TaadHikAAAAAAAAAAAAADmJ7AQ',
  ).then((res) => res.json());

  // 创建动画
  const animation = loadAnimation(lottieJSON, { loop: true, autoplay: true });
  // 渲染到画布，得到 Group 容器
  const wrapper = animation.render(canvas);
  // 任意操作容器，例如移动到指定位置
  wrapper.scale(0.5);
  wrapper.translate(160, 100);
})();

效果如下：

更多动画控制选项可以参考：Lottie Animation 文档。