使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。
有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG。本文介绍如何使用SVG结合CSS3来实现。
在阅读本文之前,你最好先了解SVG的基本知识。预期结果如下图所示:
1. 首先我们需要创建一个灰色的背景圆形,用来限定进度条显示范围
下面的代码创建了一个半径为90,圆心居中,宽度为3,颜色为#333的圆形元素:
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg"> <circle r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/></svg>
2. 第二步我们添加一个圆形进度条,表示当前进度
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg"> <circle id="backdrop" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/> <circle id="progress" r="90" cy="120" cx="120" stroke-width="4" stroke="red" fill="none"/></svg>
现在我们有2个圆形,一个是背景圆形,一个表示当前进度的填充圆形,默认情况填充为100%。那么接下来我们要做的是修改填充的百分比。
3. 设置圆形填充百分比
SVG元素有两个画笔属性 stroke-dasharray
和 stroke-dashoffset
,前者是用来定义画笔线型(stroke pattern),后者定义线型起始点位置。这两个属性可以用来构造很多的图形效果(尤其是虚线),在这里我们使用其中一个特例,即无间隔的单个线条填充。填满整个圆周的长度为2*3.14*90 = 565.2(圆周长计算公式为Circumstance =2*PI*Radius),然后起点也设置为565.2,这样实际获得的效果就是整个线条被完全“挤到”了背景圆形外面,对应的是进度为0的情况,而如果把起点设置为0,则对应的进度为100%。以此类推中间进度。如果我们把svg图形的宽高(即当前viewport)也设置为565.2,那么我们可以简化为使用百分比来表示相应的进度:
#progress { // 起点偏移100%对应0%的进度 stroke-dasharray: 565.2或100%; stroke-dashoffset: 565.2或100%;}
#progress { stroke-dasharray: 100px; stroke-dashoffset: 100px; animation: progressAnimation 600ms linear infinite;} @keyframes progressAnimation { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 300px; }}
然后我们可以给它加点动画,如上所示。
最后我们可能注意到圆形填充的起点在3点位置,而我们一般应该以12点为起点,所以我们还需要给图形加上逆时针90°的旋转。
简单版本:http://wow.techbrood.com/fiddle/29906
完整版本(包含中间的文本和一些渐变动画):http://wow.techbrood.com/fiddle/25378
- 相关文章
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
HTTP/2背景和新特性简介
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...