小程序實現錄音時的麥克風動畫效果

前言

這個簡單的麥克風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中的動畫效果，這一點小程序的支持也是十分給力的。