微信小程序音频录制波纹循环动画
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序音频录制波纹循环动画的具体代码，供大家参考，具体内容如下
实现的效果
第一种方法(利用微信小程序的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)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
