目录
喜大普奔~~微信小程序官方已经宣布支持lottie了。
一、通过npm安装lottie
npm install --save lottie-miniprogram
二、微信小程序npm 构建
npm init
npm init执行之后,一直按回车即可。
一直按回车,出现ok字样后,打开微信开发者工具 ,依次点击 工具一>构建npm即可
如图提示构建完成后,我们的小程序目录会多出一个 文件夹:miniprogram_npm。
三、制作lottie要使用的json包
不会AE也不怕,阿里提供了一个在线制作lottiejson的网站:https://design.alipay.com/emotion
普通开发者也可以做出精美的动画。通过上面那个连接制作完动画后,导出为json即可。
如果有服务器的,可以将json文件保存到服务器,这样就可以减轻小程序的体积了。
四、小程序使用lottie
1.index.wxml(我这里加了个按钮,点击按钮才显示动画,具体用法看应用场景)
<canvas id="canvas" type="2d"></canvas>
<button bindtap="click">点我预览动画</button>
2.index.js
详细的说明已经写到下面代码里的注释了,就不再多说了,看码说话!
import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
data: {
},
onLoad() {
},
onReady() {
},
click() {//按键点击事件
wx.createSelectorQuery().select('#canvas').node(res => {
const canvas = res.node
const context = canvas.getContext('2d')
canvas.width = 300//设置宽高,也可以放到wxml中的canvas标签的style中
canvas.hight = 300
lottie.setup(canvas)//要执行动画,必须调用setup,传入canvas对象
lottie.loadAnimation({//微信小程序给的接口,调用就完事了,原理不太懂
loop: true,//是否循环播放(选填)
autoplay: true,//是否自动播放(选填)
path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接,可以防止小程序的体积过大,要注意请求域名要添加到小程序的合法域名中
rendererSettings:{
context//es6语法:等同于context:context(必填)
}
})
}).exec()
}
})
四、效果预览:
上传不了视频,就上传张截图吧