svg路径笔划动画无限

svg path stroke animation infinite

本文关键字：动画 无限 路径 svg      更新时间：2023-09-26

例如，我有一个svg路径，它看起来像一个圆。我不止一次尝试通过使用for循环来制作它的动画。但它不起作用。这是我用来设置笔划动画的javascript。

var loading = function() {
    path = new Array();
    length = new Array();
    path[0] = document.getElementById('loader1');
   length = path[0].getTotalLength();
   path[0].style.transition = path[0].style.WebkitTransition = 'none';
   length[0] = length;
   path[0].style.strokeDasharray = length + ' ' + length;
   path[0].style.strokeDashoffset = length;
   path[0].getBoundingClientRect();
   path[0].style.transition = path[0].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
   path[0].style.strokeDashoffset = '0';
};
loading();

我想让它像一个gif一样一直动画化。如果有人能帮忙，我将不胜感激！

这是一个例子http://jsfiddle.net/6Lqkc2qs/

转换只能在两种样式之间进行。你需要一个CSS动画，而不是一个过渡。

.container
    {
        position:absolute;
        width:500px;
        height:500px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
@keyframes changedash {
  from {
    stroke-dashoffset: 502.7825622558594px;
    stroke-dasharray: 502.7825622558594 502.7825622558594;
  }
  to {
    stroke-dashoffset: 0px;
    stroke-dasharray: 502.7825622558594 502.7825622558594;
  }
}
path {
  animation-duration: 1s;
  animation-name: changedash;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="650px" height="650px" viewBox="0 0 650 650" enable-background="new 0 0 650 650" xml:space="preserve">
			<path id="loader1" style="fill:none;stroke:#37c280;stroke-width:2;stroke-miterlimit:10;" d="M364.088,203.794c-15.126,2.056-30.18,9.004-44.175,14.744
	c-12.281,5.037-21.834,12.462-30.789,22.188c-24.832,26.97-19.915,68.42,2.081,96.419c28.676,36.505,100.901,36.35,126.027-4.641
	c14.806-24.154,17.992-67.197,0.505-90.905c-16.543-22.427-38.719-29.067-62.473-34.865" style="stroke-dasharray: 502.7825622558594 502.7825622558594; stroke-dashoffset: 502.7825622558594px;"/>
</svg>
</div>

相关文章：