微信小程序使用lottie动画（lottie-miniprogram）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用lottie动画（lottie-miniprogram）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意，想要在小程序中使用lottie动画，需要引入lottie-miniprogram组件，注意主包大小（咱就是主包过大了，c）！！！

话不多比，直接开始！

第一步：使用npm引入lottie-miniprogram。

去项目根目录cmd进命令行，输入神秘口令：

npm install --save lottie-miniprogram

第二步：引入完成以后，执行构建代码：

npm init

敲回车以后，会出现许多待填项，直接全部回车就行了，因为

lottie-miniprogram,微信小程序,小程序

第三步：打开微信开发者工具，在左上角的工具 - > 选择构建npm,再等个一两秒后会提示构建成功！

lottie-miniprogram,微信小程序,小程序

第四步：使用：

1、首先你需要一个可以给你生成Lottie动画资源的ui，一般是使用ae做的，没有就只能自己做或者去"Alipay Design"去找了。

2、在代码中使用

<canvas id="c0" type="2d" style="width: 100%; height: 100%;"></canvas>



import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
  data: {
   
  },
  onLoad() {
 const windowWidth = systemInfo.screenWidth; // 窗口宽度
    const windowHeight = systemInfo.screenHeight; // 窗口高度
    wx.createSelectorQuery().select('#c0').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = windowWidth //设置宽高，也可以放到wxml中的canvas标签的style中
      canvas.hight = windowHeight 
      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()
  }
})

注意：我举得例子是将lottie动画资源放到服务器上的例子，如果你没有的话，想放在本地，就是这样：

<canvas id="c0" type="2d" style="width: 100%; height: 100%;"></canvas>



import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
  data: {
   
  },
  onLoad() {
 const windowWidth = systemInfo.screenWidth; // 窗口宽度
    const windowHeight = systemInfo.screenHeight; // 窗口高度
    wx.createSelectorQuery().select('#c0').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = windowWidth //设置宽高，也可以放到wxml中的canvas标签的style中
      canvas.hight = windowHeight 
      lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
 
      lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
        loop: true,//是否循环播放（选填）
        autoplay: true,//是否自动播放（选填）
        animationData: require('../json/data.js'),//自己找个路径放置静态资源，然后引入就行，在本地的话需要改成.js文件，并且把文件中的图片路径做修改。
        rendererSettings:{
          context//es6语法：等同于context:context（必填）
        }       
      })
    }).exec()
  }
})

然后就算是完成了。

坑：

本地存放资源的话，首先你要改成.js文件，第二你还要在文件最开头添加

module.exports =原来的代码

第三：如果json文件中有图片的话，需要修改图片路径。这就要结合你的实际路径了。

坑2：一定一定一定一定一定一定要记得销毁，释放内存！！！！！！！！！！！

尤其是使用多个动画资源的情况下，要不非常容易崩溃

//如果是在组件中的话
lifetimes: {
    attached() {
      ........
    },
    detached(){
      this.ani.destroy()
    }
  },

//如果是在主界面中的话

onUnload(){
      this.ani.destroy()
}

我在第二个坑死的老惨了！

结束下班！！！！文章来源地址https://www.toymoban.com/news/detail-842703.html

到了这里，关于微信小程序使用lottie动画（lottie-miniprogram）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！