微信小程序有旋轉(zhuǎn)動畫效果的音樂組件實(shí)例代碼

更新時間：2018年08月22日 08:56:16 作者：大眾美男典范

這篇文章主要介紹了微信小程序有旋轉(zhuǎn)動畫效果的音樂組件,需要的朋友可以參考下

在微信開發(fā)中，寫過的一個簡單的音樂播放組件，記錄下。

music

音樂播放組件。

屬性

屬性名	類型	默認(rèn)值	說明
music	String		傳入的音樂資源地址
musicStyle	String	(隨便寫了個)	音樂組件的樣式
rotate	Boolean	true	播放時是否有旋轉(zhuǎn)效果
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;'
  },
  // 播放時是否有旋轉(zhuǎn)效果
  rotate: {
   type: Boolean,
   value: true
  },
  // 播放時的icon路徑
  iconOn: {
   type: String,
   value: '/resources/img/music-on.png' // 請?zhí)顚懩J(rèn)的圖片地址
  },
  // 暫停時的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時，先銷毀之前的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文件里，只用一個 <image> 標(biāo)簽：

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

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

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

音樂旋轉(zhuǎn)效果

音樂播放時的旋轉(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時，使 musicClass 的值為 music-on，就能實(shí)現(xiàn)旋轉(zhuǎn)了。

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

爆丑照：

音樂控制

手動切換

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

_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()
 }
}

其它情況

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

分享時，進(jìn)入選好友界面、音樂停止，分享回來后，音樂沒有繼續(xù)播放
從此頁面跳轉(zhuǎn)到下一個頁面時，音樂還在繼續(xù)
從此頁面撤回到上一個頁面時，音樂還在繼續(xù)

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

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

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

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

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

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

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

使用

你可以

通過閱讀本文，根據(jù)自身實(shí)際情況寫一個

或者，直接湊合用

總結(jié)

以上所述是小編給大家介紹的微信小程序有旋轉(zhuǎn)動畫效果的音樂組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript 32位整型無符號操作示例
所有整數(shù)字變量默認(rèn)都是有符號整數(shù)，JavaScript 進(jìn)行位操作時，是采用32位有符號整型，這意味著其轉(zhuǎn)換的結(jié)果也是32位有符號整型
2013-12-12
PyQt中QLabel標(biāo)簽組件使用指南
QLabel是PyQt中用于顯示文本和圖像的組件,本文詳細(xì)介紹了其基本用法和高級特性,首先,介紹如何創(chuàng)建QLabel,以及如何用它來顯示圖像,接著,探討了如何使用HTML標(biāo)簽格式化文本,設(shè)置文本對齊方式,以及如何實(shí)現(xiàn)自動換行
2024-10-10
js定義類或?qū)ο蟮慕榻B，需要的朋友可以參考下
2012-08-08