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

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

前言:

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

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

准备工作

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

详细代码

1. 下载插件

lottie-miniprogram官网

rust 复制代码
npm install --save lottie-miniprogram

2. 创建canvas节点

html 复制代码
<canvas id="canvas" type="2d" ></canvas>

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

javascript 复制代码
	import lottie from 'lottie-miniprogram'
javascript 复制代码
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()
},

这样就大功告成了。

相关推荐
汤姆yu3 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
一渊之隔13 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun17 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1212 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩3 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉3 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序