微信小程序有旋转动画效果的音乐组件实例代码


Posted in Javascript onAugust 22, 2018

在微信开发中,写过的一个简单的音乐播放组件,记录下。

music

音乐播放组件。

属性

属性名 类型 默认值 说明
music String   传入的音乐资源地址
musicStyle String (随便写了个) 音乐组件的样式
rotate Boolean true 播放时是否有旋转效果
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;'
  },
  // 播放时是否有旋转效果
  rotate: {
   type: Boolean,
   value: true
  },
  // 播放时的icon路径
  iconOn: {
   type: String,
   value: '/resources/img/music-on.png' // 请填写默认的图片地址
  },
  // 暂停时的icon路径
  iconOff: {
   type: String,
   value: '/resources/img/music-off.png' // 请填写默认的图片地址
  }
 }

初始化音乐

首先,在properties中接收页面传来的音乐文件地址,

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

这里的处理是,一旦接收到页面传来的 music 地址,就初始化音乐:

_initMusic: function (newVal) {
 // 当页面传来新的music时,先销毁之前的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 用来记录音乐播放状态,在data中默认设置为1:

data: {
  icon: '',
  audioStatus: 1,
  audioCtx: '',
  musicClass: 'music-on'
}

wxml文件里,只用一个 <image> 标签:

<image class='music {{ rotate && musicClass }}' 
    style="{{ musicStyle }}" 
    src="{{ icon }}" 
    bindtap='_switch' 
    wx:if="{{ music }}"></image>

其中, icon 在组件ready()时赋值成播放状态的icon:

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

音乐旋转效果

音乐播放时的旋转效果,是用css动画实现的,wxss文件如下:

.music {
 position: absolute;
 z-index: 99;
 -webkit-animation-iteration-count: infinite;
}
/* 旋转class */
.music-on {
 animation: music-rotate 4s linear infinite;
}
/* 旋转动画 */
@keyframes music-rotate {
 0% {
  transform: rotateZ(0deg);
 }
 
 100% {
  transform: rotateZ(360deg);
 }
}

当 rotate 为true时,使 musicClass 的值为 music-on,就能实现旋转了。

当然, 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()
 }
}

其它情况

同时,还要对下列情况做处理:

  • 分享时,进入选好友界面、音乐停止,分享回来后,音乐没有继续播放
  • 从此页面跳转到下一个页面时,音乐还在继续
  • 从此页面撤回到上一个页面时,音乐还在继续

解决的方法,是在组件的methods中又写了两个方法:

// 写在组件的methods中:
 
// 在引用组件页面的onShow()中调用
// 否则,如果当发生分享页面行为并返回时,音乐不会自动播放
onShow: function () {
 if (this.data.music && this.data.audioStatus) {
  this.data.audioCtx.play()
 }
},
// 在引用组件页面的onHide()中调用
// 否则,在跳转到下一个页面后,音乐还在继续
onHide: function () {
 if (this.data.music && this.data.audioStatus) {
  this.data.audioCtx.pause()
 }
 this.setData({
  animationData: {}
 })
}

这两个方法分别在页面中的 onShow 和 onHide 中调用,调用方式就是父组件获取到子组件实例对象:

例如,给<music>组件加id为"music-componet",调用时就是:

// 写在调用页面中
 
onShow: function () {
  this.selectComponent('#music-component').onShow()
},
onHide: function () {
  this.selectComponent('#music-component').onHide()
}

最后,在组件的detached中也调用一下 onHide 方法:

// 页面关闭时销毁音乐
detached() {
  this.onHide()
}

使用

你可以

通过阅读本文,根据自身实际情况写一个

或者,直接凑合用

总结

以上所述是小编给大家介绍的微信小程序有旋转动画效果的音乐组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 #Javascript
Canvas实现微信红包照片效果
Aug 21 #Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 #Javascript
js canvas实现红包照片效果
Aug 21 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
怎样辨别一杯好咖啡
2021/03/03 新手入门
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python提取log文件内容并画出图表
2019/07/08 Python
python单例模式的多种实现方法
2019/07/26 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
闭幕式主持词
2014/04/02 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
企业金融服务方案
2014/06/03 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
教师个人教学反思
2016/02/23 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书