Front end lazy artifact — Lottie animation library use North

Time:2021-3-31

Lottie introduction

Lottie is a library developed by airbnb for Android, IOS, web and windows. It is used to parse Adobe After Effects animations exported to JSON using bodymovin and present them on mobile devices and networks

advantage

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

Front end lazy artifact -- Lottie animation library use North

GitHub warehouse address

  • lottie-web: https://github.com/airbnb/lot…
  • lottie-ios: https://github.com/airbnb/lot…
  • lottie-android: https://github.com/airbnb/lot…

Basic use

  1. Installation dependency

    yarn add lottie-web
  2. 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 Render, you can choose ‘SVG’ /’canvas’ /’html ‘. Personal test shows that SVG has the best effect and compatibility
name Animation name, for reference
loop loop
autoplay Autoplay
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 JS bundle too large

API after instantiation

name parameter describe
stop nothing Stop Animation
play nothing Play the animation
pause nothing suspend
setSpeed Number Set the playback speed, 1 means 1 times the speed, 0.5 means 0.5 times the speed
setDirection Number Play forward and backward, 1 for forward and – 1 for reverse
goToAndStop Number, [Boolean] Skip to a frame or a second to stop. The second parameter iframe is based on frame mode or time. The default value is false
goToAndPlay Number, [Boolean] When jumping to a frame or a second, the second parameter iframe is based on frame mode or time. The default value is false
playSegments Array, [Boolean] To play a clip, parameter 1 is an array, and the two elements are start frame and end frame; parameter 2 is whether to play the clip immediately or wait for the previous animation to finish playing
destroy nothing Destruction

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

Dynamic modification of pictures in Lottie

Dynamic modification of text in Lottie

Elegant control of Lottie playback with async / await

More application directions of Lottie

  • Controllable animation

    Because Lottie animation can be controlled by program, many animations on marketing activity pages can be realized by Lottie

    For example, the very common interactive form of “big turntable” and “lucky draw machine”, if the designer makes a more refined lucky draw animation, we only need to call. Play () to control Lottie play when the user clicks the lucky draw, and the page experience will be more advanced

  • 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 implemented with Lottie (in fact, the design tool may be AE). On the one hand, the file size is smaller, on the other hand, Lottie’s technical solution 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 the user’s interaction when the animation is playing

  • Simple game

    With Lottie’s own play control ability, we can even make some simple games. For example, the following are examples in our business recently, such as 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 time, 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 can help zero basic users easily complete dynamic effect production through massive dynamic effect materials and visual editing ability

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]