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

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

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

在微信開(kāi)發(fā)中，寫(xiě)過(guò)的一個(gè)簡(jiǎn)單的音樂(lè)播放組件，記錄下。

music

音樂(lè)播放組件。

屬性

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

代碼

properties: {
  // 音樂(lè)路徑
  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' // 請(qǐng)?zhí)顚?xiě)默認(rèn)的圖片地址
  },
  // 暫停時(shí)的icon路徑
  iconOff: {
   type: String,
   value: '/resources/img/music-off.png' // 請(qǐng)?zhí)顚?xiě)默認(rèn)的圖片地址
  }
 }

初始化音樂(lè)

首先，在properties中接收頁(yè)面?zhèn)鱽?lái)的音樂(lè)文件地址，

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

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

_initMusic: function (newVal) {
 // 當(dāng)頁(yè)面?zhèn)鱽?lái)新的music時(shí)，先銷(xiāo)毀之前的audioCtx，否則頁(yè)面會(huì)很嗨
 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 用來(lái)記錄音樂(lè)播放狀態(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 }}' 
    style="{{ musicStyle }}" 
    src="{{ icon }}" 
    bindtap='_switch' 
    wx:if="{{ music }}"></image>

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

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

音樂(lè)旋轉(zhuǎn)效果

音樂(lè)播放時(shí)的旋轉(zhuǎn)效果，是用css動(dòng)畫(huà)實(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)動(dòng)畫(huà) */
@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 的方式來(lái)切換值。

爆丑照：

音樂(lè)控制

手動(dòng)切換

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

_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í)，還要對(duì)下列情況做處理：

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

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

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

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

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

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

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

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

使用

你可以

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

或者，直接湊合用

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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