<template>
	<view>
		<gal-animate-bg>
			<view class="banner-title-main">
				<view style="padding:150rpx 0;">
					<gal-css-animate 
					:animateName="animateName" 
					:duration="animateDuration" 
					timingFunction="ease-in" 
					@onMounted="onMounted" 
					:autoPlay="false" 
					fillMode="forwards" 
					ref="galcssanimate">
						<text class="gal-h3 gal-block-text gal-text-center gal-color-white">{{animateContent}}</text>
					</gal-css-animate>
				</view>
			</view>
		</gal-animate-bg>
		
		<view class="gal-body gal-margin-top">
			<view style="height:50rpx;"></view>
			<view 
			class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center" 
			hover-class="gal-tap">
				<text class="gal-color-gray gal-text gal-icons" 
				@tap="replay">&#xe635; 重新播放动画</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			animateName     : 'bounce',
			animateContent  : 'www.GraceUI.com',
			animateDuration : '1s',
			
			// 进行连贯播放的动画数组
			animations      : [
				{name:'bounceInRight', duration:'2s', timer:3000, content:'www.GraceUI.com'},
				{name:'fadeIn',  duration:'2s', timer:3000, content:'基于 uni-app 的优秀前端框架'},
				{name:'flipInY',  duration:'2s', timer:3000, content:'Grace Animation Library'},
				{name:'wobble',  duration:'2s', timer:3000, content:'基于 uni-app 的动画框架'}
			],
			
			// 动画是否正在播放
			playing : false
		}
	},
	methods: {
		onMounted : function () {
			console.log('动画组件已经准备好...');
			this.play(0);
		},
		play : function (index) {
			if(index >= this.animations.length){
				this.playing = false;
				return ;
			}
			this.playing         = true;
			this.animateContent  = '';
			this.animateName     = this.animations[index].name;
			this.animateContent  = this.animations[index].content;
			this.animateDuration = this.animations[index].duration;
			this.$refs.galcssanimate.play();
			setTimeout(()=>{
				this.play(index+1);
			}, this.animations[index].timer)
		},
		replay : function () {
			if(this.playing){
				uni.showToast({
					title:'动画正在播放',
					icon:"none"
				});
				return ;
			}
			this.play(0);
		}
	}
}
</script>
<style>
</style>