lottie-miniprogram

The lottie animation library adapts the version of the widget.

Please refer to the official instructions for introductions to lottie and how to generate animations

An environment that depends on the base library version of the small program, which is 2.8.0

Use

You can refer to the snippet: https://developers.weixin.qq.com/s/2TYvm9mJ75bF. The general steps are as follows:

1. Installed via npm:

npm install --save lottie-miniprogram

1. The incoming canvas object is used for mating

<canvas id="canvas" type="2d"></canvas>

import lottie from 'lottie-miniprogram'

Page({
  onReady() {
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      lottie.setup(canvas)
    }).exec()
  }
})

1. Use the lottie interface

lottie.setup(canvas)
lottie.loadAnimation({
  ...
})

Interface

Two interfaces are currently available:

lottie.setup(canvas)

The canvas object needs to be called before any lottie interface calls

lottie.loadAnimation(options)

Unlike the original loadAnimation, the parameters supported are:

• loop
• autoplay
• animationData
• path (network addresses only)
• rendererSettings.context (required)

Description

• This project relies on the original lottie-web project in the form of npm, and if the original project has a new version, the dependent version number can be changed directly.
• This project relies on the better-performing canvas implementation in the small program base library 2.8.0, which is not officially open due to minor issues, but no problems are currently found here.
• Lottie's expression feature is also not supported because the program itself does not support dynamic script execution.