Question

好的伙计这里是我的。我循环遍历折线中的每个破折号，我将其舍入到984，它真的像984并且有些变化。但无论如何我看不到任何动作，我想要的是一致地在折线周围移动的线条。任何人都可以看到为什么这条折线正在移动，因为dashoffset不断被改变。然后我重新启动该功能。有谁知道为什么这个家伙根本不动？拜托，谢谢。我可能真的在捏造它，但是想到Ide，看看我是否能得到另一个输入。

  loop();
  
  function loop(){
    
    var counter = 0;
    var polyline = new Array();
    for(var i = 0; i< 984; i++){
      
      polyline[0] = getElementById('poly');
      
      polyline[0].style.strokeDashoffset = i;
      
    }
    loop();
  }

 <svg id="square" width="900" height="400">
          <polyline id="poly" style="stroke-linejoin: round; fill:none; stroke:black; stroke-width:8;stroke-dasharray:492.44289 492.44289;
  stroke-dashoffset:0;"
 3         points="0,200
                   450,0
                   900,200
                   450,400
                   0,198.4" 
                    />
        </svg>

Answer 1

你那里的无限循环似乎没用。您希望使用requestAnimationFrame而不是直接调用循环，并且循环似乎没有做任何有用的事情（只是将dashoffset设置为最后i值）。但是你甚至不必使用脚本来为笔画设置动画。

<svg viewBox="-8 -8 916 416">
    <polyline points="0,200
                   450,0
                   900,200
                   450,400
                   0,198.4" />
</svg>

和css：

polyline {
    stroke-linejoin: round;
    fill:red;
    stroke:black;
    stroke-width:8;
    stroke-dasharray:492.44289 492.44289;
    stroke-dashoffset:0;
    animation-duration: 1s;
    animation-name: march;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes march {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 492.44289;
    }
    100% {
        stroke-dashoffset: 984.88578;
    }
}

见fiddle。如果你想摆脱丑陋的左手角落，你可以尝试使用多边形而不是折线，比如this。

把我的折线放在无限循环中？

1 个答案: