微信小程序怎么使用JSON动画？
前言：
在微信小程序中实现动画有很多种方式，今天主要讲JSON动画
css3动画jsAPI动画- 使用
PAG素材做动画 - 使用
GIF播放动画 - 使用
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()
},
这样就大功告成了。
)
)
