微信小程序音頻錄制波紋循環(huán)動(dòng)畫(huà)
更新時(shí)間：2022年06月29日 08:58:14 作者：weixin_43947294
這篇文章主要為大家詳細(xì)介紹了微信小程序音頻錄制波紋循環(huán)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序音頻錄制波紋循環(huán)動(dòng)畫(huà)的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)的效果
第一種方法(利用微信小程序的animation)
wxml部分
<!--pages/myRecode/myRecode.wxml-->
<view class="myRecode">
? <view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'>
? ? <text>長(zhǎng)按</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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? animationData1: "",
? ? animationData2: "",
? ? animationStatus: false
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function(options) {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload: function() {
? },
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {
? },
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
? },
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function() {
? },
? //事件函數(shù)
? 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() {
? ? //動(dòng)畫(huà)1結(jié)束
? ? var animation1 = wx.createAnimation({
? ? ? duration: 0
? ? })
? ? animation1.opacity(1).scale(1, 1).step();?
? ? //動(dòng)畫(huà)2結(jié)束
? ? 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() {
? ? //動(dòng)畫(huà)重置
? ? 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>長(zhǎng)按</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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? animationStatus: false
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function(options) {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide: function() {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload: function() {
? },
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {
? },
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
? },
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? 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)
? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
javascript dom 操作詳解 js加強(qiáng)
javascript dom 操作詳解 js加強(qiáng)操作實(shí)現(xiàn)代碼。2009-07-07
javascript 緩沖效果實(shí)現(xiàn)代碼 推薦
緩沖效果就是實(shí)現(xiàn)一個(gè)頁(yè)面的由慢到快或由快到慢的過(guò)程。2009-09-09
詳解uniapp頁(yè)面跳轉(zhuǎn)URL傳參大坑
本文主要介紹了詳解uniapp頁(yè)面跳轉(zhuǎn)URL傳參大坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
js有效數(shù)字 顯示指定位數(shù)...2007-09-09
iframe窗口高度自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要介紹了iframe窗口高度自適應(yīng)的實(shí)現(xiàn)方法，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了正則表達(dá)式優(yōu)化JSON字符串的技巧的相關(guān)資料,需要的朋友可以參考下2015-12-12
三種動(dòng)態(tài)加載js的jquery實(shí)例代碼另附去除js方法
這篇文章主要介紹了三種動(dòng)態(tài)加載js的jquery實(shí)例代碼另附去除js方法,需要的朋友可以參考下2014-04-04
JavaScript設(shè)計(jì)模式之職責(zé)鏈模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之職責(zé)鏈模式，對(duì)設(shè)計(jì)模式感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了js鋼琴按鈕波浪式圖片排列效果，推薦給大家，有需要的小伙伴可以參考下。2015-08-08