LottieFiles官网:https://lottiefiles.com/

uni-app中LottieFiles插件:https://ext.dcloud.net.cn/plugin?id=1044

微信小程序中的LottieFiles的插件lottie-miniprogram:https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html

1、安装

按照微信小程序中的方法安装

npm install --save lottie-miniprogram

2、代码:

<template>
	<view>
		<canvas id="canvas" type="2d" style="width: 100px; height: 100px;"></canvas>
	</view>
</template>

<script>
	import lottie from 'lottie-miniprogram'
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
            // 主要差异点:
			// 微信中使用的是wx.createSelectorQuery()
            // uni-app中使用的是uni.createSelectorQuery()

			uni.createSelectorQuery().select('#canvas').node(res => {
		      const canvas = res.node
			  const context = canvas.getContext('2d')
		      lottie.setup(canvas)
			 lottie.loadAnimation({
				rendererSettings: {
				    context,
				},
			  	loop: true,
			  	autoplay: true,
				animationData:require('../../common/dataSVG.json')
			  	// path: 'https://xxxx/dataSVG.json'
			  })
		    }).exec()
		}
	}
</script>

animationData支持本地资源

path (只支持网络地址)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐