微信小程序实现录音时的麦克风动画效果实例
作者：守望临冬城
这篇文章主要给大家介绍了关于微信小程序实现录音时的麦克风动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前言
这个简单的麦克风demo的创意是来源于“包你说”中的录音效果，实现的方式其实也并不难，但对于小程序中的简易动画的使用的确很实用。
效果
先来看个demo，gif帧数比较低，实际效果和真机测试的流畅性还是很OK的
思路
通过setTimeout配合this.sedData来改变image中的src路径来生成动画。动画的播放以及隐藏则通过wx:if绑定一个自定义的参数来控制。下面就直接上代码。
代码
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 //录音动画定时器
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中的动画效果，这一点小程序的支持也是十分给力的。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。