小程序-語音播放動畫-animation

效果圖：

三張圖片分別：白底看不到-就用黑色代替，是反方向但效果一樣

• 1
  
• 2
  
• 3
  

<view class="animat-audiobox {{msg.senderId==receiverId ? 'other' : 'me'}}">                
	<view class='animat-audio voice_view' bindtap='playTap' data-id='{{msg.id}}' data-time="{{msg.time}}" data-url="{{msg.body}}" style="width:{{msg.time*20}}rpx;">                    
		<!--沒有播放時圖片爲 audio3.png-->                    
		<image src="/pages/images/index/item/{{msg.senderId==receiverId?'record-b-3':'record-w-3'}}.png" class="record_img img {{playId==index?'hide':'show'}}"></image>                    
		<!--播放時圖片爲 audio3.png-->                    
		<view class="{{playId==index? 'show':'hide'}}">                        
			<image class="img animate_img" wx:if="{{playing==1}}" src="/pages/images/index/item/{{msg.senderId==receiverId?'record-b-1':'record-w-1'}}.png"></image>                        
			<image class="img animate_img" wx:if="{{playing==2}}" src="/pages/images/index/item/{{msg.senderId==receiverId?'record-b-2':'record-w-2'}}.png"></image>                        
			<image class="img animate_img" wx:if="{{playing==3}}" src="/pages/images/index/item/{{msg.senderId==receiverId?'record-b-3':'record-w-3'}}.png"></image>                    
		</view>                    
		<text class="time_voice">{{msg.time}}"</text>                                        	</view>            
</view>

.animat-audiobox{  
	position:relative;  
	width:100%; 
	height: 76rpx;   
	padding: 20rpx 0;
}
.animat-audio {  
	width: 100rpx;  
	height: 76rpx;  
	line-height: 76rpx;  
	position:absolute;  
	top: 20rpx;  
	z-index:99;  
	background: #fff;  
}
.me .animat-audio {  
	right: 40rpx;  
	border-radius: 16rpx 0 16rpx 16rpx;
}
.other .animat-audio {  
	left: 40rpx;  
	border-radius: 0 16rpx 16rpx 16rpx;
}
.img {  
	width:36rpx;  
	height:36rpx;  
	position:absolute;    
	top: 50%;  
	transform: translateY(-50%);  
	z-index:99999;
}
.me .img {  right: 40rpx;}
.other .img {  left: 40rpx;}
.time_voice {  
	font-size: 24rpx;  
	margin-left: 4px;  
	position: absolute;    
	top: 50%;  
	transform: translateY(-50%);
}
.me .time_voice {  right: 80rpx;}
.other .time_voice {  left: 80rpx;}

paly(){
	let that = this;
	let dataset = e.currentTarget.dataset; 
	let j=0,count=0;        
	that.data.timer = setInterval(function () {          
		let time = +dataset.time*2          
		if(time > count) {            
			j = j % 3; j++;count++;            
			that.setData({ playId: dataset.id,playing: j})          
		} else {                     
			clearInterval(that.data.timer); //停止幀動畫循環  
			that.setData({playId: -1,playing: 0})          
		}        
	}, 500)
}