亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

在微信開發(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動(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 的方式來切換值。

爆丑照：

音樂控制

手動(dòng)切換

手動(dòng)點(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í)，音樂不會自動(dòng)播放
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)動(dòng)畫效果的音樂組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論