微信小程序怎么使用JSON动画？

微信小程序怎么使用JSON动画？

前言：

在微信小程序中实现动画有很多种方式，今天主要讲JSON动画

1. css3动画
2. jsAPI动画
3. 使用PAG素材做动画
4. 使用GIF播放动画
5. 使用JSON文件做动画

准备工作

• JSON动画素材
• 下载lottie-miniprogram插件
• 创建微信小程序的canvas

详细代码

1. 下载插件

lottie-miniprogram官网

npm install --save lottie-miniprogram

2. 创建canvas节点

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

3. 导入节点并初始化JSON动画

	import lottie from 'lottie-miniprogram'

onReady() {
	this.createSelectorQuery().select('#canvas').node(res => {
		const canvas = res.node
		const context = canvas.getContext('2d')
		canvas.width = 300
		canvas.height = 300
		lottie.setup(canvas)

		lottie.loadAnimation({
			loop: true,
			autoplay: true,
			path: "你的.json", // 替换你的json文件
			rendererSettings: {
				context,
			},
		})
	}).exec()
},

这样就大功告成了。