⼩程序实现录⾳时的麦克风动画效果实例
前⾔
这个简单的麦克风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 = fig;
wx.startRecord({
success(res) {
const tempFilePath = pFilePath; //录⾳成功后的⽂件
wx.saveFile({
tempFilePath: tempFilePath, //保存⽂件到本地并⽣成临时路径
success(res) {
wx.uploadFile({  //上传语⾳⽂件到服务器
url: url,
filePath: res.savedFilePath,
name: 'file',
formData: {
token: ken,
name: 'file'
},
success(res) {
that.setData({
voiceUrl: JSON.parse(res.data).file_url
})
}
})
}
})
}
})
},
// 播放录⾳动画
animationTalk() {
var that = this;
if (!that.data.showTalk) {
that.setData({
receiveImg: 1
});
clearTimeout(playTalk)
} else {
switch (iveImg) {
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中的动画效果，这⼀点⼩程序的⽀持也是⼗分给⼒的。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。