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


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 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python中的True,False条件判断实例分析
2015/01/12 Python
Python最基本的输入输出详解
2015/04/25 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python的文件操作方法汇总
2017/11/10 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
国际领先的学术出版商:Springer
2017/01/11 全球购物
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
学校经典推荐信
2013/10/30 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
个人专业技术总结
2015/03/05 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS