1

我想用Animejs在三角形中画一个三角形。三角形应该画得很慢。可悲的是，在三角形开始绘制并且三角形的一侧丢失之前，我得到了很长的延迟。

我的三角形svg：

<div id="lineDrawing"> <svg viewBox="0 0 280 100">
  <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="8" class="lines">
    <path d="m 29.188247,410.49128 338.094613,0 L 198.23555,47.968205 29.188247,410.49128 Z" stroke-dasharray="300" style="stroke-dashoffset: 316.855px;">

  </g>
</svg> </div>

我的js：

    anime({
  targets: '#lineDrawing path',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 80000,
  delay: 0,
  direction: 'alternate',
  loop: true
});

最后，我想让它看起来像一个角三角形。抱歉，有任何糟糕的 js、css 或 html 错误。我是网页设计的新手。 https://youtu.be/JTNgpQWcDIA?t=1m1s

4

1 回答 1

1

大多数情况下，您的 SVG 三角形似乎超出了 viewBox 的范围。不可见的部分也是动画的，所以看起来什么都没有发生。

于 2017-11-07T19:04:47.557 回答