如何用SVG写一个环形进度条以及动画
本次案例主要使用了svg的三个元素,分别为circle
、text
、path
,关于svg的介绍大家可以看MDN上的相关教程,传送门
由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动画啦,这次案例以vue来做数据交互
svg的viewBox
viewBox属性定义了画布上可以显示的区域,viewBox有4个值,值1为svg窗口起点显示的x坐标,值2位svg窗口起点的y坐标, 后面的两个分别为显示的大小; 平常可以通过后面这两个值对svg图形进行放大和缩小, 前面的两个值进行窗口位置的变换
在demo中为了方便计算svg元素的中心,我设置为(0, 0) 即圆的坐标方程满足 x^2 + y^2 = r^2
circle元素
circle元素在svg中可以画一个圆,主要属性为cx(圆心x坐标)、cy(圆心y左边)、r(圆的半径)
text元素
svg中显示字体的元素,text-anchor、dominant-baseline分别可以设置字体的左右、上线对齐方式
path元素
svg中所有的基本元素都可以通过path路径画出来,该元素只有一个属性d,动画的效果就是通过不断改变d的值来达到的;
在这里只需要掌握d的A命令即可,传送门
效果图以及代码
<div id="app">
<svg width="100" height="100" viewBox="-50 -50 100 100">
<circle cx="0" cy="0" stroke-width="6" fill="none" stroke="#ddd" :r="r"/>
<path :d="d" fill="none" stroke-width="6" stroke="#369"/>
<text text-anchor="middle" dominant-baseline="middle">{{ ratio }}%</text>
</svg>
</div>
new Vue({
el: '#app',
data: {
ratio: 1,
r: 47
},
computed: {
d() {
const { ratio } = this
return this.getD(ratio)
}
},
methods: {
getD(ratio) {
if (ratio >= 100) {
ratio = 99.999
}
const angle = Math.PI / 50 * ratio
const r = this.r
const x = r * Math.cos(angle)
const y = -r * Math.sin(angle)
const isBigAngle = Number(ratio > 50)
return `M 47 0 A 47 47 0 ${isBigAngle} 0 ${x} ${y}`
}
},
mounted() {
let timer = setInterval(() => {
if (this.ratio > 100) {
this.ratio = 100
clearInterval(timer)
timer = null
return
}
this.ratio += 1
}, 16)
}
})
ps:第一次写博客,发现表达能力真的好差;
如何用SVG写一个环形进度条以及动画的更多相关文章
- 用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆 <path d=" M cx cy m 0 -r a r r 0 1 ...
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- [Xcode 实际操作]四、常用控件-(12)环形进度条控件的使用
目录:[Swift]Xcode实际操作 本文将演示环形进度条控件的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vi ...
- [Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
- 基于svg的环形进度条
其实需求是这么一个基于日期的环形进度条,开始用css3写了一下感觉太麻烦了,于是抽了点时间用svg画了一个. 不多说 上代码: css: <style> circle { -webkit- ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- iOS带动画的环形进度条(进度条和数字同步)
本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...
随机推荐
- dubbo之事件通知
事件通知 在调用之前.调用之后.出现异常时,会触发 oninvoke.onreturn.onthrow 三个事件,可以配置当事件发生时,通知哪个类的哪个方法 1. 服务提供者与消费者共享服务接口 in ...
- eclipse快捷键:
打开快捷键提示: ctrl + shift + L; 自动补全代码: Alt + /; 快速修复: ctrl + 1; 导包: ctrl + shift + o; 格式化代码: ctrl + shif ...
- 来源页面地址 上一页面url
Uri uri = Request.UrlReferrer;
- nginx_安装测试
首先安装环境: [root@local nginx-1.9.14]# yum install gcc-c++ pcre pcre-devel zlib zlib-devel openssl op ...
- Linux 帮助与语言设置以及(\)
1.命令太长可以用反斜杠(\)来转义回车键,使用命令连续到下一行.注意:反斜杠后就立刻接着特殊字符才能转义. 2.修改语系为英文 LANG=en_US.utf8 export LC ALL=en_US ...
- Bem命名
BEM思想 1. 什么是BEM: BEM:(Block块,Element元素,Modifier修饰符)一种命名规范, 其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开 ...
- js-undefinde的一点延伸
前面写过一篇js中变量定义的问题:Js中判断变量存不存在的问题 本文再补充下,变量声明未初始化的情况,代码: <script> var a; alert(a==undefined)//tr ...
- PAT_A1072#Gas Station
Source: PAT A1072 Gas Station (30 分) Description: A gas station has to be built at such a location t ...
- AtCoder Grand Contest 021完整题解
提示:如果公式挂了请多刷新几次,MathJex的公式渲染速度并不是那么理想. 总的来说,还是自己太弱了啊.只做了T1,还WA了两发.今天还有一场CodeForces,晚上0点qwq... 题解还是要好 ...
- 搭建rsync服务(端口号873)
rsync详细参数 1.-v,--verbose 详细模式输出,传输是的进度信息 2.-z,--compress 传输是进行压缩以提高传输效率,--comperess -level = NUM可以按级 ...