【uniapp笔记】animation实现多组动画变gif效果（动画切换闪烁）

【uniapp】animation实现多组动画变gif效果（动画切换闪烁）

<view class="wrap">
	<image class="img1" src="@/static/1.png" mode=""></image>
	<image class="img2" src="@/static/2.png" mode=""></image>
	<image class="img3" src="@/static/3.png" mode=""></image>
	<image class="img4" src="@/static/4.png" mode=""></image>
</view>

.wrap{
	position: relative;	
	height: 300rpx;
	width: 400rpx;
	.img1,
	.img2,
	.img3,
	.im4{
		opacity: 0;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		height: 100%;
		width: 100%;
		animation-name: donghua; /*绑定到keyframe的名称*/
		animation-timing-function: ease-in-out;/*规定动画的速度曲线*/
		animation-iteration-count: infinite;/*规定动画应该播放的次数*/
		animation-duration: 1s;/*动画所花费的时间*/
		animation-direction: alternate;/*是否应该轮流反向播放动画*/
	}
	.img1{
		opacity: 1;
		animation-name: donghua;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-duration: 1s;
		animation-direction: alternate;
	}
	
	}
	// 声明动画
	@keyframes donghua{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}

animation属性
语法：

animation: name duration timing-function delay iteration-count direction;
所以上面的可以简写成：animation:donghua 1s ease-in-out infinite alternate;

参数值如下：

值	描述
animation-name:	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画。

animation-name

规定需要绑定到选择器的 keyframe 名称

animation-duration

规定完成动画所花费的时间，以秒或毫秒计[must设定，没有填写则默认没有动画效果]

animation-timing-function

规定动画的速度曲线

animation-delay

规定在动画开始之前的延迟

animation-iteration-count

定义动画的播放次数。

animation-direction

是否应该轮流反向播放动画