您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序怎么實(shí)現(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
前言
這個(gè)簡單的麥克風(fēng)demo的創(chuàng)意是來源于“包你說”中的錄音效果,實(shí)現(xiàn)的方式其實(shí)也并不難,但對于小程序中的簡易動(dòng)畫的使用的確很實(shí)用。
效果
先來看個(gè)demo,gif幀數(shù)比較低,實(shí)際效果和真機(jī)測試的流暢性還是很OK的
思路
通過setTimeout配合this.sedData來改變image中的src路徑來生成動(dòng)畫。動(dòng)畫的播放以及隱藏則通過wx:if綁定一個(gè)自定義的參數(shù)來控制。下面就直接上代碼。
代碼
html
<view class='animation-talk'> <image src='../../image/receive{{receiveImg}}.png' wx:if="{{showTalk}}" mode='aspectFill'></image> </view> <view> <image src='../../image/voice{{voiceNum}}-btn.png' bindlongpress="longPress" bindtouchend="endTouch" ></image> </view>
javascript
var playTalk //錄音動(dòng)畫定時(shí)器 Page({ data:{ showTalk: false, //顯示錄音動(dòng)畫 receiveImg: 3, //按壓播放語音動(dòng)畫 voiceNum: 2, //按壓錄音時(shí)效果圖 config: app.globalData.apiUrl,//demo接口 }, //長按讀語音 longPress() { var that = this; that.setData({ voiceNum: 1, showTalk: true }); that.animationTalk(); var url = that.data.config; wx.startRecord({ success(res) { const tempFilePath = res.tempFilePath; //錄音成功后的文件 wx.saveFile({ tempFilePath: tempFilePath, //保存文件到本地并生成臨時(shí)路徑 success(res) { wx.uploadFile({ //上傳語音文件到服務(wù)器 url: url, filePath: res.savedFilePath, name: 'file', formData: { token: that.data.token, name: 'file' }, success(res) { that.setData({ voiceUrl: JSON.parse(res.data).file_url }) that.receivePage() //校驗(yàn)語音正確率,此步驟未貼出 } }) } }) } }) }, // 播放錄音動(dòng)畫 animationTalk() { var that = this; if (!that.data.showTalk) { that.setData({ receiveImg: 1 }); clearTimeout(playTalk) } else { switch (that.data.receiveImg) { case 1: that.setData({ receiveImg: 2 }) break case 2: that.setData({ receiveImg: 3 }) break case 3: that.setData({ receiveImg: 1 }) break } setTimeout(function () { that.animationTalk() }, 500) } }, // 錄音結(jié)束 endTouch() { var that = this; wx.stopRecord(); that.setData({ voiceNum: 2, showTalk: false, }) }, })
寫在之后
通過this.setData來制造動(dòng)畫事件僅僅適合項(xiàng)目中的簡單動(dòng)畫效果,如若要完成其他動(dòng)畫特效,如我們胡建的中秋博餅的動(dòng)畫,則需要使用更為強(qiáng)大的css3中的動(dòng)畫效果,這一點(diǎn)小程序的支持也是十分給力的。
看完了這篇文章,相信你對“微信小程序怎么實(shí)現(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。