SVG笔划动画增加长度

Question

我一直在整个互联网上搜索（未成功）如何实现特定的 SVG 路径动画。我重新使用了 Chris Coyier 的代码笔，来自他的 CSS 技巧文章。在我编辑的版本中，我达到了想要的效果，但是非常粗略，是一种非常"hack-through"的方法，肯定效率不高。

笔：https://codepen.io/anon/pen/zEZpPK（可视化Chrome）

想法： 为 SVG 描边设置动画，使其从长度 0 开始（dashOffset 等于路径总长度），因此不会渲染任何内容。然后，逐渐减小 dashOffset，直到显示整个 SVG 笔画。到目前为止，没有问题，这实际上是一种很常见的效果。但我想补充一点：笔画的"Starting point"也必须逐渐偏移，才能达到钢笔的效果。

具体要求是笔划可以两次通过起点，并且笔划长度在第二次通过起点时达到 100%，就像在笔.

我的实现方式：写起来比较复杂。您可以探索 Pen 并亲眼看看我做了什么。也许为了更好地理解，您可以将 ID 为 Layer_3 的 SVG 的描边颜色编辑为不同于白色和黑色的颜色，以可视化动画是如何触发的。但是，我会尝试解释一下：

我复制了原始 SVG 并在 HTML 文件中粘贴了两次，因此文档中有 3 个 SVG，一个在另一个之上。中间的一个，有一个白色的笔划，另外两个有一个黑色的笔划。第二个 SVG，中间那个，动画持续时间是第一个 SVG 的两倍。然后，第三个 SVG 动画的持续时间与第一个相同，但它的动画延迟与第一个动画完成时间的长度相同。

这是一个非常低效的解决方案，但它可以很好地说明我正在努力实现的目标。

问题：请问有什么方法可以达到这样的效果吗？让笔画随着尺寸的增加而在路径上移动，直到达到完整路径长度？

虽然我可能会沿着 dashOffset 动画使用 TweenMax (GSAP) 尝试将 SVG 路径从单个锚点逐渐变形为完全构建的路径，并让 dashOffset 动画从 minus .getTotalLength() 开始，向上到，零。但是变形效果并不是真正需要的，更像是一个切片函数，它采用单个锚点并添加更多锚点（跟随路径数据）直到路径变成闭合形状。但是同样，我没有找到关于这种效果的信息。

也许我遇到了 SVG 的限制。但是，如果有人知道或知道描述这种效果的网站，请告诉我。

Answer 1

一张SVG就可以搞定。在我看来，最简单的方法可能就是忘记破折号偏移量并为破折号数组设置动画。

由于动画的中途，您需要一个数组

gap - stroke - gap

您需要使用具有四个值的破折号数组（stroke gap stroke gap）。

请注意，在破折号数组中使用与路径长度匹配的值也很重要。在你的例子中，你的路径长度是 821.6。所以为了简单起见，我使用了 822 的值 - 这已经足够接近了。

.path1 {
  stroke-dasharray: 0;
  animation: dash 5s linear;
}
/* 821.6 */

@keyframes dash {
  0% {
    stroke-dasharray: 0 0 0 822;
  }
  25% {
    stroke-dasharray: 0 205.5 205.5 822;
  }
  50% {
    stroke-dasharray: 0 411 411 822;
  }
  75% {
    stroke-dasharray: 411 205.5 822 822;
  }
  100% {
    stroke-dasharray: 822 0 822 822;
  }
}

<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="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path1" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
 s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
 C46.039,146.545,53.039,128.545,66.039,133.545z"/> 
  
</svg>

SVG笔划动画增加长度

SVG stroke animation increase length

html

animation

svg

path

stroke