如何獲得動畫SVG以便更快地開始“繪制自身”？

Question

我正在嘗試僅使用html＆css創建加載動畫，看起來像是ekg讀數。 我可以使用它，但是我希望它盡快開始重新繪制（現在它完全消失了，我希望它在完成“取消繪制”之前開始繪制

<head>

    <style>
    body {
  background-color: #fff;
}



.path {
  animation: draw 2.2s infinite ease-in-out;
   -webkit-animation: draw 2.2s infinite ease-in-out;
}


 @keyframes draw {
   from {
    stroke-dashoffset: 1100;
 }
     to { stroke-dashoffset: 50}
}

        @-webkit-keyframes draw {
   from {
    stroke-dashoffset: 1100;
 }
     to { stroke-dashoffset: 50}
}

    </style>
    </head>
<div class="bg">  
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">

  <path class="path" stroke="#ca6728" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="610" fill="none" d="M0,80.9h20.6c0.5,0,1.4-0.2,1.8-0.5L38,70.1
        c0.5-0.3,1.2-0.3,1.6,0l12.7,9.4c0.4,0.3,1.3,0.6,1.8,0.6l13.3,0c0.6,0,1.2,0.4,1.5,0.9l6.2,11.3c0.3,0.5,0.5,0.4,0.5-0.1l4.4-90.8
        c0-0.5,0.1-0.5,0.1,0l6.9,102.1c0,0.5,0.2,0.6,0.4,0l7-22.4c0.2-0.5,0.7-1,1.3-1l16.1,0c0.5,0,1.3-0.3,1.8-0.7L129,66.4
        c0.4-0.4,1.1-0.3,1.5,0l13.3,13.1c0.4,0.4,1.2,0.7,1.7,0.7l20.1,0,"/>



  </svg>
</div>

    </html>

JS小提琴在這里： https : //jsfiddle.net/jzvenice/4sLw9ag9/

Answer 1

我認為可以通過使用stroke-dasharray值來實現類似的效果：

https://jsfiddle.net/4sLw9ag9/2/

...

stroke-dasharray="391 300" stroke-dashoffset="0"

....

@keyframes draw {
from {
stroke-dashoffset: 691;
}
to {
stroke-dashoffset: 0}
}

...

只有第一個值是正確的（路徑長度為391像素），使用注釋掉的JavaScript行檢測到了它，並且不需要進一步的功能。 可以根據視覺效果最好調整其他值。

編輯-以前刪除了答案，但似乎比評論更有意義。 因此，不要介意我進行一次小更新就不刪除它。

如何獲得動畫SVG以便更快地開始“繪制自身”？

問題描述

1 個解決方案

解決方案1
0 2015-03-31 23:10:09

如何獲得動畫SVG以便更快地開始“繪制自身”？

問題描述

1 個解決方案

解決方案1 0 2015-03-31 23:10:09

解決方案1
0 2015-03-31 23:10:09