微信小程序中如何实现音频录制时波纹循环动画效果？

本文共计1014个文字，预计阅读时间需要5分钟。

原文：本文实例为大家分享了微信小程序音视频录制波纹循环动画的整体代码，供大家参考，具体内容如下：实现的效应+第一种方法+（利用微信小程序的animation）+wxml部分+!--pages/myRecode/myRecode.wxml--

本文实例介绍微信小程序中音视频录制波纹循环动画的完整代码，包括实现效果、方法（借助微信小程序动画功能）及WXML代码片段。详情请见：!--pages/myRecode/myRecode.wxml--

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

实现的效果

第一种方法(利用微信小程序的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部分

/* 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.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部分

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。