微信小程式有旋轉動畫效果的音樂元件

大眾美男典範發表於2019-02-27
微信小程式動畫元件

在微信開發中，寫過的一個簡單的音樂播放元件，記錄下。

music

音樂播放元件。

屬性

屬性名 型別 預設值 說明
music String 傳入的音樂資源地址
musicStyle String (隨便寫了個) 音樂元件的樣式
rotate Boolean true 播放時是否有旋轉效果
iconOn String (隨便寫了個) 音樂播放時的icon地址
iconOff String (隨便寫了個) 音樂暫停時的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;`
    },
    // 播放時是否有旋轉效果
    rotate: {
      type: Boolean,
      value: true
    },
    // 播放時的icon路徑
    iconOn: {
      type: String,
      value: `/resources/img/music-on.png` // 請填寫預設的圖片地址
    },
    // 暫停時的icon路徑
    iconOff: {
      type: String,
      value: `/resources/img/music-off.png` // 請填寫預設的圖片地址
    }
  }
複製程式碼

初始化音樂

首先，在properties中接收頁面傳來的音樂檔案地址，

music: {
  type: String,
  value: ``,
  observer: function (newVal) {
    this._initMusic(newVal)
  }
}
複製程式碼

這裡的處理是，一旦接收到頁面傳來的music地址，就初始化音樂：

_initMusic: function (newVal) {
  // 當頁面傳來新的music時，先銷燬之前的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用來記錄音樂播放狀態，在data中預設設定為1：

data: {
    icon: ``,
    audioStatus: 1,
    audioCtx: ``,
    musicClass: `music-on`
}
複製程式碼

wxml檔案裡，只用一個<image>標籤：

<image class=`music {{ rotate && musicClass }}`  
        style="{{ musicStyle }}"  
        src="{{ icon }}"  
        bindtap=`_switch`  
        wx:if="{{ music }}"></image>
複製程式碼

其中，icon在元件ready()時賦值成播放狀態的icon：

ready() {
    this.setData({
      icon: this.data.iconOn
    })
}
複製程式碼

音樂旋轉效果

音樂播放時的旋轉效果，是用css動畫實現的，wxss檔案如下：

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

  100% {
    transform: rotateZ(360deg);
  }
}
複製程式碼

當rotate為true時，使musicClass 的值為`music-on`，就能實現旋轉了。

當然，musicClass需要用this.setData的方式來切換值。

爆醜圖：

微信小程式有旋轉動畫效果的音樂元件

音樂控制

手動切換

手動點選時，用取反的邏輯控制音樂的播放和暫停：

_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()
  }
}
複製程式碼

其它情況

同時，還要對下列情況做處理：

  • 分享時，進入選好友介面、音樂停止，分享回來後，音樂沒有繼續播放
  • 從此頁面跳轉到下一個頁面時，音樂還在繼續
  • 從此頁面撤回到上一個頁面時，音樂還在繼續

解決的方法，是在元件的methods中又寫了兩個方法：

// 寫在元件的methods中：

// 在引用元件頁面的onShow()中呼叫
//  否則，如果當發生分享頁面行為並返回時，音樂不會自動播放
onShow: function () {
  if (this.data.music && this.data.audioStatus) {
    this.data.audioCtx.play()
  }
},

// 在引用元件頁面的onHide()中呼叫
//  否則，在跳轉到下一個頁面後，音樂還在繼續
onHide: function () {
  if (this.data.music && this.data.audioStatus) {
    this.data.audioCtx.pause()
  }
  this.setData({
    animationData: {}
  })
}
複製程式碼

這兩個方法分別在頁面中的onShow和onHide中呼叫，呼叫方式就是父元件獲取到子元件例項物件：

例如，給<music>元件加id為”music-componet”，呼叫時就是：

// 寫在呼叫頁面中

onShow: function () {
    this.selectComponent(`#music-component`).onShow()
},

onHide: function () {
    this.selectComponent(`#music-component`).onHide()
}
複製程式碼

最後，在元件的detached中也呼叫一下onHide方法：

// 頁面關閉時銷燬音樂
detached() {
    this.onHide()
}
複製程式碼

使用

你可以

  • 通過閱讀本文，根據自身實際情況寫一個
  • 或者，直接湊合用

相關文章