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 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
angular异步验证器防抖实例详解
Mar 31 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
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
理解javascript异步编程
2016/01/27 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
js实现点击生成随机div
2020/01/16 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
virtualenv实现多个版本Python共存
2017/08/21 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
降低python版本的操作方法
2020/09/11 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
大学生学年自我鉴定
2014/02/10 职场文书
教师党员整改措施
2014/10/24 职场文书
先进工作者个人总结
2015/02/15 职场文书
百年孤独读书笔记
2015/06/29 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
java解析XML详解
2021/07/09 Java/Android
MySQL时区造成时差问题
2022/04/13 MySQL