UNIAPP点击动画 animation 点击动效

UNIAPP点击动画 animation

例子

	<view :animation="animationData" style="background:red;height:10rpx;width:100rpx" >内容</view>
	<button @click="rotateAndScale()" style="z-index: 999;">点我</button>

		export default{
	 data: {
	 animationData: {}
	  },
	  
	  onShow: function(){
		var animation = uni.createAnimation({
  		duration: 1000,
   		 timingFunction: 'ease',
})

this.animation = animation

animation.scale(2,2).rotate(45).step()

this.animationData = animation.export()

setTimeout(function() {
 		 animation.translate(30).step()
  		this.animationData = animation.export()
}.bind(this), 1000)
  },
 methods:{
		rotateAndScale: function () {
		  // 旋转同时放大
 		 this.animation.rotate(45).scale(2, 2).step()
  		this.animationData = this.animation.export()
},
rotateThenScale: function () {
  		// 先旋转后放大
 		 this.animation.rotate(45).step()
  		this.animation.scale(2, 2).step()
 		 this.animationData = this.animation.export()
},
rotateAndScaleThenTranslate: function () {
  // 先旋转同时放大，然后平移
 		 this.animation.rotate(45).scale(2, 2).step()
 		 this.animation.translate(100, 100).step({ duration: 1000 })
 		 this.animationData = this.animation.export()
}

}
}

注意:anumationData: {}, 放进return里