html svg生成環形進度條的實現方法

  發布時間:2019-09-23 15:41:36   作者:樊一   我要評論

這篇文章主要介紹了html svg生成環形進度條的實現方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

之前在項目中遇到一個環形進度條的需求,要求能實時更新進度,腦海中瞬間便蹦出css,svg,canvas3中方案,對于3種方案個人更偏向于svg,用法簡單,代碼量也很少,同時也便于實時控制。具體效果如下圖:

代碼非常簡單:

<svg width="150px" height="150px" class="svg">
    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />
</svg>

為了便于演示,我們先用css動畫控制:

svg {
    transform: rotate(-90deg);
}
.progress {
    animation: rotate 1500ms linear both;
}
@keyframes rotate {
    from {
        stroke-dashoffset: 471px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

實現原理

實現原理非常簡單,就是應用svg的stroke-dashoffset和stroke-dasharray屬性。

stroke-dasharray

官方解釋為可控制用來描邊的點劃線的圖案范式,即定義虛線每段長度即虛線間間隔,數與數之間用逗號或者空白隔開,指定短劃線和缺口的長度。如果提供了奇數個值,則這個值的數列重復一次,從而變成偶數個值。

stroke-dashoffset

標識的是整個路徑的偏移值。

通過控制虛線的間隔與偏移值,便可以行程各種各樣的線條動畫,當然我們還可以通過js控制,如下:

let path = document.querySelector('#path');
// 可獲取路徑的長度
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

北京pk赛车人工计划软件手机版