微信小程序开发之麦克风动画 帧动画 放大 淡出


Posted in Javascript onApril 18, 2017

想做个录音机,第一步就卡在麦克风动画这里了.

先上gif.再吐槽.

微信小程序开发之麦克风动画 帧动画 放大 淡出

① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档 动画最下面找到这么一行字.这个锅是不是可以甩出去了?

ps:如果有同学能实现动画循环,一定告诉我.

微信小程序开发之麦克风动画 帧动画 放大 淡出

② 麦克风里面是个帧动画.没有前端的基础,只能用非主流的办法凑合了.

用wx:if{{}}判断js中定义的值是不是等于图片对应的数字来控制图片的显示和隐藏.css中应该有更好的方法.我css基础不牢,就不说了.

上代码:

1.index.wxml

<!--index.wxml--> 
<view class="voice-style" bindtap="startSpeak"> 
<image class="bg-style" src="../../images/voice_icon_speaking_bg_normal.png" ></image> 
<image class="bg-style" animation="{{spreakingAnimation}}" src="../../images/voice_video_loading_0.png"></image> 
<image class="bg-style" animation="{{spreakingAnimation_1}}" src="../../images/voice_video_loading_0.png"></image> 
<image class="bg-style" animation="{{spreakingAnimation_2}}" src="../../images/voice_video_loading_0.png"></image> 
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image> 
<image wx:if="{{j==2}}" class="sound-style" src="../../images/voice_icon_speech_sound_2.png" ></image> 
<image wx:if="{{j==3}}" class="sound-style" src="../../images/voice_icon_speech_sound_3.png" ></image> 
<image wx:if="{{j==4}}" class="sound-style" src="../../images/voice_icon_speech_sound_4.png" ></image> 
<image wx:if="{{j==5}}"class="sound-style" src="../../images/voice_icon_speech_sound_5.png" ></image> 
</view>

2.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  spreakingAnimation: {},//放大动画 
  j: 1,//帧动画初始图片 
  isSpeaking: false,//是否在录音状态 
 }, 
 onLoad: function () { 
 }, 
 //点击开始说话 
 startSpeak: function () { 
  var _this = this; 
  if (!this.data.isSpeaking) { 
   speaking.call(this); 
   this.setData({ 
    isSpeaking: true 
   }) 
  } else { 
   //去除帧动画循环 
   clearInterval(this.timer) 
   this.setData({ 
    isSpeaking: false, 
    j: 1 
   }) 
  } 
 }, 
}) 

function speaking() { 
 //话筒帧动画 
 var i = 1; 
 this.timer = setInterval(function () { 
  i++; 
  i = i % 5; 
  _this.setData({ 
   j: i 
  }) 
  return 
 }, 200); 
 //波纹放大,淡出动画 
 var _this = this; 
 var animation = wx.createAnimation({ 
  duration: 1000 
 }) 
 animation.opacity(0).scale(3, 3).step();//修改透明度,放大 
 this.setData({ 
  spreakingAnimation: animation.export() 
 }) 
 setTimeout(function(){ 
  //波纹放大,淡出动画 
 var animation = wx.createAnimation({ 
  duration: 1000 
 }) 
 animation.opacity(0).scale(3, 3).step();//修改透明度,放大 
 _this.setData({ 
  spreakingAnimation_1: animation.export() 
 }) 
 },250) 
  setTimeout(function(){ 
  //波纹放大,淡出动画 
 var animation = wx.createAnimation({ 
  duration: 1000 
 }) 
 animation.opacity(0).scale(3, 3).step();//修改透明度,放大 
 _this.setData({ 
  spreakingAnimation_2: animation.export() 
 }) 
 },500) 
}

3.index.wxss

/**index.wxss**/ 
.voice-style { 
 margin-top: 400px; 
 display: flex; 
 position: relative; 
 flex-direction: column; 
 align-items: center; 
} 
.bg-style { 
 position: absolute; 
 width: 100px; 
 height: 100px; 
} 
.sound-style{ 
 position: absolute; 
 width: 37.6px; 
 height: 60px; 
 margin-top: 20px; 
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 #Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 #Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 #Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 #Javascript
微信小程序实战之自定义toast(6)
Apr 18 #Javascript
Jquery-data的三种用法
Apr 18 #jQuery
微信小程序实战之登录页面制作(5)
Mar 30 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
javascript闭包入门示例
2014/04/30 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
js微信支付实现代码
2016/12/22 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
如何利用find命令查找文件
2015/02/07 面试题
出纳岗位职责
2013/11/09 职场文书
银行出纳岗位职责
2013/11/25 职场文书
优秀演讲稿范文
2013/12/29 职场文书
企业员工薪酬方案
2014/06/04 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫