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


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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
JS实现图片切换效果
Nov 17 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
解决GD中文乱码问题
2007/02/14 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
javascript事件模型介绍
2016/05/31 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JavaScript适配器模式详解
2017/10/19 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
js实现时间日期校验
2020/05/26 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python 网络编程常用代码段
2016/08/28 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python实现转圈打印矩阵
2019/03/02 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
亲戚关系证明
2015/06/24 职场文书
升学宴家长答谢词
2015/09/29 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
教你部署vue项目到docker
2022/04/05 Vue.js