svg动画(二)

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;
    }
}

最后的效果图：

屏幕快照 2018-05-08 下午5.01.23.png

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;

屏幕快照 2018-05-08 下午5.42.51.png

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;
    }
  }