微信小程序—如何使用动画加载神器Lottie

最新推荐文章于 2024-07-16 15:40:02 发布

玩烂小程序

最新推荐文章于 2024-07-16 15:40:02 发布

阅读量5.7k

点赞数 6

分类专栏：微信小程序文章标签： json动画加载 lottie小程序版真机异常 canvas 小程序

本文链接：https://blog.csdn.net/WeiHan_Seven/article/details/104782823

版权

微信小程序专栏收录该内容

51 篇文章

订阅专栏

Lottie是什么？

可以简单理解为不管是Android、还是IOS或者是h5、小程序都能通过它去加载同一动画文件，然后实现相同效果。

当然它也需要化身成各个平台的版本，今天介绍的就是小程序版本的Lottie

Lottie小程序效果

在这里插入图片描述

Lottie体验

在这里插入图片描述

Lottie安装到小程序

通过npm安装
1、根目录下打开终端输入

npm install --save lottie-miniprogram

2、接着输入

npm init

一直回车下去，直至执行完毕

3、打开微信开发者工具：工具>构建npm

Lottie小程序代码

const app = getApp()
import lottie from 'lottie-miniprogram'
Page({
  data: {
    lottiePath:""
  },
  onLoad: function () {
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
      },
    })
    var that = this
    wx.cloud.getTempFileURL({
      fileList: [{
        fileID: 'cloud://normal-env-ta6pc.6e8/17008-loveduck.json',
        maxAge: 60 * 60, // one hour
      }]
    }).then(res => {
      that.setData({
        lottiePath:res.fileList[0].tempFileURL
      })
      that.init()
    }).catch(error => {
    })
  },
  init() {
    var that = this
    if (this._inited) {
      return
    }
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')

      canvas.width = 300
      canvas.height = 300

      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: false,
        //远程动画
        path:that.data.lottiePath,
        //本地动画
        // animationData: require('loveDuck.js'),
        rendererSettings: {
          context,
        },
      })
      this._inited = true
    }).exec()
  },
  play() {
    this.ani.play()
  },
  pause() {
    this.ani.pause()
  },
})

wxml

<view class="intro">Lottie动画</view>
<view style="text-align: center;">
  <canvas id="canvas" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
  <button bindtap="play" style="width: 300px;">play</button>
  <button bindtap="pause" style="width: 300px;">pause</button>
</view>