使用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致力于核心中间件...踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
更多...