微信小程序实现录音时的麦克风动画效果实例


Posted in Javascript onMay 18, 2019

前言

这个简单的麦克风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中的动画效果,这一点小程序的支持也是十分给力的。

微信小程序实现录音时的麦克风动画效果实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 #Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 #Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 #Javascript
webpack 代码分离优化快速指北
May 18 #Javascript
如何实现小程序tab栏下划线动画效果
May 18 #Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
You might like
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python将文本转换成图片输出的方法
2015/04/28 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python实现实时监控文件的方法
2016/08/26 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
C++的几个面试题附答案
2016/08/03 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
营销总经理的岗位职责
2013/12/15 职场文书
车间主任岗位职责
2014/03/16 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
出生公证委托书
2014/04/03 职场文书
带病坚持工作事迹
2014/05/03 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
爱护公物主题班会
2015/08/17 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS