本篇文章為大家展示了微信小程序中怎么實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)動畫效果音樂組件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、黑河網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為黑河等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

music

音樂播放組件。

屬性

屬性名	類型	默認(rèn)值	說明
music	String		傳入的音樂資源地址
musicStyle	String	(隨便寫了個(gè))	音樂組件的樣式
rotate	Boolean	true	播放時(shí)是否有旋轉(zhuǎn)效果
iconOn	String	(隨便寫了個(gè))	音樂播放時(shí)的icon地址
iconOff	String	(隨便寫了個(gè))	音樂暫停時(shí)的icon地址

代碼

properties: {
  // 音樂路徑
  music: {
   type: String,
   value: '',
   observer: function (newVal) {
    this._initMusic(newVal)
   }
  },
  // 樣式
  musicStyle: {
   type: String,
   value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
  },
  // 播放時(shí)是否有旋轉(zhuǎn)效果
  rotate: {
   type: Boolean,
   value: true
  },
  // 播放時(shí)的icon路徑
  iconOn: {
   type: String,
   value: '/resources/img/music-on.png' // 請?zhí)顚懩J(rèn)的圖片地址
  },
  // 暫停時(shí)的icon路徑
  iconOff: {
   type: String,
   value: '/resources/img/music-off.png' // 請?zhí)顚懩J(rèn)的圖片地址
  }
 }

初始化音樂

首先，在properties中接收頁面?zhèn)鱽淼囊魳肺募刂罚?/p>

music: {
 type: String,
 value: '',
 observer: function (newVal) {
  this._initMusic(newVal)
 }
}

這里的處理是，一旦接收到頁面?zhèn)鱽淼?music 地址，就初始化音樂：

_initMusic: function (newVal) {
 // 當(dāng)頁面?zhèn)鱽硇碌膍usic時(shí)，先銷毀之前的audioCtx，否則頁面會很嗨
 if (this.data.audioCtx) {
  this.data.audioCtx.destroy()
 }
 if (newVal) {
  var audioCtx = wx.createInnerAudioContext()
  this.setData({
    audioCtx: audioCtx
  })
  if (this.data.audioStatus == '1') {
    audioCtx.autoplay = true
  }
  audioCtx.loop = true
  audioCtx.src = newVal
 }
}

 audioStatus 用來記錄音樂播放狀態(tài)，在data中默認(rèn)設(shè)置為1：

data: {
  icon: '',
  audioStatus: 1,
  audioCtx: '',
  musicClass: 'music-on'
}

wxml文件里，只用一個(gè) <image> 標(biāo)簽：

<image class='music {{ rotate && musicClass }}' 
     
    src="{{ icon }}" 
    bindtap='_switch' 
    wx:if="{{ music }}"></image>

其中， icon 在組件ready()時(shí)賦值成播放狀態(tài)的icon：

ready() {
  this.setData({
   icon: this.data.iconOn
  })
}

音樂旋轉(zhuǎn)效果

音樂播放時(shí)的旋轉(zhuǎn)效果，是用css動畫實(shí)現(xiàn)的，wxss文件如下：

.music {
 position: absolute;
 z-index: 99;
 -webkit-animation-iteration-count: infinite;
}
/* 旋轉(zhuǎn)class */
.music-on {
 animation: music-rotate 4s linear infinite;
}
/* 旋轉(zhuǎn)動畫 */
@keyframes music-rotate {
 0% {
  transform: rotateZ(0deg);
 }
 
 100% {
  transform: rotateZ(360deg);
 }
}

當(dāng) rotate 為true時(shí)，使 musicClass 的值為 music-on，就能實(shí)現(xiàn)旋轉(zhuǎn)了。

當(dāng)然， musicClass 需要用 this.setData 的方式來切換值。

爆丑照：

音樂控制

手動切換

手動點(diǎn)擊時(shí)，用取反的邏輯控制音樂的播放和暫停：

_switch: function () {
 // 如果是播放就停止 
 if (this.data.audioStatus) {
  this.setData({
   audioStatus: 0,
   icon: this.data.iconOff,
   musicClass: ''
  })
  this.data.audioCtx.pause()
 // 如果是停止就播放
 } else {
  this.setData({
   audioStatus: 1,
   icon: this.data.iconOn,
   musicClass: 'music-on'
  })
  this.data.audioCtx.play()
 }
}

其它情況

同時(shí)，還要對下列情況做處理：

• 分享時(shí)，進(jìn)入選好友界面、音樂停止，分享回來后，音樂沒有繼續(xù)播放

• 從此頁面跳轉(zhuǎn)到下一個(gè)頁面時(shí)，音樂還在繼續(xù)

• 從此頁面撤回到上一個(gè)頁面時(shí)，音樂還在繼續(xù)

解決的方法，是在組件的methods中又寫了兩個(gè)方法：

// 寫在組件的methods中：
 
// 在引用組件頁面的onShow()中調(diào)用
// 否則，如果當(dāng)發(fā)生分享頁面行為并返回時(shí)，音樂不會自動播放
onShow: function () {
 if (this.data.music && this.data.audioStatus) {
  this.data.audioCtx.play()
 }
},
// 在引用組件頁面的onHide()中調(diào)用
// 否則，在跳轉(zhuǎn)到下一個(gè)頁面后，音樂還在繼續(xù)
onHide: function () {
 if (this.data.music && this.data.audioStatus) {
  this.data.audioCtx.pause()
 }
 this.setData({
  animationData: {}
 })
}

這兩個(gè)方法分別在頁面中的 onShow 和 onHide 中調(diào)用，調(diào)用方式就是父組件獲取到子組件實(shí)例對象：

例如，給<music>組件加id為"music-componet"，調(diào)用時(shí)就是：

// 寫在調(diào)用頁面中
 
onShow: function () {
  this.selectComponent('#music-component').onShow()
},
onHide: function () {
  this.selectComponent('#music-component').onHide()
}

最后，在組件的detached中也調(diào)用一下 onHide 方法：

// 頁面關(guān)閉時(shí)銷毀音樂
detached() {
  this.onHide()
}

上述內(nèi)容就是微信小程序中怎么實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)動畫效果音樂組件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：微信小程序中怎么實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)動畫效果音樂組件
當(dāng)前地址：http://aaarwkj.com/article14/jjjide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、網(wǎng)站制作、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)