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里

Logo

分享最新的 NVIDIA AI Software 资源以及活动/会议信息,精选收录AI相关技术内容,欢迎大家加入社区并参与讨论。

更多推荐