微信小程序实现录音时的麦克风动画效果实例
(编辑：jimmy 日期: 2024/11/18 浏览：2)
前言
这个简单的麦克风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中的动画效果，这一点小程序的支持也是十分给力的。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。