vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果
需求分析:
类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度。
progress-circle.vue源码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<
`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结构:
1
2
3
4
5
<
`div
class=
"control"`>
<
`progress-circle
:radius=
"radius"
:percent=
"percent"`>
<
`i
@click.stop
="togglePlaying"` `class
="icon-mini"` `:class
="iconMiniPlay"
></i
>`
</
`progress-circle`>
</
`div`>
解释:其中中引用的是制作的css图标(播放/暂停按钮),通过iconMiniPlay决定展现是播放按钮还是暂停按钮(本例子只介绍原型进图条组件的开发和使用,因此不多介绍),设置图标的大小务必注意与radius一致,不明白为什么的话建议尝试一下,实践出真知噢。
需要像组件传入的参数:
svg圈圈大小radius以及歌曲播放进度百分比percent,两个数据来源:
解释:
percent通过audio标签的currentTime获取,duration为接口获取的当前歌曲总长度,相除则为当前进度百分比。
radius可根据自身开发时所需规格设置(其他布局、样式之类的也是)
父组件样式(本人使用stylus):
1
2
3
4
5
6
7
8
9
10
.control
position
absolute
top
0.35
`rem`
right
1
`rem`
color $color-theme-d
.icon-mini
font-size
`:
0.64`rem
position
`:
absolute`
left
`:
0`
top
`:
0`
最近可以变听歌边开发了。
开发完并运用此组件,设置适当的布局、样式后的效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
如您对本文有所疑义或者对本文内容提供补充建议,请联系小编,本站会保留修改者版权
undefined
[
学习英语从零开始
[
可视化工具
[
穿墙热成像仪
[
免费永久云主机
[
伯克利音乐学院
[
可视化管理系统
反馈意见:
您的反馈已记录,我们将努力改善您的浏览体验。
原文链接:https://blog.csdn.net/Fabulous1111/article/details/79070292
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
Original url: Access
Created at: 2020-03-18 20:23:11
Category: default
Tags: none
未标明原创文章均为采集,版权归作者所有,转载无需和我联系,请注明原出处,南摩阿彌陀佛,知识,不只知道,要得到
最新评论