微信小程序音频录制波纹循环动画
更新时间：2022年06月29日 08:58:14 作者：weixin_43947294
这篇文章主要为大家详细介绍了微信小程序音频录制波纹循环动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序音频录制波纹循环动画的具体代码，供大家参考，具体内容如下
实现的效果
第一种方法(利用微信小程序的animation)
wxml部分
<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
<view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
<text>长按</text>
<view class="ripple"></view>
<view class="ripple" animation="{{animationData1}}"></view>
<view class="ripple" animation="{{animationData2}}"></view>
</view>
</view>wxss部分
/* pages/myRecode/myRecode.wxss */
.myRecode{
padding-top:500rpx;
text-align: center;
box-sizing: border-box;
}
.myRecode .recode{
display: inline-block;
width:200rpx;
height:200rpx;
background: #EBB128;
border-radius: 50%;
text-align: center;
color:#fff;
line-height: 200rpx;
position: relative;
}
.ripple{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
border:2px solid #F6F1CC;
}js 部分
// pages/myRecode/myRecode.js
Page({
/**
* 页面的初始数据
*/
data: {
animationData1: "",
animationData2: "",
animationStatus: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
//事件函数
animationFun:function(animationData){
if(!this.data.animationStatus){
return
}
var animation = wx.createAnimation({
duration: 1000
})
animation.opacity(0).scale(2, 2).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
animationEnd: function (animationData) {
var animation = wx.createAnimation({
duration: 0
})
animation.opacity(1).scale(1, 1).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
recodeEnd: function() {
//动画1结束
var animation1 = wx.createAnimation({
duration: 0
})
animation1.opacity(1).scale(1, 1).step();
//动画2结束
var animation2 = wx.createAnimation({
duration: 0
})
animation2.opacity(1).scale(1, 1).step();
this.setData({
animationData1: animation1.export(),
animationData2: animation2.export(),
animationStatus: false
})
},
recodeClick: function() {
this.setData({
animationStatus: true
})
this.animationFun('animationData1')
setTimeout(()=>{
this.animationFun('animationData2')
},500)
setTimeout(() => {
this.animationRest()
}, 1000)
},
animationRest: function() {
//动画重置
this.animationEnd('animationData1')
setTimeout(()=>{
this.animationEnd('animationData2')
},500)
setTimeout(() => {
if (this.data.animationStatus) {
this.recodeClick()
}
}, 100)
}
})第二种方法（纯wxss控制）
wxml
<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
<view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
<text>长按</text>
<view class="ripple"></view>
<view class="ripple {{animationStatus?'rippleAnimation1':''}}"></view>
<view class="ripple {{animationStatus?'rippleAnimation2':''}}"></view>
<view class="ripple {{animationStatus?'rippleAnimation3':''}}"></view>
</view>
</view>js
// pages/myRecode/myRecode.js
Page({
/**
* 页面的初始数据
*/
data: {
animationStatus: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
recodeEnd: function() {
this.setData({
animationStatus:false
})
},
recodeClick: function() {
this.setData({
animationStatus: true
})
}
})wxss部分
/* pages/myRecode/myRecode.wxss */
.myRecode{
padding-top:500rpx;
text-align: center;
box-sizing: border-box;
}
.myRecode .recode{
display: inline-block;
width:200rpx;
height:200rpx;
background: #EBB128;
border-radius: 50%;
text-align: center;
color:#fff;
line-height: 200rpx;
position: relative;
}
.ripple{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
border:2px solid #F6F1CC;
}
.rippleAnimation1{
animation: ripple 1s infinite linear;
}
.rippleAnimation2{
animation: ripple 1s infinite linear;
animation-delay:0.3s;
}
.rippleAnimation3{
animation: ripple 1s infinite linear;
animation-delay:0.6s;
}
@keyframes ripple{
from{
opacity: 1;
transform: scale(1,1)
}
to{
opacity: 0;
transform: scale(2,2)
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉2014-06-06
详解JavaScript Promise和Async/Await
这篇文章主要介绍了JavaScript Promise和Async/Await，对异步编程感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了javascript获取flash版本号的方法,以实例形式分析了javascript判断用户是否安装了Flash及获取Flash版本号的方法,具有一定的实用价值,需要的朋友可以参考下2014-11-11
js 右下角弹窗效果代码,虽然IE only，但这个代码的逻辑可以参考下。了解下IE与firefox的区别，自己写个兼容的版本吧。2010-06-06
这篇文章介绍了javascript打印输出json实例，有需要的朋友可以参考一下2013-11-11
ES6标准新增了一种新的函数：Arrow Function（箭头函数）,为什么叫Arrow Function？因为它的定义用的就是一个箭头2020-05-05
类似于yahoo邮箱登陆的提示效果，当鼠标聚焦到邮箱地址文本框时，文本框文字被清空2014-02-02
这篇文章主要介绍了JavaScript动态修改背景颜色的方法,涉及javascript操作鼠标事件及样式的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了利用Javascript实现的简单的转盘抽奖，文中分享了两种抽奖效果，一种是默认转动，一种是需要点击开始转动的，并给出了晚上的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
链式调用就是调用对象的方法后返回到该对象，严格来讲它并不属于语法，而只是一种语法技巧，js令人着迷的一点就是这里。2010-02-02
最新评论