微信小程序有旋轉(zhuǎn)動畫效果的音樂組件實例代碼
更新時間：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動畫實現(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，就能實現(xiàn)旋轉(zhuǎn)了。
當(dāng)然， 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()
}
}
其它情況
同時，還要對下列情況做處理：
- 分享時，進(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)用方式就是父組件獲取到子組件實例對象：
例如，給<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ù)自身實際情況寫一個
或者，直接湊合用
總結(jié)
以上所述是小編給大家介紹的微信小程序有旋轉(zhuǎn)動畫效果的音樂組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
原生js實現(xiàn)移動開發(fā)輪播圖、相冊滑動特效
原生JS實現(xiàn)圖片自動輪播緩沖切換特效，很實用流暢的圖片輪播特效，在較現(xiàn)代的瀏覽器上展現(xiàn)的圓角效果，兼容差點的是直角效果，全部原生JS實現(xiàn)，還是很不錯的值得大家學(xué)習(xí)并利用，推薦下載。2015-04-04
這篇文章主要介紹了用JS實現(xiàn)簡單的登錄驗證功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了15款最好的Bootstrap在線編輯器，15款在線編輯工具希望幫助大家更好的進(jìn)行開發(fā)，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法,結(jié)合實例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-08-08
Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）
Bootstrap每天必學(xué)之柵格系統(tǒng)，小編對Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了mock.js模擬前后臺交互的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)橫版菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
本文為大家介紹下購物車如何實現(xiàn)選中得到價格，下面有個不錯的示例，大家可以參考下2014-01-01