手机网站建立/广告公司接单软件

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， 优先取 animationDatapangeAnim = lottie.loadAnimation({renderer: 'canvas', // 只支持canvasloop: 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().windowWidthlet heights = 800 / 750 * wx.getSystemInfoSync().windowWidthconst canvasContext = wx.createCanvasContext('test-canvas');const animationData = datas;const animationPath = '';canvasContext.canvas = {width: widths,height: heights};// 如果同时指定 animationData 和 path， 优先取 animationDatapangeAnim = lottie.loadAnimation({renderer: 'canvas', // 只支持canvasloop: true,autoplay: states,animationData: animationData,path: animationPath,rendererSettings: {context: canvasContext,clearCanvas: true}});},

暂停 lottie-miniapp 动画

因为canvas的层级为最高级，如果在有lottie-miniapp动画的基础上加了自定义弹窗，在真机上运行就会出现动画浮动在弹窗之上的效果，这里提供一个可用的思路，如果是立即出现，没有transition效果的弹出层，可以将动画暂停，再隐藏原本canvas层，关闭时打开canvas层即可

如果是有transition效果的弹出层，可用以下方式，先将动画暂停，再将canvas转为图片，在弹出层效果渐变时，看到的就是动画已暂停，却依旧显示的状态

pangeAnim.pause()
//以上暂停
//以下为转为图片wx.canvasToTempFilePath({x: 0,y: 0,width: 260,height: 180,canvasId: 'test-canvas',success: function (res) {暂停成功处理时间},fail:err=>{console.log(err)}})

取消动画暂停：pangeAnim.play()

over，如果实在不行，可以建议ui使用雪碧图动画，你将使用背景定位或者图片定位的方法