欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年08月22日 08:56:16   作者：大眾美男典范  
這篇文章主要介紹了微信小程序有旋轉(zhuǎn)動畫效果的音樂組件,需要的朋友可以參考下

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

music

音樂播放組件。

屬性

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

音樂旋轉(zhuǎn)效果

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

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

爆丑照：

音樂控制

手動切換

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

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

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

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

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

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

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

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

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

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

使用

你可以

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

或者，直接湊合用

總結(jié)

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

相關(guān)文章

  • 原生js實(shí)現(xiàn)移動開發(fā)輪播圖、相冊滑動特效

    原生js實(shí)現(xiàn)移動開發(fā)輪播圖、相冊滑動特效

    原生JS實(shí)現(xiàn)圖片自動輪播緩沖切換特效，很實(shí)用流暢的圖片輪播特效，在較現(xiàn)代的瀏覽器上展現(xiàn)的圓角效果，兼容差點(diǎn)的是直角效果，全部原生JS實(shí)現(xiàn)，還是很不錯(cuò)的值得大家學(xué)習(xí)并利用，推薦下載。
    2015-04-04
  • 用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能

    用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能

    這篇文章主要介紹了用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-07-07
  • 微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇

    微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • js原生方法被覆蓋,從新賦值原生的方法

    js原生方法被覆蓋,從新賦值原生的方法

    下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • 15款最好的Bootstrap在線編輯器

    15款最好的Bootstrap在線編輯器

    這篇文章主要為大家詳細(xì)介紹了15款最好的Bootstrap在線編輯器，15款在線編輯工具希望幫助大家更好的進(jìn)行開發(fā)，感興趣的小伙伴們可以參考一下
    2016-08-08
  • JavaScript實(shí)現(xiàn)動態(tài)添加Form表單元素的方法示例

    JavaScript實(shí)現(xiàn)動態(tài)添加Form表單元素的方法示例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)動態(tài)添加Form表單元素的方法,結(jié)合實(shí)例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2017-08-08
  • Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）

    Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）

    Bootstrap每天必學(xué)之柵格系統(tǒng)，小編對Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下
    2015-11-11
  • mock.js模擬前后臺交互

    mock.js模擬前后臺交互

    這篇文章主要為大家詳細(xì)介紹了mock.js模擬前后臺交互的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-07-07
  • JavaScript實(shí)現(xiàn)橫版菜單欄

    JavaScript實(shí)現(xiàn)橫版菜單欄

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)橫版菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 購物車選中得到價(jià)格實(shí)現(xiàn)示例

    購物車選中得到價(jià)格實(shí)現(xiàn)示例

    本文為大家介紹下購物車如何實(shí)現(xiàn)選中得到價(jià)格，下面有個(gè)不錯(cuò)的示例，大家可以參考下
    2014-01-01

最新評論