本文实例为大家分享了微信小程序音频录制波纹循环动画的具体代码，供大家参考，具体内容如下
实现的效果
第一种方法(利用微信小程序的animation)
wxml部分
<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
<view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
<text>长按</text>
<view class="ripple"></view>
<view class="ripple" animation="{{animationData1}}"></view>
<view class="ripple" animation="{{animationData2}}"></view>
</view>
</view>wxss部分
.myRecode{
padding-top:500rpx;
text-align: center;
box-sizing: border-box;
}
.myRecode .recode{
display: inline-block;
width:200rpx;
height:200rpx;
background: #EBB128;
border-radius: 50%;
text-align: center;
color:#fff;
line-height: 200rpx;
position: relative;
}
.ripple{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
border:2px solid #F6F1CC;
}js 部分
// pages/myRecode/myRecode.js
Page({
data: {
animationData1: "",
animationData2: "",
animationStatus: false
},
onLoad: function(options) {
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
//事件函数
animationFun:function(animationData){
if(!this.data.animationStatus){
return
}
var animation = wx.createAnimation({
duration: 1000
})
animation.opacity(0).scale(2, 2).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
animationEnd: function (animationData) {
var animation = wx.createAnimation({
duration: 0
})
animation.opacity(1).scale(1, 1).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
recodeEnd: function() {
//动画1结束
var animation1 = wx.createAnimation({
duration: 0
})
animation1.opacity(1).scale(1, 1).step();
//动画2结束
var animation2 = wx.createAnimation({
duration: 0
})
animation2.opacity(1).scale(1, 1).step();
this.setData({
animationData1: animation1.export(),
animationData2: animation2.export(),
animationStatus: false
})
},
recodeClick: function() {
this.setData({
animationStatus: true
})
this.animationFun('animationData1')
setTimeout(()=>{
this.animationFun('animationData2')
},500)
setTimeout(() => {
this.animationRest()
}, 1000)
},
animationRest: function() {
//动画重置
this.animationEnd('animationData1')
setTimeout(()=>{
this.animationEnd('animationData2')
},500)
setTimeout(() => {
if (this.data.animationStatus) {
this.recodeClick()
}
}, 100)
}
})第二种方法（纯wxss控制）
wxml
<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
<view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
<text>长按</text>
<view class="ripple"></view>
<view class="ripple {{animationStatus?'rippleAnimation1':''}}"></view>
<view class="ripple {{animationStatus?'rippleAnimation2':''}}"></view>
<view class="ripple {{animationStatus?'rippleAnimation3':''}}"></view>
</view>
</view>js
// pages/myRecode/myRecode.js
Page({
data: {
animationStatus: false
},
onLoad: function(options) {
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
recodeEnd: function() {
this.setData({
animationStatus:false
})
},
recodeClick: function() {
this.setData({
animationStatus: true
})
}
})wxss部分
.myRecode{
padding-top:500rpx;
text-align: center;
box-sizing: border-box;
}
.myRecode .recode{
display: inline-block;
width:200rpx;
height:200rpx;
background: #EBB128;
border-radius: 50%;
text-align: center;
color:#fff;
line-height: 200rpx;
position: relative;
}
.ripple{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
border:2px solid #F6F1CC;
}
.rippleAnimation1{
animation: ripple 1s infinite linear;
}
.rippleAnimation2{
animation: ripple 1s infinite linear;
animation-delay:0.3s;
}
.rippleAnimation3{
animation: ripple 1s infinite linear;
animation-delay:0.6s;
}
@keyframes ripple{
from{
opacity: 1;
transform: scale(1,1)
}
to{
opacity: 0;
transform: scale(2,2)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
