微信小程序开发制作麦克风动画实现放大、淡出效果的案例

小编给大家分享一下微信小程序开发制作麦克风动画实现放大、淡出效果的案例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

先上gif.再吐槽.

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

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

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

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

上代码:

1.index.wxml

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

2.index.js

//index.js
//获取应用实例
varapp=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
})
}
},
})

functionspeaking(){
//话筒帧动画
vari=1;
this.timer=setInterval(function(){
i++;
i=i%5;
_this.setData({
j:i
})
return
},200);
//波纹放大,淡出动画
var_this=this;
varanimation=wx.createAnimation({
duration:1000
})
animation.opacity(0).scale(3,3).step();//修改透明度,放大
this.setData({
spreakingAnimation:animation.export()
})
setTimeout(function(){
//波纹放大,淡出动画
varanimation=wx.createAnimation({
duration:1000
})
animation.opacity(0).scale(3,3).step();//修改透明度,放大
_this.setData({
spreakingAnimation_1:animation.export()
})
},250)
setTimeout(function(){
//波纹放大,淡出动画
varanimation=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;
}

看完了这篇文章，相信你对“微信小程序开发制作麦克风动画实现放大、淡出效果的案例”有了一定的了解，如果想了解更多相关知识，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！