Front end lazy artifact — North pointing for Lottie animation library

Time:2022-5-24

Lottie introduction

Lottie is a library developed by airbnb for Android, IOS, web and windows, which is used for parsingBodymovinExported as JSONAdobe After EffectsAnimation and rendering on mobile devices and networks

advantage

The best part of this scheme is that it liberates the front-end developers and allows designers to directly connect to the animation implementation

Front end lazy artifact -- North pointing for Lottie animation library

GitHub warehouse address

Basic use

  1. Installation dependency

    yarn add lottie-web
  2. Intra project reference

    import lottie from 'lottie-web'
  3. instantiation

    lottie.loadAnimation({
        container: document.getElementById('lottie-animation'),
        renderer: 'svg',
        loop: false,
        path: 'https://gaeacdn.jiliguala.com/jlgl/pages/animation/finger02.json'
    })

API introduction

Parameters of loadanimation

name describe
container The container used for rendering is usually a Div
renderer For the renderer, you can choose ‘SVG’ /’canvas’ /’html ‘. Personal tests show that SVG has the best effect and compatibility
name Animation name for reference
loop loop
autoplay Auto play
path JSON path, the page will get JSON through an HTTP request
animationData JSON animation data and path are mutually exclusive. It is recommended to use path, because animation data will package the data, which will make the JS bundle too large

Instantiated API

name parameter describe
stop nothing Stop Animation
play nothing Play animation
pause nothing suspend
setSpeed Number Set the playback speed. 1 means 1 times the speed and 0.5 means 0.5 times the speed
setDirection Number Forward and reverse play, 1 indicates forward and – 1 indicates reverse
goToAndStop Number, [Boolean] Skip to a frame or stop at a second. The second parameter iframe is whether to be based on frame mode or time. The default is false
goToAndPlay Number, [Boolean] Jump to a frame or a second. The second parameter iframe is whether to be based on frame mode or time. The default is false
playSegments Array, [Boolean] Playback clip, parameter 1 is array, and the two elements are start frame and end frame; Parameter 2 is whether to play the clip immediately or wait until the previous animation playback is completed
destroy nothing Destroy

event

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart
  • you can also use addEventListener with the following events:
  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready (when initial config is done)
  • data_ready (when all parts of the animation have been loaded)
  • DOMLoaded (when elements have been added to the DOM)
  • destroy

Advanced Usage

Dynamically modify pictures in Lottie

Dynamically modify text in Lottie

Control Lottie playback gracefully with async / await

More application directions of Lottie

  • Controllable animation

    Because Lottie animation can be played through program control, Lottie can be considered to realize the animation on many marketing activity pages

    For example, the common lottery interactive forms such as “big turntable” and “lottery machine”, if the designer makes a more exquisite lottery animation, we only need to call it when the user clicks the lottery Just play () to control Lottie playback, and the page experience will be more up-to-date

  • Replace short video

    Since the beginning of this year, short videos have become a trend in the details of Taobao products, but in fact, many videos can be realized by Lottie (in fact, the design tool may be AE). On the one hand, the file volume is smaller, on the other hand, Lottie’s technical scheme can easily replace the key “copywriting” in animation

  • Interactive animation

    Because Lottie’s JSON describes various details of animation, such as key frames, displacement tracks, etc., interactive animation can be realized if these parameters are dynamically changed according to user interaction during animation playback

  • Simple game

    Through Lottie’s built-in playback control ability, we can even make some simple games. For example, the following is an example of our recent business. Lottie is used in the animation of dice, ants walking stairs and so on

Example:https://www.yuque.com/lottie/…

Tool library

  1. Lolita:https://design.alipay.com/lolita

Function:

  • Can be used to compress animation source files
  • View the relevant properties of the animation file (animation frequency, number of frames, canvas size…)
  • Export files in different formats
  • Animation editing
  1. Ma Liang:https://design.alipay.com/emo…

    As a one-stop dynamic effect production platform, it helps zero based users easily complete dynamic effect production through massive dynamic effect materials and visual editing ability