微信小程序音频录制波纹循环动画，如何实现长尾词效果？

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

本文分享了一个微信小程序的实例，主要内容为录制语音波浪纹循环动画的整体代码。以下是大致内容：

- 实现效果：通过微信小程序录制语音，并生成波浪纹循环动画。- 参考资料及整体内容：包括实现效果、具体方法（利用微信小程序的animation）、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)   } }

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