微信小程序怎么使用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.nodeconst context = canvas.getContext('2d')canvas.width = 300canvas.height = 300lottie.setup(canvas)lottie.loadAnimation({loop: true,autoplay: true,path: "你的.json", // 替换你的json文件rendererSettings: {context,},})}).exec()
},

这样就大功告成了。