微信小程序录音时麦克风动画效果示例

前言

这个简单的麦克风演示的想法来自于《自己说》中的录音效果，实现起来并不难，但是在小程序中使用简单的动画确实很实用。

影响

我们先来看一个演示。gif帧数比较少，实际效果和真机测试的流畅度还是很OK的

思路

使用setTimeout和this.sedData更改图像中的src路径以生成动画。动画的播放和隐藏是通过将用户定义的参数与wx:if绑定来控制的。我们直接编码吧。

密码

超文本标记语言

view class=' animation-talk ' image src='././image/receive{{receiveImg}}。png' wx:if='{{showTalk}} '模式=' aspectFill '/image/view view image src='././image/voice { { voice num } }-BTN . png ' bindlonpress=' long press ' bind touch end=' end touch '/image/view JavaScript

Var playTalk //录制动画定时器页面({data: {showtalk: false，//显示录制动画receiveimg3360 3，//按下并播放语音动画voiceNum: 2，//按下录制效果图config : app . global data . API URL，//演示界面}，//长按读取语音longPress() {var即=thisthat.setData({ voiceNum: 1，showtalk : true })；that . animationtalk()；var URL=that . data . config；wx . startrecord({ success(RES){ const tempfile path=RES . tempfile path；//文件wx.savefile录制成功后({tempfilepath: tempfilepath，//将文件保存到本地并生成临时路径成功(res) {wx.uploadFile({ //将语音文件上传到服务器url: url，文件路径： res.savedFilePath，名称： 'file '，formdata : { token : that . data . token，名称： 'file' }，Success (res) {that。setdata ({voiceurl:json。解析(res. data)。file _ URL})的。receive page()//检查语音准确性，这一步还没有贴出}})}}}))，//播放录音动画动画talk()。if(！that . data . show talk){ that . setdata({ receiveimg : 1 })；clear time out(playTalk)} else { switch(that . data . receiveimg){ case 1: that . setdata({ receiveimg : 2 })break case 2: that . setdata({ receiveimg : 1 })break } setTimeout(function(){ that。动画talk ()}，500)}}，//录制结束endTouch() {var即=thiswx . stop record()；That.setdata ({voicenum : 2，showtalk : false，})}，})写在后面

通过这个. setData制作动画事件只适合项目中简单的动画效果。如果你想完成其他动画效果，比如我们胡建中秋蛋糕的动画，就需要在css3中使用更强大的动画效果，小程序是支持的。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。