微信小程序使用lottie

 

目录

一、通过npm安装lottie

二、微信小程序npm 构建

三、制作lottie要使用的json包

四、小程序使用lottie

四、效果预览：

---

喜大普奔~~微信小程序官方已经宣布支持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()
  }
})

四、效果预览：

上传不了视频，就上传张截图吧