lottie-miniprogram

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

lottie 的相关介绍与动画生成方法等请参考 官方说明

依赖小程序基础库版本 >= 2.8.0 的环境

https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html#%E4%BD%BF%E7%94%A8使用

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

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

###具体代码使用步骤如下：

  1. 通过 npm 安装：
1
npm install --save lottie-miniprogram
  1. 传入 canvas 对象用于适配
1
2
3
1.  <canvas id="canvas" type="2d"></canvas>
    
2.  <button bindtap="click">点我预览动画</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 主要接口如下：

1
2
3
4
lottie.setup(canvas)
lottie.loadAnimation({
  ...
})

https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html#%E6%8E%A5%E5%8F%A3接口

目前提供两个接口：

lottie.setup(canvas)

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

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同，支持的参数有：

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

https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html#%E8%AF%B4%E6%98%8E说明

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