先看效果圖：

1598250322634.gif

前言：

微信小程序的lottie動(dòng)畫庫(kù)是按照l(shuí)ottie-web動(dòng)畫庫(kù)改造而來(lái)。參考lottie-web：https://github.com/airbnb/lottie-web缕碎，以及官方文檔：http://airbnb.io/lottie/#/

目前我們要用到的是http://airbnb.io/lottie/#/web

調(diào)用lottie.loadAnimation（）啟動(dòng)動(dòng)畫洁桌。它采用以下形式將對(duì)象作為唯一參數(shù)：

• animationData：具有導(dǎo)出的動(dòng)畫數(shù)據(jù)的對(duì)象墓陈。
• path：動(dòng)畫對(duì)象的相對(duì)路徑。（animationData和path是互斥的）
• loop：true/false
• autoplay：true / false，準(zhǔn)備就緒后將立即開始播放
• name：動(dòng)畫名稱儒旬，以備將來(lái)參考
• renderer：'svg'/'canvas'/'html'設(shè)置渲染器
• container：在其上呈現(xiàn)動(dòng)畫的dom元素

它返回您可以通過(guò)播放，暫停帖族，setSpeed等控制的動(dòng)畫實(shí)例栈源。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

以上為web端的使用場(chǎng)景，那么我們?nèi)绾卧谛〕绦蛑惺褂媚兀?/h6>

1. 通過(guò) npm 安裝：

npm install --save lottie-miniprogram
npm init

2. 傳入 canvas 對(duì)象用于適配

<view style="text-align: center;">
  <canvas id="lottie_demo" type="2d" style="display: inline-block; width: 300px; height: 300px;" />
  <button bindtap="init" style="width: 300px;">初始化</button>
  <button bindtap="play" style="width: 300px;">播放</button>
  <button bindtap="pause" style="width: 300px;">暫停</button>
</view>

3. 使用lottie接口盟萨。

const app = getApp()
import lottie from 'lottie-miniprogram'

Page({
  data: {

  },
  // 初始化加載動(dòng)畫
  init() {
    if (this.inited) {
      return
    }
    wx.createSelectorQuery().selectAll('#lottie_demo').node(res => {
      const canvas = res[0].node
      const context = canvas.getContext('2d')
      canvas.width = 300
      canvas.height = 300
      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: require('../json/data.js'),
        rendererSettings: {
          context,
        },
      })
      this.inited = true
    }).exec()
  },
  play() {
    this.ani.play()
  },
  pause() {
    this.ani.pause()
  },
})

目前微信小程序只提供了兩個(gè)接口凉翻。

lottie.setup(canvas)

在任何 lottie 接口調(diào)用之前，需要傳入 canvas 對(duì)象

lottie.loadAnimation(options)**

與原來(lái)的 loadAnimation 有些不同捻激，支持的參數(shù)有：

*   loop // 循環(huán)播放
*   autoplay //自動(dòng)播放
*   animationData // 動(dòng)畫數(shù)據(jù)
*   path //（只支持網(wǎng)絡(luò)地址）
*   rendererSettings.context //（必填）

json/data.js為找設(shè)計(jì)小姐姐要的Lottie動(dòng)畫json數(shù)據(jù)制轰。我們這邊需要將該json改為js前计。
即開頭需要加上module.exports=，當(dāng)然Lottie官方也收集了很多的動(dòng)畫資源：https://lottiefiles.com/

module.exports={xxxxxx}

代碼片段如下：

https://developers.weixin.qq.com/s/Ah3fGQmz7VjE