This page is translated by Google Cloud Translation API

Switch to Chinese

animation-view

Lottie animation components, animation resource reference Lottie official link.

The animation-view component is uts component, you need to download the plugin: [animation-view](https://ext.dcloud. net.cn/plugin?name=uni-animation-view), only App side nvue page supports

uts component requires HBuilderX 3.7.0+

Custom Playground is required to run the App on the real machine

Platform Difference Description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	x	x	x	√	x	x	x	x	x	x

• animation-view 在App端集成的是lottie官方原生sdk，仅nvue页面支持，vue页面不支持。vue页面可使用webview、或renderjs集成lottie的h5版、或使用下方的微信小程序方案。
• App端实现使用了Lottie官方SDK，开源项目：Lottie for Android，Lottie for iOS
  • App-Android平台要求Android5（API Leavel 21）及以上系统
  • App-iOS平台要求iOS11及以上版本系统
• 微信小程序没有内置该组件，需使用开源项目https://github.com/wechat-miniprogram/lottie-miniprogram
• 百度小程序已经由百度官方内置了animation-view，底层基于lottie sdk实现。
• 微信、百度之外的其他小程序，可考虑webview加载lottie的h5版，或评估上面的lottie-miniprogram是否兼容。

Attribute Description

Property Name	Type	Default Value	Description
path	String		animation resource address, support local path and network path
loop	Boolean	false	Whether the animation is played in a loop
autoplay	Boolean	true	Whether the animation is played automatically
action	String	play	animation operation, possible values are play, pause, stop
hidden	Boolean	true	whether to hide the animation
@bindended	EventHandle		The ended event is triggered when the playback reaches the end (the callback will be triggered when the natural playback ends, and the end of the loop playback and manual stop animation will not be triggered)

注意

• The path attribute of the Baidu MiniApp platform currently does not support remote addresses, only local absolute paths, Details

code example

<template>
	<view>
		<animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
			:hidden="hidden" @bindended="lottieEnd">
		</animation-view>
		<button @click="playLottie" type="primary">{{status}}lottie动画</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: '/uni_modules/uni-animation-view/static/lottie.json',
				loop: false,
				autoplay: true,
				action: 'stop',
				hidden: false,
				status: '播放'
			}
		},
		methods: {
			playLottie() {
				this.action = ('play' !== this.action) ? 'play' : 'pause';
				this.status = ('pause' === this.action) ? '播放' : '暂停';
			},
			lottieEnd() {
				this.status = '播放';
				this.action = 'stop';
				console.log('动画播放结束');
			}
		}
	}
</script>

<style>
	.animation {
		width: 750rpx;
		height: 300rpx;
		background-color: #FF0000;
		margin-bottom: 20px;
	}
</style>