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

Vue2.0 SVG实现了音乐播放的圆形进度条组件，并引入实时百分比来实现圆形进度的动画效果

需求分析：

与大多数音乐播放器中的迷你播放器控制按钮类似，它显示播放进度并实时更新进度。

Progress-circle.vue源代码：

模板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='透明'/circle class=' progress-bar ' r=' 50 ' CX='PI * 100 } }，computed : { dash offset(){ return(1-this . percent)* this . dash array } }/脚本样式作用域lang=“手写笔”rel=“样式表/手写笔”。进度-圆形位置：相对圆形笔划-宽度： 0.16rem变换-原点：中心。进度-背景转换：标度(0.9) stroke:rgba (255，205，49，0.5)。progress-bartransform : scale(0.9)rotate(-90 deg)stroke : # ffcd 32/style此组件不使用本地资源，可以直接使用。在父组件中导入并注册后，称为父组件DOM结构：

div class=' control ' progress-circle : radius=' radius ' : percent=' percent ' I @ click . stop=' toggle playing ' class=' icon-mini ' : class=' iconMiniPla Y '/I/progress-circle/div说明：i/i指制作的css图标(播放/暂停按钮)，通过iconMiniPla Y决定是显示播放按钮还是暂停按钮(本例仅介绍原型画线栏组件的开发和使用，因此不做介绍)。图标的大小必须与半径一致。不知道为什么，建议试试，实践给你真知识。

传入类似组件的参数是必需的：

Svg圆圈大小半径和歌曲播放进度百分比是两个数据源：

解释一下：

百分比是通过音频标签的currentTime获得的，duration是界面获得的当前歌曲的总长度，division是当前进度百分比。

半径可以根据自己的规格(其他布局、样式等)进行设置。)

父组件样式(我使用手写笔):控制位置绝对top 0.35 rem right 1 rem color $ color-theme-d . icon-mini font-size 3360 0.64 rem位置：绝对左： 0 top : 0最近一边听歌一边可以开发。

开发并应用此组件后，设置适当的布局和样式后的效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。