uni-app库lottie-miniapp使用方法

1.Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

现在使用各平台的 native 代码实现一套复杂的动画是一件很困难并且耗时的事，我们需要为不同尺寸的屏幕加载不同的素材资源，还需要写大量难维护的代码，而Lottie可以做到同一个动画文件在不同平台上实现相同的效果，极大减少开发时间，实现不同的动画，只需要设置不同的动画文件即可，极大减少开发和维护成本。

2.需求，在小程序环境下运行lottie ,找了很久找到这个库lottie-miniapp

注意！！！！！！！！！！！

微信小程序现在不支持js渲染动画，所以使用小程序开发的工程师们可以放弃这个方案了

上代码

html

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

js

import * as animationData from './assets/0001_data.json';
export default {
		data(){
			return{
				ani:undefined
			}
		},
		onLoad() {
			const query = wx.createSelectorQuery();
			//  请求到的lottie json数据
			// const animationData = {};
			// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
			const animationPath = "https://xxxxxxx/source/product/images/0001_data.json";
			query
			  .select("#myCanvas")
			  .fields({ node: true, size: true })
			  .exec((res) => {
				const canvas = res[0].node;
				const ctx = canvas.getContext("2d");
		
				const dpr = wx.getSystemInfoSync().pixelRatio;
				canvas.width = res[0].width * dpr;
				canvas.height = res[0].height * dpr;
				ctx.scale(dpr, dpr);
				
				lottie.loadAnimation({
				  renderer: "canvas", // 只支持canvas
				  loop: true,
				  autoplay: true,
				  animationData: animationData,
				  path: animationPath,
				  rendererSettings: {
					canvas: canvas,
					context: ctx,
					clearCanvas: true,
				  },
				});
			});
		},

css

canvas{
			position: absolute;
			z-index: 9;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
		}