animation动画

animation动画的用法

<style>
	div{
		width:100px;
		height:100px;
		position:relative;
		animation-name:myAnimation;
		animation-duration:5s;
		animation-timing-function:linear;
		animation-delay:1s;
	}
	@keyframes myAnimation{
		0% {
				background-color:red;
				left:0;
			}
		25% {
				background-color:pink;
				left:50px;
			}
		50% {
				background-color:pink;
				left:100px;
			}
		100% {
				background-color:red;
				left:0;
			}
	}
</style>

animation: function () {
	let that = this;
	let animation = wx.createAnimation({
		duration:5000,
		timing-function:"ease-in-out"
	})
	animation.rotate(360 * 5).step()
	that.setDate({
		animationDate:animation.export()
	)}
}

<view animation = "{{animationDate}}"> </view>