微信小程序怎么使用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()
},

这样就大功告成了。

相关推荐
半生过往8 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw8 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者13 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮14 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero21 小时前
UniappDay03
vue.js·微信小程序·uni-app
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
The_era_achievs_hero2 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
黑马源码库miui520863 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
郭邯4 天前
小程序视图层学习笔记
微信小程序
拾光拾趣录4 天前
小程序双线程架构:为什么需要两个线程才能跳舞?
前端·微信小程序