Question

我有一个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/

Answer 1

过渡只能在两种风格之间进行。你需要一个CSS动画而不是过渡。

＆＃13;

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

＆＃13;

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

＆＃13;

svg路径描边动画无限

1 个答案: