使用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
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
HTTP/2背景和新特性简介
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...