vue圆形进度条,vue 进度条组件
在一些页面设置进度条效果给人一种很好的体验效果，今天小编教大家某视频剪辑软件圆环百分比进度条组件功能的实现代码，代码超级简单啊，感兴趣的朋友快来看下吧
有需要的人可以参考一下，如果试用过，发现问题，欢迎留言告知，不胜感激。
功能介绍：
1、若页面无刷新，且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画
2、若页面无刷新，且第一次传值大于第二次传值则为执行递减动画
3、中间展示的百分比数字有缓动动画（速度同圆环进度动画一直)
4、动画完成时会触发动画完成回调
5、外部传值为圆环进度百分比（整数),圆环动画速度（整数)
效果如图所示：
模板
div class=percentloop
div class=圆圈-向左
div ref=leftcontent/div
/div
div class=向右圆圈
div ref=rightcontent/div
/div
div class=number
{{ percent }} %
/div
/div
/模板
脚本
导出默认值{
道具：{
百分比数：{
类型：[字符串，数字],
默认值：0
},
速度：{ //建议取值为0-3
类型：[字符串，数字],
默认值：1
}
},
data () {
返回{
百分比：0,
initDeg: 0，
timeId: null，
动画：假
}
},
方法：{
transformToDeg(百分比){
让度数=0
如果（百分比=100) {
度数=360度
}否则{
deg=parseInt(360 *百分比/100)
}
返回度数
},
转换百分比（度)
让百分比=0
如果（度数=360) {
百分比=100
}否则{
percent=parseInt(100 * deg/360)
}
退货百分比
},
旋转升程（度){ //大于180时，执行的动画
这个参考文献。左侧内容。风格。transform= rotate((度-180)度
},
旋转角度（度){ //小于180时，执行的动画
这个参考文献。正确的内容。风格。transform= rotate( deg deg)
},
旋转度（度)
this.animationing=true
this.timeId=setInterval(()={
if (deg this.initDeg) { //递增动画
this.initDeg=Number(this.speed)
if (this.initDeg=180) {
this.rotateLeft(this.initDeg)
这个。旋转器向右(180)//为避免前后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的情况。
}否则{
这个。向右旋转器(这个。initdeg)
}
} else { //递减动画
this.initDeg -=数字(this.speed)
if (this.initDeg=180) {
this.rotateLeft(this.initDeg)
}否则{
this.rotateLeft(180) //为避免前后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的情况。
这个。向右旋转器(这个。initdeg)
}
}
这个。百分比=这个。转换为百分比(这。initdeg)//百分比数据滚动动画
const remainer=Number(deg)-this。initdeg
如果(数学。ABS(remainer)这个。速度){
this.initDeg=remainer
if (this.initDeg 180) {
旋转角度（度)
}否则{
旋转角度（度)
}
this.animationFinished()
}
}, 10)
},
动画完成(){
this.percent=this.percentNum //百分比数据滚动动画
this.animationing=false
clearInterval(this.timeId)
这个emit(animationFinished) //动画完成的回调
}
},
已创建(){
这个。去旋转(这个。transformtodeg(这个。百分比数字))
},
观察：{
percentNum :函数(瓦尔){
如果(this .动画制作)返回
这个。去旋转(这个。transformtodeg(val))
}
}
}
/脚本
样式范围的语言=scss 。百分比循环{
位置：相对；
宽度：100%;
身高：100%;
边界半径：50%;
溢出：隐藏；圆圈-向左，圆圈-右{
位置：绝对；
top:0；
左：0;
宽度：50%;
身高：100%;
背景色：红色；
溢出：隐藏；
部门{
宽度：100%;
身高：100%;
背景色：# 8 A8 a8a
变换-原点：右中心；
/*过渡：全。5s线性；*/
}
}。圆圈-右{
左：50%;
部门{
变换-原点：左中心；
}
}。号码{
位置：绝对；
top:9%；
垫底：9%;
左：9%;
右：9%;
背景色：# fff
边界半径：50%;
溢出：隐藏；
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
颜色：# 000;
}
}
/风格
以上就是某视频剪辑软件圆环百分比进度条组件功能的实现的详细内容，更多关于某视频剪辑软件进度条的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。