如何在微信小程序中使用Lottie动画库，JSON动画？

择其所爱,爱其所择,前四个字是前半生,后四个字,便是余下的岁月

对于如何在微信小程序中使用Lottie动画库我是不感冒的，若项目中很少使用动画图标，一张GIF绝对是多一事不如少一事。相反若动画需要用到的比较多，网络图标也不是不行...

因此可以理解为Lottie动画库可以接触，但不一定用。无论是网络还是本地优势是体积，一张最小150*150的体积在550KB，而Json只有27.5KB

安装依赖

在使用之前我们的安装微信开发者工具的lottie-miniprogram库

注：小程序基础库版本 >= 2.8.0 的环境

1.在微信开发工具控制台终端执行（或者外部终端）

npm install --save lottie-miniprogram

2.传入 canvas 对象用于适配

<view style="text-align: center;">
  <canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
  <button bindtap="pause" style="width: 300px;">停止</button>
</view>

.intro {
  margin: 30px;
  text-align: center;
}
button {
  margin-top: 10px;
}

const app = getApp()
// 引入库
import lottie from 'lottie-miniprogram'
​
Page({
  data: {
​
  },
  onLoad: function () {
    // 初始化动画
    this.init();
  },
  // 初始化动画
  init() {
    if (this._inited) {
      return
    }
    wx.createSelectorQuery().selectAll('#c1').node(res => {
      const canvas = res[0].node
      const context = canvas.getContext('2d')
​
      // json动画模糊问题处理
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = 300 * dpr
      canvas.height = 300 * dpr

      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,//循环
        autoplay: true,//自动播放
        animationData: require('../json/catrim.js'),//本地动画
        //path：'', //path和animationData只需要一个，path需要注意合法域名
        rendererSettings: {
          context,
        },
      })
      this._inited = true
    }).exec()
  },
  pause() {
    this.ani.pause()
  },
})

(path和animationData只需要一个，path需要注意合法域名)

更新

更新lottie-miniprogram版本

可以npmjs.com上查看版本号后在node_modules/package.json找到

lottie-web字段修改对于版本后，在终端执行

npm i

本地json动画

素材网站：https://lottiefiles.com

网站下载的素材是json格式而小程序需要js格式，编辑json文件添加js导出

module.exports={
//这里就是动画的json内容
}

其他

看了一圈文档不知道还是不是没看仔细，没有关于lottie摧毁的函数

下载

官方示例：https://github.com/wechat-miniprogram/lottie-miniprogram

（顶部详情 - 本地设置 - 调试基础库 ‘dev’ 改成最新版本