How to use Lottie animation library in WeChat applet

How to use Lottie animation library in WeChat applet

Reference link:

I specifically refer to these two links! ! Thanks to the help of this article, I learned how to call

www.jianshu.com/p/53e511c86...

lottie-miniprogram | WeChat Open Document (qq.com)

demand:

In the project, sometimes you need to add animation to make the interface more beautiful. At this time, Miss Designer will give you Lottie animation json file, and we need to start the animation through lottie

Steps:

The lottie animation library in WeChat is based on the lottie-web animation library.

Call lottie.loadAnimation() to start the animation. It takes the following form with the object as the only parameter.

  • animationData: object with exported animation data
  • path: The relative path of the animation object. (AnimationData and path are mutually exclusive)
  • loop: true/false
  • autoplay: true/fasle, will start playing immediately when ready
  • name: the name of the animation for future reference
  • renderer:'svg'/'canvas'/'html' set the renderer
  • container: the dom element on which the animation is presented

It returns an animation instance that you can control through play, pause, setSpeed, etc.

How will we use it in the mini program?

1. First of all, UI designs the json data of Lottie animation. Need to change json to js. Add module.exports = at the beginning of the file. Lottie official also collected a lot of animation resources: lottiefiles.com/

2. Install lottie-miniprogram dependency, remember to build dependency.

npm install --save lottie-miniprogram
npm init
 

3. Writing xml, the part of animation needs to be undertaken by canvas

<view  hidden="{{hide}}" class="progress_mask">
   // canvas      
   <canvas class="progress_icon" type="2d"></canvas>    
   <view class="percent">{{percent}}%</view>    
   <view class="progress_text">{{progressText}}</view>    
   <view class="cancelBtn" bindtap="cancel"> </view>
</view>
 

4. Use lottie interface

In the custom component, it is written in the life cycle attached, and the node needs to be obtained through wx.createSelectorQuery().in(this).selectAll('')

// js lottie 
import lottie from 'lottie-miniprogram'
Component({
  lifetimes: {
    attached() {
      let ratio = APP.systemInfo.windowWidth/750 //rpx px 
      wx.createSelectorQuery().in(this).selectAll('.progress_icon').node(res => {
        const canvas = res[0].node
        const context = canvas.getContext('2d')
        canvas.width = 640*ratio
        canvas.height = 120*ratio
        lottie.setup(canvas)
       //lottie.loadAnimation 
        this.ani = lottie.loadAnimation({
          loop: true,
          autoplay: true,
          animationData: require('./json/lottie_loading_to_word'),//
          rendererSettings: {
            context,
          },
        })
      }).exec()
    },
  },
 })
 

In the pages page, the way to get the node can be written in onReady(), just use wx.createSelectorQuery().selectAll('') to get the node

// js lottie 
import lottie from 'lottie-miniprogram'
pages({
    onReady() {
      let ratio = APP.systemInfo.windowWidth/750 //rpx px 
       wx.createSelectorQuery().selectAll('.progress_icon').node(res => {
        const canvas = res[0].node
        const context = canvas.getContext('2d')
        canvas.width = 640*ratio
        canvas.height = 120*ratio
        lottie.setup(canvas)
       //lottie.loadAnimation 
        this.ani = lottie.loadAnimation({
          loop: true,
          autoplay: true,
          animationData: require('./json/lottie_loading_to_word'),//
          rendererSettings: {
            context,
          },
        })
      }).exec()
  },
 })
 

5. How to pause and start animation

play() {
    this.ani.play()
 },
 pause() {
   this.ani.pause()
 },