# animation-view

Lottie animation components, animation resource reference Lottie official link.

animation-view组件是uts组件,需下载插件:animation-view,仅app平台 nvue/uvue 页面支持

uts component requires HBuilderX 3.7.0+

app平台真机运行需要打自定义基座

Platform Difference Description

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快应用 360小程序 快手小程序 京东小程序
x x x x x x x x x
  • animation-view 在app平台集成的是lottie官方原生sdk,仅nvue/uvue页面支持,vue页面不支持。vue页面可使用webview、或renderjs集成lottie的h5版、或使用下方的微信小程序方案。
  • app平台实现使用了Lottie官方SDK,开源项目:Lottie for AndroidLottie 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>
On This Page