1.目標(biāo)

實(shí)現(xiàn)一個(gè)環(huán)形倒計(jì)時(shí)的動(dòng)畫(huà)。

2.具體操作

2.1 畫(huà)一個(gè)環(huán)形

上代碼：

    <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的大小，因?yàn)閣idth和height沒(méi)有帶單位，那么svg的大小就是：80像素x80像素。
<circle class="outer" cx="50%" cy="50%" r="42.5%"/>
在svg里面，circle是眾多svg元素的一個(gè)。類(lèi)似的還有rect、text等等。
想知道更多的svg元素，可以打開(kāi)這個(gè)鏈接。
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
現(xiàn)在具體說(shuō)說(shuō)circle這個(gè)元素。
cx、cy指的是圓心所在的位置。r指的就是半徑的長(zhǎng)度。
circle更多的解釋?zhuān)梢圆榭矗?br> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
僅僅指定了圓心、半徑、顏色畫(huà)出來(lái)的是實(shí)心圓，不是圓環(huán)。
這個(gè)時(shí)候需要將圓的填充色改為透明的。
fill: transparent;
這樣改了之后，圓就不可見(jiàn)了。這時(shí)就需要設(shè)置邊框了。
這個(gè)時(shí)候就需要使用svg的stoke相關(guān)屬性了。stroke可以理解為“筆畫(huà)”。
stroke: 指定stroke的顏色。
stroke-width: 指定stroke的寬度。
stroke-dasharray: 指定stroke的實(shí)線和虛線的長(zhǎng)度。我在這里只用了一個(gè)值，表示的是實(shí)線的長(zhǎng)度是352，虛線的長(zhǎng)度也是352.但是圓環(huán)的周長(zhǎng)沒(méi)有超過(guò)352，看起來(lái)就都是實(shí)線。
stroke-dashoffset: 指定stroke的偏移值。
有關(guān)stroke更多的解釋?zhuān)榭聪旅娴牟┛停?br> 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 讓環(huán)形動(dòng)起來(lái)

    <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)"
這樣只是讓圓環(huán)旋轉(zhuǎn)90度。

2.3 讓環(huán)形兩端變成圓角

讓圓環(huán)兩端加上圓角，只需要設(shè)置屬性stroke-linecap: round;就行了

2.4 讓環(huán)形從純色變?yōu)闈u變色

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

同時(shí)去掉樣式outer中的stroke: #FD8B37;

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

2.4.1 代碼分析

defs也是svg的元素。是來(lái)定義復(fù)用標(biāo)簽的。
linearGradient是定義的一個(gè)漸變色。
更多l(xiāng)inearGradient的解釋查看：
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>

定義的是開(kāi)始和結(jié)束的漸變色。

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