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

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

先上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;
}

demo代码下载

我的博客:http://blog.csdn.net/qq_31383345

欢迎批评!

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

微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序开发之录音机音频播放动画 (真机可用)
趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风 ...
微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
010 - 微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
微信小程序开发之『侧边栏滑动』特效
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音 ...
微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 微信小程序开发之录音机音频播放动画 (真机可用) 先上gif: 再上几张 ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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