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


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 相关文章推荐
JS截取url中问号后面参数的值信息
Apr 29 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
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
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
javascript Keycode对照表
2009/10/24 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python编写的最短路径算法
2015/03/25 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
公司聘任书模板
2014/03/29 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
小学生校园广播稿
2014/09/28 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers