微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂(lè)組件實(shí)例代碼
在微信開發(fā)中，寫過(guò)的一個(gè)簡(jiǎn)單的音樂(lè)播放組件，記錄下。
music
音樂(lè)播放組件。
屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| music | String | 傳入的音樂(lè)資源地址 | |
| musicStyle | String | (隨便寫了個(gè)) | 音樂(lè)組件的樣式 |
| rotate | Boolean | true | 播放時(shí)是否有旋轉(zhuǎn)效果 |
| iconOn | String | (隨便寫了個(gè)) | 音樂(lè)播放時(shí)的icon地址 |
| iconOff | String | (隨便寫了個(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í)顚懩J(rèn)的圖片地址
},
// 暫停時(shí)的icon路徑
iconOff: {
type: String,
value: '/resources/img/music-off.png' // 請(qǐng)?zhí)顚懩J(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í)，先銷毀之前的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)畫實(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)畫 */
@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中又寫了兩個(gè)方法：
// 寫在組件的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í)就是：
// 寫在調(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í)銷毀音樂(lè)
detached() {
this.onHide()
}
使用
你可以
通過(guò)閱讀本文，根據(jù)自身實(shí)際情況寫一個(gè)
或者，直接湊合用
總結(jié)
以上所述是小編給大家介紹的微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂(lè)組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面詳解
- 微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能示例
- 微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】
- 微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫示例
- 微信小程序中使用wxss加載圖片并實(shí)現(xiàn)動(dòng)畫效果
- 微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
相關(guān)文章
原生js實(shí)現(xiàn)移動(dòng)開發(fā)輪播圖、相冊(cè)滑動(dòng)特效
原生JS實(shí)現(xiàn)圖片自動(dòng)輪播緩沖切換特效，很實(shí)用流暢的圖片輪播特效，在較現(xiàn)代的瀏覽器上展現(xiàn)的圓角效果，兼容差點(diǎn)的是直角效果，全部原生JS實(shí)現(xiàn)，還是很不錯(cuò)的值得大家學(xué)習(xí)并利用，推薦下載。2015-04-04
用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能
這篇文章主要介紹了用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-07-07
微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了15款最好的Bootstrap在線編輯器，15款在線編輯工具希望幫助大家更好的進(jìn)行開發(fā)，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法,結(jié)合實(shí)例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-08-08
Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）
Bootstrap每天必學(xué)之柵格系統(tǒng)，小編對(duì)Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了mock.js模擬前后臺(tái)交互的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)橫版菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
購(gòu)物車選中得到價(jià)格實(shí)現(xiàn)示例
本文為大家介紹下購(gòu)物車如何實(shí)現(xiàn)選中得到價(jià)格，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01