uniapp动画

效果图

代码：

<template>
	<view>
		<view class="circle" :animation="animationData" @click="turn" >
			{{tips}}
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData: {},
				timer:'',
				flag:true,
				able:true,
				tips:'点我暂停'
			}
		},
		onReady() {
			let _this=this;
			clearInterval(_this.timer);
				_this.timer=setInterval(function(){
				_this.breatheLight()
				_this.flag=!_this.flag;	
				// console.log("定时到了")
				clearInterval(_this.timer);
					_this.timer=setInterval(function(){
					_this.breatheLight()
					_this.flag=!_this.flag;	
					// console.log("定时到了1")
				 }.bind(_this),2500)		
			}.bind(_this),200)
		},
		methods: {
			turn(){
				if(this.able){
					clearInterval(this.timer);
					this.tips='点我继续';
				}else{
					this.tips='点我暂停';
					let _this=this;
					clearInterval(_this.timer);
					_this.timer=setInterval(function(){
					_this.breatheLight()
					_this.flag=!_this.flag;	
					// console.log("定时到了")
					clearInterval(_this.timer);
						_this.timer=setInterval(function(){
						_this.breatheLight()
						_this.flag=!_this.flag;	
						// console.log("定时到了1")
					 }.bind(_this),2500)		
					}.bind(_this),200)	
				}
				this.able=!this.able;
			},
			breatheLight(){
				//呼吸灯
				var animation = uni.createAnimation({
				     duration: 2500,
				    timingFunction: 'ease-in-out'
				   })
				
				if(this.flag){
					animation.scale(0.8,0.8).step()
					this.animationData = animation.export()
				}else{
					animation.scale(1,1).step()
					this.animationData = animation.export()
				
				}
					
			},
		}
	}
</script>

<style>
.circle{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: #aa55ff;
	margin: 0 auto;
	text-align: center;
	line-height: 300px;
	font-size: 30px;
}
</style>