<template>
	<view>
		<gal-animate-bg>
			<view class="banner-title-main">
				<view style="padding:150rpx 0;">
					<gal-api-animate 
					@onMounted="onMounted" 
					ref="apiAnimateDemo">
						<text class="gal-h5 gal-block-text gal-text-center gal-color-white">www.GraceUI.com </text>
					</gal-api-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">
				<gal-api-animate
				@onMounted="onMounted2" 
				ref="buttonRef">
					<text class="gal-color-gray gal-text gal-icons" 
					@tap="playMore">点击这里播放动画序列</text>
				</gal-api-animate>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			interValId : null
		}
	},
	methods: {
		onMounted : function () {
			console.log('动画组件已经准备好...');
			this.$refs.apiAnimateDemo.setData({duration:1000, timingFunction: 'ease'});
			this.$refs.apiAnimateDemo.animation.scale(1.5,1.5).step();
			this.$refs.apiAnimateDemo.play();
		},
		playMore : function () {
			// 01. 旋转 180
			this.$refs.apiAnimateDemo.animation.rotate(180).step();
			this.$refs.apiAnimateDemo.play();
			setTimeout(()=>{
				// 02. 再旋转 180
				this.$refs.apiAnimateDemo.animation.rotate(360).step();
				this.$refs.apiAnimateDemo.play();
			}, 600);
			
			// 透明度变化
			setTimeout(()=>{
				// 03. 透明度 0
				this.$refs.apiAnimateDemo.animation.opacity(0).step();
				this.$refs.apiAnimateDemo.play();
			}, 1200);
			
			setTimeout(()=>{
				// 03. 透明度 0
				this.$refs.apiAnimateDemo.animation.opacity(1).step();
				this.$refs.apiAnimateDemo.play();
			}, 1800);
		},
		
		onMounted2 : function(){
			// 循环执行按钮闪烁动画
			this.interValId = setInterval(()=>{
				this.$refs.buttonRef.setData({duration:300, timingFunction: 'ease'});
				this.$refs.buttonRef.animation.opacity(0).scale(0.8, 0.8).step();
				this.$refs.buttonRef.play();
				setTimeout(()=>{
					this.$refs.buttonRef.animation.opacity(1).scale(1, 1).step();
					this.$refs.buttonRef.play();
				},300);
			},2000);
		}
	},
	// 页面卸载时注销循环动画
	onUnload:function(){
		console.log('onUnload');
		clearInterval(this.interValId);
	}
}
</script>
<style>
	
</style>