H5W3
当前位置:H5W3 > JavaScript > 小程序 > 正文

【小程序】lottie 动画库适配小程序的版本

lottie-miniprogram

lottie 动画库适配小程序的版本。

https://developers.weixin.qq….

可参考该代码片段:https://developers.weixin.qq.com/s/2TYvm9mJ75bF。

制作lottie要使用的json包

不会AE也不怕,阿里提供了一个在线制作lottiejson的网站:https://design.alipay.com/emo…
普通开发者也可以做出精美的动画。通过上面那个连接制作完动画后,导出为json即可。
如果有服务器的,可以将json文件保存到服务器,这样就可以减轻小程序的体积了。

具体代码使用步骤如下:

  1. 通过 npm 安装:
npm install --save lottie-miniprogram
  1. 传入 canvas 对象用于适配
1.  <canvas id="canvas" type="2d"></canvas>
2.  <button bindtap="click">点我预览动画</button>
import lottie from 'lottie-miniprogram'
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({//lottie给的接口
loop: false,//是否循环播放(选填)
autoplay: true,//是否自动播放(选填)
path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接,可以防止小程序的体积过大,要注意请求域名要添加到小程序的合法域名中
rendererSettings:{
context//es6语法:等同于context:context(必填)
}
})
}).exec()
}

示例效果如下

【小程序】lottie 动画库适配小程序的版本

lottie 主要接口如下:

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

https://developers.weixin.qq….

目前提供两个接口:

lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用,传入 canvas 对象

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同,支持的参数有:

  • loop
  • autoplay
  • animationData
  • path (只支持网络地址)
  • rendererSettings.context (必填)

https://developers.weixin.qq….

  • 本项目是以 npm 的方式依赖原 lottie-web 项目,若原项目有新版本,可直接改变依赖的版本号。
  • 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现,由于还有些小问题没有正式开放,但目前用在此处暂无发现问题。
  • 由于小程序本身不支持动态执行脚本,因此 lottie 的 expression 功能也是不支持的。

本文地址:H5W3 » 【小程序】lottie 动画库适配小程序的版本

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址