android麦克风监听动画效果,微信小程序实现录音时的麦克风动画效果实例
前言
這個簡單的麥克風demo的創意是來源于“包你說”中的錄音效果，實現的方式其實也并不難，但對于小程序中的簡易動畫的使用的確很實用。
效果
先來看個demo，gif幀數比較低，實際效果和真機測試的流暢性還是很OK的
思路
通過setTimeout配合this.sedData來改變image中的src路徑來生成動畫。動畫的播放以及隱藏則通過wx:if綁定一個自定義的參數來控制。下面就直接上代碼。
代碼
html
javascript
var playTalk //錄音動畫定時器
Page({
data:{
showTalk: false, //顯示錄音動畫
receiveImg: 3, //按壓播放語音動畫
voiceNum: 2, //按壓錄音時效果圖
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, //保存文件到本地并生成臨時路徑
success(res) {
wx.uploadFile({ //上傳語音文件到服務器
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() //校驗語音正確率，此步驟未貼出
}
})
}
})
}
})
},
// 播放錄音動畫
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)
}
},
// 錄音結束
endTouch() {
var that = this;
wx.stopRecord();
that.setData({
voiceNum: 2,
showTalk: false,
})
},
})
寫在之后
通過this.setData來制造動畫事件僅僅適合項目中的簡單動畫效果，如若要完成其他動畫特效，如我們胡建的中秋博餅的動畫，則需要使用更為強大的css3中的動畫效果，這一點小程序的支持也是十分給力的。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對我們的支持。
時間： 2019-05-16
總結
以上是生活随笔為你收集整理的android麦克风监听动画效果,微信小程序实现录音时的麦克风动画效果实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： int true python_pyth
- 下一篇： 【ES6(2015)】Number