vue2.0+SVG实现音乐播放圆形进度条组件


Posted in Javascript onSeptember 21, 2019

vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果

vue2.0+SVG实现音乐播放圆形进度条组件

需求分析:

类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度。

progress-circle.vue源码:

<template>
 <div class="progress-circle">
 <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
  <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"
    :stroke-dashoffset="dashOffset"/>
 </svg>
 <slot></slot>
 </div>
</template>
 
<script type="text/ecmascript-6">
 export default {
 props: {
  radius: {
  type: String,
  default: '0.32rem'
  },
  percent: {
  type: Number,
  default: 0
  }
 },
 data() {
  return {
  dashArray: Math.PI * 100
  }
 },
 computed: {
  dashOffset() {
  return (1 - this.percent) * this.dashArray
  }
 }
 }
</script>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
 .progress-circle
 position: relative
 circle
  stroke-width: 0.16rem
  transform-origin: center
  &.progress-background
  transform: scale(0.9)
  stroke: rgba(255, 205, 49, 0.5)
  &.progress-bar
  transform: scale(0.9) rotate(-90deg)
  stroke: #ffcd32
</style>

本组件没有使用本地资源,可直接只用,在父组件中导入并注册后,调用组件。
父组件DOM结构:

<div class="control">
 <progress-circle :radius="radius" :percent="percent">
  <i @click.stop="togglePlaying" class="icon-mini" :class="iconMiniPlay"></i>
 </progress-circle>
</div>

解释:其中<i></i>中引用的是制作的css图标(播放/暂停按钮),通过iconMiniPlay决定展现是播放按钮还是暂停按钮(本例子只介绍原型进图条组件的开发和使用,因此不多介绍),设置图标的大小务必注意与radius一致,不明白为什么的话建议尝试一下,实践出真知噢。

需要像组件传入的参数:

svg圈圈大小radius以及歌曲播放进度百分比percent,两个数据来源:

vue2.0+SVG实现音乐播放圆形进度条组件

解释:

percent通过audio标签的currentTime获取,duration为接口获取的当前歌曲总长度,相除则为当前进度百分比。

radius可根据自身开发时所需规格设置(其他布局、样式之类的也是)

父组件样式(本人使用stylus):

.control
 position absolute
 top 0.35rem
 right 1rem
 color $color-theme-d
 .icon-mini
 font-size: 0.64rem
 position: absolute
 left: 0
 top: 0

最近可以变听歌边开发了。

开发完并运用此组件,设置适当的布局、样式后的效果:

vue2.0+SVG实现音乐播放圆形进度条组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
react组件基本用法示例小结
Apr 27 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 #Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
vue实现文件上传读取及下载功能
Nov 17 #Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 #Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 #Javascript
Vue使用NProgress进度条的方法
Sep 21 #Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue视图不更新情况详解
2019/05/16 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python解析xml简单示例
2019/06/21 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
教师自我鉴定
2013/12/13 职场文书
超级搞笑检讨书
2014/01/15 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
被告答辩状范文
2015/05/22 职场文书