In addition to describing animations using the Web Animations API, we also support playback of Lottie formats, for which we provide a player like [lottie-web](https://github.com/airbnb/lottie- web/) player. Internally we will convert the graphics and Keyframe animations defined there into our basic graphics and animation descriptions, while providing simple animation control methods.

Usage

Install player first:

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

Then use the loadAnimation method provided by the player to create a LottieAnimation object, passing in the Lottie JSON.

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

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

Finally, render to canvas at the right time.

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

loadAnimation

Reference [lottie-web](https://github.com/airbnb/lottie-web/blob/6faae912910b2d7be6c5422ef4621f3933c19d60/player/js/animation/ AnimationManager.js#L227) method of the same name for loading Lottie files to create LottieAnimation.

The parameters are as follows.

• data Lottie JSON
• options configuration item
  • loop is of type boolean | number. If or not loop is enabled, the default value is true which means infinite loop. When number is passed in, it means the number of loops.
  • autoplay is of type boolean. The default value is false to start autoplay immediately after loading.

For example, to create an infinitely looping, immediately playable animation.

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

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

LottieAnimation

This object can be created by loadAnimation to control the animation process.

render

Renders to canvas and returns a Group as a container, which can subsequently be transformed to.

const wrapper = animation.render(canvas);

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

The following two parameters are supported to be passed in.

• Canvas. This will be added to the canvas under the root node
• Any element that has been added to the canvas

It is worth noting that, like animation, it needs to be done after canvas initialization is complete.

play

Start the animation.

animation.play();

pause

Pause the animation.

animation.pause();

togglePause

Pause if it is playing and vice versa.

animation.togglePause();

stop

Stop the animation.

animation.stop();

goTo

Jump to the specified moment or frame.

The parameters are as follows.

• value specifies the second moment or frame
• isFrame indicates whether value is passed in as a frame, the default value is false.

// Jump to the 2s moment of the timeline
animation.goTo(2);

// Jump to frame 10
animation.goTo(10, true);

getDuration

Returns the duration, in seconds or frames.

The parameters are as follows.

• inFrames if or not in frames, default is false

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

The conversion relationship between the two is:

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

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

playSegments

Start playing the animation from the specified frame range.

The parameters are as follows.

• segments [number, number] Specify the start and end frame range

animation.playSegments([firstFrame, lastFrame]);

setSpeed

Controls the playback speed, default is 1. Greater than 1 means speed up, less than 1 means speed down.

// 2x
animation.setSpeed(2);

setDirection

1 means forward, -1 means reverse. Default forward play.

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

destroy

Destroys all internal objects and, of course, terminates the animation at the same time.

animation.destroy();

size

Return to Lottie file size.

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

version

Returns the version of Bodymovin contained in the Lottie file

animation.version();

Features

Shapes

Support the following Shape Layer

• Rectangle It will be converted to Rect for rendering. https://lottiefiles.github.io/lottie-docs/shapes/#rectangle
• Ellipse It will be converted to Ellipse for rendering. https://lottiefiles.github.io/lottie-docs/shapes/#ellipse
• Path It will be converted to Path for rendering. https://lottiefiles.github.io/lottie-docs/shapes/#path
• Group It will be converted to Group for rendering. 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

The following features are supported.

• corresponds to the a field
• corresponds to the p field
• for the s field
• corresponds to the r field

The following features are not supported at this time.

• corresponds to the sk field
• corresponds to the sa field

In this example, the dark blue is the base rectangle, and we use the red dot as the to rotate it by a certain angle to get the light blue rectangle.

[WIP] Offset Path

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

Style

The following style attributes are supported.

• Fill
• Stroke
• Gradients

Fill

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

Fill color, while supporting the following features.

• fillOpacity corresponds to the o field
• fillRule corresponds to the r field

Stroke

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

Stroke color, while supporting the following features.

• strokeOpacity corresponds to the o field
• strokeWidth corresponds to the w field
• lineCap corresponds to the lc field
• lineJoin corresponds to the lj field
• miterLimit corresponds to the ml field
• lineDash corresponds to the d field

Gradients

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

Support linear and radial gradients.

The following features are not supported at this time.

• Apply animations to gradients
• Highlight length & angle (h and a fields)

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

Internally, it will be converted to clipPath to be applied to the target element and support path animation on it.

Caution.

• Limited by the SVG implementation. Currently only a single Clipping Mask is supported, and only the first one will take effect if multiple are declared
• Mask Mode Type only supports the Add operator

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

Layer Effects

Post-processing effects for Layer are not supported at this time.

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

Expressions

Expressions are not supported at this time.

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