微信小程序 工具庫類·lottie

lottie-miniprogram

lottie 動畫庫適配小程序的版本。

lottie 的相關介紹與動畫生成方法等請參考 官方說明

依賴小程序基礎庫版本 >= 2.8.0 的環(huán)境

使用

可參考該代碼片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF。大致步驟如下：

1. 通過 npm 安裝：

npm install --save lottie-miniprogram

1. 傳入 canvas 對象用于適配

<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. 使用 lottie 接口

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

接口

目前提供兩個接口：

lottie.setup(canvas)

需要在任何 lottie 接口調用之前調用，傳入 canvas 對象

lottie.loadAnimation(options)

與原來的 loadAnimation 有些不同，支持的參數有：

• loop
• autoplay
• animationData
• path （只支持網絡地址）
• rendererSettings.context （必填）

說明

• 本項目是以 npm 的方式依賴原 lottie-web 項目，若原項目有新版本，可直接改變依賴的版本號。
• 本項目依賴小程序基礎庫 2.8.0 里性能更好的 canvas 實現，由于還有些小問題沒有正式開放，但目前用在此處暫無發(fā)現問題。
• 由于小程序本身不支持動態(tài)執(zhí)行腳本，因此 lottie 的 expression 功能也是不支持的。