Anime.js 中的线条绘制 svg 长时间延迟和线条缺失答案

【问题标题】：Line draw svg in Anime.js long delay and line missingAnime.js 中的线条绘制 svg 长时间延迟和线条缺失
【发布时间】：2017-10-03 20:08:19
【问题描述】：

我想用 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

【问题讨论】：

标签： animation svg line-drawing anime.js

【解决方案1】：

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

【讨论】：