Question

我想在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
});

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

Answer 1

你的SVG三角形似乎远远超出了viewBox。隐形部分也是动画的，所以似乎没有任何事情发生。

在Anime.js中画线svg长延迟和线丢失

1 个答案: