vue2.0+SVG实现音乐播放圆形进度条组件_vue.js_脚本之家

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://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRfkFRDLFRPAFRcsFRf1FRDzFRf1FRNAFRcYFRf1FRnkFRR1FRFAFR7KFRPKFRFjFhkdpvbqniuVmLKV5H6LnjcvFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHYLnvP-n1K9uf&besl=-1&c=news&cf=5&cvrq=2302761&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=694&img_typ=22630&itm=0&lu_idc=tc&lukid=1&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=2001954766&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "学习英语从零开始")

[

可视化工具

](https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRFAFRn4FRPKFRf1FRFaFR7AFRc4FRDYFRF7FRwAFhkdpvbqnBuVmLKV5Hmzn1nYFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHdWuHIbrj99mf&besl=-1&c=news&cf=5&cvrq=684991&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=269&img_typ=22626&itm=0&lu_idc=tc&lukid=2&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=2001330449&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "可视化工具")

[

穿墙热成像仪

](https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRcYFRD4FRnLFRFDFRn3FRn3FRc1FRn4FRPAFRmkFRfzFRnLFhkdpvbqnzuVmLKV5Hcsrj0vFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHYsPhn4uhw9mf&besl=-1&c=news&cf=5&cvrq=2446608&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=231&img_typ=22630&itm=0&lu_idc=tc&lukid=3&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=30196218&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "穿墙热成像仪")

[

免费永久云主机

](https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRn1FRRzFRcLFRfkFRf1FRnsFRF7FRn1FRfYFRnvFRfvFRmLFRFaFRuKFhkdpvbqPauVmLKV5HRknWcYFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHdWmHDsPyR4n6&besl=-1&c=news&cf=5&cvrq=3503910&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=811&img_typ=22630&itm=0&lu_idc=tc&lukid=4&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=2007684792&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "免费永久云主机")

[

伯克利音乐学院

](https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRczFR77FRFAFRPaFRnsFRuaFRfzFRmYFRnsFRfvFRfkFRDLFRfYFRFKFhkdpvbqPiuVmLKV5Hm3PHcLFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHdBPvPWPWI-rf&besl=-1&c=news&cf=5&cvrq=8452080&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=509&img_typ=6758&itm=0&lu_idc=tc&lukid=5&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=908762&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "伯克利音乐学院")

[

可视化管理系统

](https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1Y3uAnvrj03mvcsmvm3nHmzFh_qFRFAFRn4FRPKFRf1FRFaFR7AFRc4FRwjFRnsFRNDFRPAFRcdFRPDFRc1FhkdpvbqPBuVmLKV5HRdP1bkFMDqphcdnNqWTZchThcqnauzT1YkFMP-UAk-T-qGujYkFMPGujYvnW6kmvuBnj9WrjKWPW9bFMPYpyfqnHDdFMfqIZKWUA-WpvNbndqCmzuYujYYrjfvP1bsFMwVT1YkPH6YPHnYnHf4FMwd5gRYrjfvP1bsFMRqpZwYTZn-nYD-nbm-nbuLILT-nbNJmWRkFHF7UhNYFMNGUy-b5HRdrHDsrHfsPauv5HchpHd9uhnYn1wbrf&besl=-1&c=news&cf=5&cvrq=904763&eid_list=106590_207837&expid=200352_201524_203317_205409_205456_205935_206512_207837&fr=4&fv=0&haacp=214&img_typ=22562&itm=0&lu_idc=tc&lukid=6&lus=6281cfb08c80c68d&lust=5e721285&mscf=0&mtids=2015669389&n=10&nttp=1&p=baidu&sce=7&sr=93&ssp2=1&tpl=baiduCustNativeADImageTxt_1&tsf=dtp:1&u=%2Farticle%2F170547%2Ehtm&uicf=lurecv&urlid=0&eot=1 "可视化管理系统")

 

反馈意见:

视觉干扰内容不宜不感兴趣其他原因返回

感谢您的反馈!

您的反馈已记录,我们将努力改善您的浏览体验。

原文链接:https://blog.csdn.net/Fabulous1111/article/details/79070292

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你


Original url: Access
Created at: 2020-03-18 20:23:11
Category: default
Tags: none

请先后发表评论
  • 最新评论
  • 总共0条评论