index.vue 1.6 KB
Newer Older
DCloud-yyl's avatar
DCloud-yyl 已提交
1
<template>
Y
yurj26 已提交
2 3 4 5 6 7 8 9
	<div>
		<animation-view-h5 class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
			:hidden="hidden" @bindended="lottieEnd">
		</animation-view-h5>
		<button @click="playLottie" type="primary">{{status}}lottie动画</button>
		<button @click="changeLottie" type="primary">切换{{location}}动画</button>
		<button @click="changeLottieDisplay" type="primary">{{display}}动画</button>
	</div>
DCloud-yyl's avatar
DCloud-yyl 已提交
10 11 12 13 14 15
</template>

<script>
	export default {
		data() {
			return {
Y
yurj26 已提交
16 17 18 19 20 21 22 23
				path: '/uni_modules/uni-animation-view/static/lottie.json',
				loop: false,
				autoplay: false,
				action: 'stop',
				hidden: false,
				status: '播放',
				location: '网络',
				display: '隐藏'
DCloud-yyl's avatar
DCloud-yyl 已提交
24 25 26
			}
		},
		methods: {
Y
yurj26 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
			playLottie() {
				this.action = ('play' !== this.action) ? 'play' : 'pause';
				this.status = ('pause' === this.action) ? '播放' : '暂停';
			},
			changeLottie() {
				this.action = 'stop';
				this.status = '播放';
				this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' : '/uni_modules/uni-animation-view/static/lottie.json';
				this.location = ('网络' === this.location) ? '本地' : '网络';
				console.log('path='+this.path);
			},
			changeLottieDisplay() {
				this.hidden = !this.hidden;
				this.display = this.hidden ? '显示' : '隐藏';
			},
			lottieEnd() {
				this.status = '播放';
				this.action = 'stop';
				console.log('动画播放结束');
			}
DCloud-yyl's avatar
DCloud-yyl 已提交
47 48 49 50 51
		}
	}
</script>

<style>
Y
yurj26 已提交
52 53 54 55 56
	.animation {
		width: 750rpx;
		height: 300rpx;
		background-color: #CCCCCC;
		margin-bottom: 20px;
DCloud-yyl's avatar
DCloud-yyl 已提交
57 58
	}
</style>