微信小程序怎么使用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节点

  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()
  },
  

  这样就大功告成了。