新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程:微信小程序工具庫類·lottie
lottie-miniprogram
lottie 動畫庫適配小程序的版本。

在西塞山等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都做網(wǎng)站、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè),西塞山網(wǎng)站建設(shè)費用合理。
lottie 的相關(guān)介紹與動畫生成方法等請參考 官方說明
依賴小程序基礎(chǔ)庫版本 >= 2.8.0 的環(huán)境
使用
可參考該代碼片段:https://developers.weixin.qq.com/s/2TYvm9mJ75bF。大致步驟如下:
- 通過 npm 安裝:
npm install --save lottie-miniprogram
- 傳入 canvas 對象用于適配
import lottie from 'lottie-miniprogram'
Page({
onReady() {
wx.createSelectorQuery().select('#canvas').node(res => {
const canvas = res.node
lottie.setup(canvas)
}).exec()
}
})
- 使用 lottie 接口
lottie.setup(canvas)
lottie.loadAnimation({
...
})
接口
目前提供兩個接口:
lottie.setup(canvas)
需要在任何 lottie 接口調(diào)用之前調(diào)用,傳入 canvas 對象
lottie.loadAnimation(options)
與原來的 loadAnimation 有些不同,支持的參數(shù)有:
- loop
- autoplay
- animationData
- path (只支持網(wǎng)絡(luò)地址)
- rendererSettings.context (必填)
說明
- 本項目是以 npm 的方式依賴原 lottie-web 項目,若原項目有新版本,可直接改變依賴的版本號。
- 本項目依賴小程序基礎(chǔ)庫 2.8.0 里性能更好的 canvas 實現(xiàn),由于還有些小問題沒有正式開放,但目前用在此處暫無發(fā)現(xiàn)問題。
- 由于小程序本身不支持動態(tài)執(zhí)行腳本,因此 lottie 的 expression 功能也是不支持的。
網(wǎng)站欄目:創(chuàng)新互聯(lián)小程序教程:微信小程序工具庫類·lottie
當(dāng)前URL:http://www.dlmjj.cn/article/dpejpej.html


咨詢
建站咨詢
