微信小程序使用lottie-miniapp动画/原生

lottie-miniapp

//使用的是ui设计动画，只是本人一知半解，仅供参考

下载
使用的是微信开发者工具，打开项目文件，使用shift + 鼠标右键，选中PowerShell，命令窗输入：

npm i -S lottie-miniapp

也可以查看下载使用说明：lottie下载使用说明

切记构建npm模块，当文件目录下有下图所示文件时，构建成功

需求页引入
import lottie from 'lottie-miniapp';

引入模块后，项目使用时有两种方式去引入使用动画
1、本地文件直接引入，这样使用可能会造成本地文件过大，导致无法上传的问题，如果使用的动画较小，则无需担心这个问题。

const panda = require('../../utils/pandas.js')  //动画引入

使用

let widths = 800 / 750 * wx.getSystemInfoSync().windowWidth //画布大小算法
    let heights = 800 / 750 * wx.getSystemInfoSync().windowWidth    //画布大小算法
    const canvasContext = wx.createCanvasContext('test-canvas');
    const animationData = panda; // 动画
    const animationPath = '';
    canvasContext.canvas = {
      width: widths,
      height: heights
    };
    // 如果同时指定 animationData 和 path， 优先取 animationData
    pangeAnim = lottie.loadAnimation({
      renderer: 'canvas', // 只支持canvas
      loop: true,
      autoplay: states,
      animationData: animationData,
      path: animationPath,
      rendererSettings: {
        context: canvasContext,
        clearCanvas: true
      }
    });

wxml

<canvas class="test-canvas" id="test-canvas" canvas-id="test-canvas"></canvas> //canvas-id 对应 wx.createCanvasContext('canvas-id');

2、接口引入动画，可能会导致加载过慢问题
请求接口返回为json文件格式，完成请求后调用渲染动画

wx.request({
        method: 'get',
        url: app.data.public + 'json/maomao.json',
        success: res => {
          console.log(res)
          if (res.statusCode == 200) {
            wx.hideLoading()
            _this.panda1(res.data)
          }
        }
      })

 panda1(datas,states){
    let widths = 800 / 750 * wx.getSystemInfoSync().windowWidth
    let heights = 800 / 750 * wx.getSystemInfoSync().windowWidth
    const canvasContext = wx.createCanvasContext('test-canvas');
    const animationData = datas;
    const animationPath = '';
    canvasContext.canvas = {
      width: widths,
      height: heights
    };
    // 如果同时指定 animationData 和 path， 优先取 animationData
    pangeAnim = lottie.loadAnimation({
      renderer: 'canvas', // 只支持canvas
      loop: true,
      autoplay: states,
      animationData: animationData,
      path: animationPath,
      rendererSettings: {
        context: canvasContext,
        clearCanvas: true
      }
    });
  },