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


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操作JSON的要领总结
Dec 09 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
js实现图片无缝滚动
Dec 23 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
vue.js开发环境搭建教程
May 04 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
php文件系统处理方法小结
2016/05/23 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python中的 enum 模块源码详析
2019/01/09 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
合作投资意向书
2014/04/01 职场文书
保护动物的标语
2014/06/11 职场文书
2014年实验室工作总结
2014/12/03 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年度保密工作总结
2015/04/24 职场文书
招商银行收入证明
2015/06/17 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
七年级作文之英语老师
2019/10/28 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB