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-circleposition: relativecirclestroke-width: 0.16remtransform-origin: center&.progress-backgroundtransform: scale(0.9)stroke: rgba(255, 205, 49, 0.5)&.progress-bartransform: 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,两个数据来源:
解释:
percent通过audio标签的currentTime获取,duration为接口获取的当前歌曲总长度,相除则为当前进度百分比。
radius可根据自身开发时所需规格设置(其他布局、样式之类的也是)
父组件样式(本人使用stylus):
.controlposition absolutetop 0.35remright 1remcolor $color-theme-d.icon-minifont-size: 0.64remposition: absoluteleft: 0top: 0
最近可以变听歌边开发了.....
开发完并运用此组件,设置适当的布局、样式后的效果:
Vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果相关推荐
- 【Flutter 组件系列第 2 篇】CircularProgressIndicator (圆形进度条组件)
这是[Flutter 组件系列第 2 篇],如果觉得有用的话,欢迎关注专栏. 文章目录 一:CircularProgressIndicator 的构造函数 二:基本用法 三:设置进度具体值 四:设置背 ...
- Element穿梭框Transfer与进度条组件绑定
Transfer与进度条组件绑定 文章目录 Transfer与进度条组件绑定 前言 一.实现原理 二.实现流程 三.完整代码 总结 前言 最近做的后台管理系统里使用了Element组件Transfer ...
- 数字进度条组件NumberProgressBar
数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
- vue2.0桌面端框架_vue 专题 vue2.0各大前端移动端ui框架组件展示
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
相关技巧,详见注释 <template><!-- 音乐播放器 --><div class="container"><h2>{{ mu ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
- html的canvas显示数字,HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context ...
最新文章
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
- SpringMVC-RestfulCRUD
- Java 策略模式和状态模式
- 菜鸟教程工具(三)——Maven自己主动部署Tomcat
- bim 骗局_来自建筑行业的BIM骗局
- 关于GHOST恢复提示找不到GHOSTERR.TXT的文件(转)
- 当黑客被抓是种怎样的体验?
- linux-C 重定向句柄操作(dup,duo2,dup3)详解及demo
- 第一次如何选择流量卡,长期套餐和短期套餐哪个好一点?
- 微信小程序完成简单的模仿抖音点赞效果动画wx.createAnimation
- Embedded Linux S3C2440 - QEMU and Graphic
- c语言二级编程实例,二级c语言编程 -实例
- Design Development Workflow with Framer X 使用Framer X进行设计和开发工作流程 Lynda课程中文字幕
- 北京大学计算机学院推免生名单,2014年北京大学软微学院保研录取名单
- 金山打字通2011+免升级
- 2007高校BBS上20个睿智的冷笑话 (转载:csdn论坛;楼主:cuta)
- matlab icwt,Wavelet Toolbox.rar
- sonysrshg2 Android,索尼SRS-HG2蓝牙音箱评测 成为你张扬个性的一部分
- java毕业设计 springboo影视播放在线视频点播系统 springboot毕业设计题目课题选题 springboot毕业设计项目作品源码(4)后台管理系统功能和界面
- 大一女生才学 C,感觉和真正程序员差太远,该怎么学