微信小程序音频录制波纹循环动画微信小程序音频录制波纹循环

本文实例为大家分享了微信小程序音频录制波纹循环动画的具体代码，供大家参考，具体内容如下
实现的效果

文章图片

第一种方法(利用微信小程序的animation)
wxml部分

长按

wxss部分

/* pages/myRecode/myRecode.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.jsPage({/*** 页面的初始数据*/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.jsPage({/*** 页面的初始数据*/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部分

/* pages/myRecode/myRecode.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)}}

【微信小程序音频录制波纹循环动画】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。