微信小程序 实现json格式文件转动画或图片效果

微信小程序 实现json格式文件转动画或图片效果

1. 安装lottie-miniprogram

npm install --save lottie-miniprogram

2. 引入文件

import lottie from 'lottie-miniprogram' 

• 如果遇到引入lottie-miniprogram.js报错 请点击微信开发者工具 “工具”-》构建npm

3. wxml

  <canvas id="c1" type="2d" ></canvas>

4. js

  init() {
    if (this._inited) {
      return
    }
    wx.createSelectorQuery().selectAll('#c1').node(res => {
      const canvas = res[0].node
      const context = canvas.getContext('2d')

      canvas.width = 300
      canvas.height = 300

      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: require('../json/json.js'),
        rendererSettings: {
          context,
        },
      })
      this._inited = true
    }).exec()
  },

• 如果遇到 wx.createSelectorQuery() 报错，请尝试使用this.createSelectorQuery()

5. json.js

module.exports={
// 你的json 内容
}