1.目标
实现一个环形倒计时的动画。
2.具体操作
2.1 画一个环形
上代码：
<figure class="chart" >
<svg width="80" height="80">
<circle class="outer" cx="50%" cy="50%" r="42.5%"/>
</svg>
</figure>
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
height: 80px;
width: 80px;
.outer {
fill: transparent;
stroke: #FD8B37;
stroke-width: 6;
stroke-dasharray: 352;
stroke-dashoffset: 0;
}
}
最后的效果图：
2.1.1 代码分析
<svg width="80" height="80">
指定了svg的大小，因为width和height没有带单位，那么svg的大小就是：80像素x80像素。
<circle class="outer" cx="50%" cy="50%" r="42.5%"/>
在svg里面，circle是众多svg元素的一个。类似的还有rect、text等等。
想知道更多的svg元素，可以打开这个链接。
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
现在具体说说circle这个元素。
cx、cy指的是圆心所在的位置。r指的就是半径的长度。
circle更多的解释，可以查看：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
仅仅指定了圆心、半径、颜色画出来的是实心圆，不是圆环。
这个时候需要将圆的填充色改为透明的。
fill: transparent;
这样改了之后，圆就不可见了。这时就需要设置边框了。
这个时候就需要使用svg的stoke相关属性了。stroke可以理解为“笔画”。
stroke: 指定stroke的颜色。
stroke-width: 指定stroke的宽度。
stroke-dasharray: 指定stroke的实线和虚线的长度。我在这里只用了一个值，表示的是实线的长度是352，虚线的长度也是352.但是圆环的周长没有超过352，看起来就都是实线。
stroke-dashoffset: 指定stroke的偏移值。
有关stroke更多的解释，查看下面的博客：
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
2.2 让环形动起来
<figure class="chart" >
<svg width="80" height="80">
<circle class="outer circle-anim" cx="50%" cy="50%" r="42.5%" transform="rotate(-90, 40, 40)"/>
</svg>
</figure>
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
height: 80px;
width: 80px;
.outer {
z-index: 1000;
fill: transparent;
stroke: #FD8B37;
stroke-width: 6;
stroke-dasharray: 352;
stroke-dashoffset: 0;
stroke-linecap: round;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.circle-anim {
animation-timing-function:linear;
-webkit-animation: show100 5s;
animation: show100 5s;
}
}
@-webkit-keyframes show100 {
from {
stroke-dashoffset: 352;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes show100 {
from {
stroke-dashoffset: 352;
}
to {
stroke-dashoffset: 0;
}
}
2.2.1 代码分析
transform="rotate(-90, 40, 40)"
这样只是让圆环旋转90度。
2.3 让环形两端变成圆角
让圆环两端加上圆角，只需要设置属性stroke-linecap: round;就行了
2.4 让环形从纯色变为渐变色
<figure class="chart" >
<svg width="80" height="80">
<defs>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient3">
<stop offset="0%" stop-color="#e52c5c"></stop>
<stop offset="100%" stop-color="#ab5aea"></stop>
</linearGradient>
</defs>
<circle class="outer circle-anim" cx="50%" cy="50%" r="42.5%" stroke="url('#gradient3')" transform="rotate(-90, 40, 40)"/>
</svg>
</figure>
同时去掉样式outer中的stroke: #FD8B37;
2.4.1 代码分析
defs也是svg的元素。是来定义复用标签的。
linearGradient是定义的一个渐变色。
更多linearGradient的解释查看：
http://www.w3school.com.cn/svg/svg_grad_linear.asp
https://blog.csdn.net/chy555chy/article/details/53415770
x1="1" y1="0" x2="0" y2="0"表示水平渐变。
<stop offset="0%" stop-color="#e52c5c"></stop>
<stop offset="100%" stop-color="#ab5aea"></stop>
定义的是开始和结束的渐变色。
3.最后的代码
<figure class="chart" >
<svg width="80" height="80">
<defs>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient3">
<stop offset="0%" stop-color="#e52c5c"></stop>
<stop offset="100%" stop-color="#ab5aea"></stop>
</linearGradient>
</defs>
<circle class="outer circle-anim" cx="50%" cy="50%" r="42.5%" stroke="url('#gradient3')" transform="rotate(-90, 40, 40)"/>
</svg>
</figure>
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
height: 80px;
width: 80px;
.outer {
z-index: 1000;
fill: transparent;
// stroke: #FD8B37;
stroke-width: 6;
stroke-dasharray: 352;
stroke-dashoffset: 0;
stroke-linecap: round;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.circle-anim {
animation-timing-function:linear;
-webkit-animation: show100 10s;
animation: show100 10s;
}
}
@-webkit-keyframes show100 {
from {
stroke-dashoffset: 352;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes show100 {
from {
stroke-dashoffset: 352;
}
to {
stroke-dashoffset: 0;
}
}
