小编给大家分享一下微信小程序怎么实现录音时的麦克风动画效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联公司是少有的网站设计制作、
网站建设、营销型企业网站、
小程序开发、手机APP,开发、制作、设计、
买链接、推广优化一站式服务网络公司,从2013年成立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评
前言
这个简单的麦克风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中的动画效果，这一点小程序的支持也是十分给力的。
看完了这篇文章，相信你对“微信小程序怎么实现录音时的麦克风动画效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站名称：微信小程序怎么实现录音时的麦克风动画效果-创新互联
当前URL：
http://cdxtjz.cn/article/djdjos.html
