用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

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

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-21 00:23

前言 這個簡單的麥克風demo的創意是來源于“包你說”中的錄音效果,實現的方式其實也并不難,但對于小程序中的簡易動畫的使用的確很實用。 效果 先來看個demo,gif幀數比較低,實際效果和真機測試的流暢性還是很OK的 ...

前言

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



分享至 : QQ空間
收藏
原作者: 守望臨冬城 來自: 掘金
网上选车牌号系统 赛车计划2怎么漂移 生肖开奖结果走势图 黑龙江福彩快乐十分开奖结果 七星彩稳定计划 22选5大星走势图带连线 新时时官网app下载 重庆时时彩是骗局 南粤风采几点开奖 江苏时时预测软件破解版 疾风计划APP 群英会顺口溜 十一选五全天计划 超级大乐透中奖概率 澳洲幸运5开奖源 大乐透开结果走势图表