除了使用 Web Animations API 描述动画，我们还支持播放 Lottie 格式，为此我们提供了一个类似 lottie-web 的播放器。在内部我们会将其中定义的图形和关键帧动画转换成我们的基础图形 和动画描述，同时提供简单的动画控制方法例如播放、暂停以及跳转到指定时刻或帧，加入到画布后就可以像基础图形一样任意操作它们。

使用方式

首先安装播放器：

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

然后使用播放器提供的 loadAnimation 方法创建一个 LottieAnimation 对象，传入 Lottie JSON：

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

const ballAnimation = loadAnimation(bouncy_ball, { loop: true });

最后在合适的时机渲染到画布：

canvas.addEventListener(CanvasEvent.READY, () => {
    const wrapper = ballAnimation.render(canvas);
});

loadAnimation

参考 lottie-web 的同名方法，用于加载 Lottie 文件创建 LottieAnimation。

参数如下：

• data Lottie JSON
• options 配置项
  • loop 类型为 boolean | number。是否开启循环播放，默认值为 true 即无限循环。当传入 number 时代表循环次数。
  • autoplay 类型为 boolean。加载完成后立刻开始自动播放，默认值为 false

例如创建一个无限循环、立即播放的动画：

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

const ballAnimation = loadAnimation(bouncy_ball, {
    loop: true,
    autoplay: true,
});

LottieAnimation

通过 loadAnimation 可以创建该对象，进而对动画过程进行控制。

render

渲染到画布并返回一个 Group 作为容器，添加到画布或者任意已挂载的元素下，随后可以对其进行变换：

const wrapper = animation.render(canvas);

wrapper.scale(0.5);
wrapper.translate(100, 100);

支持传入以下两种参数：

• 画布。此时会添加到画布根节点下
• 任意已添加到画布中的元素

值得注意的是，和动画一样需要在画布初始化完成后进行。

play

开始播放

animation.play();

pause

暂停播放

animation.pause();

togglePause

如果正在播放则暂停，反之亦然

animation.togglePause();

stop

结束播放

animation.stop();

goTo

跳转到指定时刻或帧。

参数如下：

• value 指定秒时刻或者帧数
• isFrame 表示 value 是否传入的是帧数，默认值为 false

// 跳转到时间轴的 2s 时刻
animation.goTo(2);

// 跳转到第 10 帧
animation.goTo(10, true);

playSegments

从指定的帧范围开始播放动画。

参数如下：

• segments [number, number] 指定起始和终止帧范围

animation.playSegments([firstFrame, lastFrame]);

fps

获取每秒的帧数。

animation.fps(); // 25

getDuration

返回持续时间，以秒或者帧为单位。

参数如下：

• inFrames 是否以帧为单位，默认为 false

animation.getDuration(); // 2
animation.getDuration(true); // 120

两者的换算关系为：

const durationInSeconds = animation.getDuration();
const durationInFrames = animation.getDuration(true);

durationInFrames === animation.fps() * durationInSeconds; // true

setSpeed

控制播放速度，默认为 1。大于 1 表示加速，小于 1 表示减速：

// 2x
animation.setSpeed(2);

setDirection

1 表示正向，-1 表示反向。默认正向播放：

animation.setSpeed(1);
animation.setSpeed(-1);

destroy

销毁全部内部对象，当然同时也会终止动画。

animation.destroy();

size

返回 Lottie 文件尺寸：

animation.size(); // { width: 1080, height: 260 }

version

返回 Lottie 文件中包含的 Bodymovin 版本

animation.version();

支持特性

Shapes

支持 Shape Layer 中定义的以下元素：

• Rectangle 会转换成 Rect 进行渲染。https://lottiefiles.github.io/lottie-docs/shapes/#rectangle
• Ellipse 会转换成 Ellipse 进行渲染。https://lottiefiles.github.io/lottie-docs/shapes/#ellipse
• Path 会转换成 Path 进行渲染。https://lottiefiles.github.io/lottie-docs/shapes/#path
• Group 会转换成 Group 进行渲染。https://lottiefiles.github.io/lottie-docs/shapes/#group
• PolyStar https://lottiefiles.github.io/lottie-docs/shapes/#polystar

Transform

https://lottiefiles.github.io/lottie-docs/concepts/#transform

支持以下特性：

• anchor 对应 a 字段
• 对应 p 字段
• 对应 s 字段
• 对应 r 字段

暂不支持以下特性：

• 对应 sk 字段
• 对应 sa 字段

在该示例中，深蓝色为基准矩形，我们以红色圆点为 ，旋转一定角度得到淡蓝色矩形。

[WIP] Offset Path

https://lottiefiles.github.io/lottie-docs/concepts/#animated-position

Style

支持以下样式属性：

• Fill
• Stroke
• Gradients

Fill

https://lottiefiles.github.io/lottie-docs/shapes/#fill

填充色，同时支持以下特性：

• fillOpacity 对应 o 字段
• fillRule 对应 r 字段

Stroke

https://lottiefiles.github.io/lottie-docs/shapes/#stroke

描边色，同时支持以下特性：

• strokeOpacity 对应 o 字段
• strokeWidth 对应 w 字段
• lineCap 对应 lc 字段
• lineJoin 对应 lj 字段
• miterLimit 对应 ml 字段
• lineDash 对应 d 字段

Gradients

https://lottiefiles.github.io/lottie-docs/shapes/#gradients

支持线性和放射渐变。

暂不支持以下特性：

• 对渐变应用动画
• Highlight length & angle (h 和 a 字段)

Modifiers

[WIP] Repeater

[WIP] Trim Path

Layers

https://lottiefiles.github.io/lottie-docs/layers/#layers

Solid Color

https://lottiefiles.github.io/lottie-docs/layers/#solid-color-layer

Image

https://lottiefiles.github.io/lottie-docs/layers/#image-layer https://lottiefiles.github.io/lottie-docs/assets/#image

[WIP] Text

https://lottiefiles.github.io/lottie-docs/layers/#text-layer https://lottiefiles.github.io/lottie-docs/text/

Precomposition

https://lottiefiles.github.io/lottie-docs/layers/#precomposition-layer https://lottiefiles.github.io/lottie-docs/assets/#precomposition

[WIP] Merge Paths

https://lottie-animation-community.github.io/docs/specs/layers/shapes/#merge-paths-property

Clipping Mask

内部会转换成 clipPath 应用在目标元素上，并支持对其进行路径动画。

注意事项：

• 受限于 SVG 的实现。目前仅支持单一 Clipping Mask，声明多个也只有第一个会生效
• Mask Mode Type 仅支持 Add 运算符

https://lottie-animation-community.github.io/docs/specs/layers/common/#clipping-masks

Layer Effects

针对 Layer 的后处理效果暂不支持。

https://lottiefiles.github.io/lottie-docs/effects/#layer-effects

Expressions

暂不支持表达式。

https://lottiefiles.github.io/lottie-docs/expressions/