亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序音頻錄制波紋循環(huán)動(dòng)畫

 更新時(shí)間：2022年06月29日 08:58:14   作者：weixin_43947294  
這篇文章主要為大家詳細(xì)介紹了微信小程序音頻錄制波紋循環(huán)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序音頻錄制波紋循環(huán)動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)的效果

第一種方法(利用微信小程序的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({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? animationData1: "",
? ? animationData2: "",
? ? animationStatus: false
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(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)畫1結(jié)束
? ? var animation1 = wx.createAnimation({
? ? ? duration: 0
? ? })
? ? animation1.opacity(1).scale(1, 1).step();?
? ? //動(dòng)畫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)畫重置
? ? 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({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? animationStatus: false
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(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)
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論