“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Based on using

import lottie from 'lottie-web';

this.animation = lottie.loadAnimation({
    container: this.animationRef.current,
    renderer: 'svg'.loop: false.autoplay: false.animationData: dataJson,
    assetsPath: CDN_URL,
});
Copy the code

Configuration item of the loadAnimation parameter

Here are the configuration items for the loadAnimation parameter

  • AnimationData: an Object with the exported animation data: an Object with exported animation data .
  • Path: The relative path to the animation object. (animationData and Path are Mad exclusive) : The relative path of the animation object. (animationData and PATH are mutually exclusive)
  • Loop: true/false/number Whether to loop or how many times to loop
  • Autoplay: true/false it will start playing as soon as it is ready: It will start playing as soon as it is ready
  • Name: animation name for future reference: Animation name for future reference
  • Renderer: ‘SVG’/’canvas’/’ HTML ‘to set the renderer
  • Container: The dom element on which to render the animation

Method of the loadAnimation instance

Here are some examples of the main methods

  • Start/Pause/Stop/Destroy -> Play /pause/stop/destroy
this.animation.play()
this.animation.pause()
this.animation.stop()
this.animation.destroy()
Copy the code
  • setSpeed

Set speed, 1 is normal speed

this.animation.setSpeed(1)
Copy the code
  • setDirection

Sets the direction of the animation

this.animation.setDirection(-1)
Copy the code

If the interaction says that the incoming and outgoing animations can be used in the same direction, but in opposite directions, then use this method, set -1, and execute the Play method

  • goToAndPlay

Jump to an animation frame and play the animation frame

  • goToAndStop

Jump to a frame and stop

The above methods are used to do animation more, there are some methods below, used less, but also understand

  • playSegments(segments, forceFlag)

Segments: array. Can contain 2 values, used as the first and last frame of the animation. Or it can contain a sequence of arrays, each of which has 2 values. ForceFlag: Boolean value. If set to false, it waits for the current segment to complete. If true, it updates the value immediately.

  • setSubframe(useSubFrames)

UseSubFrames: If false, this will respect the original AE FPS. If true, it will update each requestAnimationFrame with an intermediate value. The default is true.

  • getDuration(inFrames)

    InFrames: If true returns the duration inFrames, If false in seconds.

The event

Lottie – Web also exposes the following events that can be used

  • DOMLoaded

So DOMLoaded, for example, when we initialize the animation and the animation is inserted into the DOM

  • complete

This event is triggered when the animation finishes animating

  • loopComplete

This event is triggered every time the animation is completed when looping to the animation

The top three are used a lot

  • onEnterFrame

Triggered when playing a frame of animation

  • onSegmentStart

Triggered when an animated segment starts playing

  • config_ready

(After the initial configuration is complete)

  • data_ready

(When all parts of the animation have been loaded)

  • data_failed

(When some animations fail to load)

  • Loaded_images

(When all images load successfully or incorrectly)

  • damage

The following two are less familiar, but these events and methods basically fulfill the requirements of the interaction and product.