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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐