SVG笔画动画增加长度

Question

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

想法：动画一个SVG笔画，使它以长度0（一个等于路径总长度的dashOffset）开头，所以没有呈现任何内容。然后，逐步减小Dashoff集，直到显示出整个SVG笔画。到目前为止，没有问题，这是一个相当普遍的效果，事实上。但我想额外加点：笔画的“起点”也必须逐渐抵消，才能达到笔下的效果。

具体要求是笔画可以两次通过起点，并且笔画长度在第二次通过起点时达到100%，就像笔画中的笔画一样（不是用预射线）。

我实现的方式：写下来相当复杂。你可以探索钢笔，亲眼看看我做了什么。为了更好地理解，您可以将ID为layer_3的SVG的笔划颜色编辑为不同于白色和黑色的颜色，以便可视化动画是如何触发的。不过，我还是试着解释一下：

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

这是一个非常无效的解决方案，但它很好地说明了我要实现的目标。

问题是：有没有办法达到这样的效果？使行程随着行程的增大而在路径上移动，直到行程达到完整的路径长度？

不过，我可能会沿着dashOffset动画使用TweenMax(GSAP)尝试将SVG路径从单个锚点逐渐变形为完全构造的路径，并使dashOffset动画从减.getTotallength()开始，直到0。但是变形效果并不是真正需要的，更像是一个切片函数，它接受一个锚点，并添加更多锚点（跟随路径数据），直到路径变成一个封闭形状。但是，我再一次没有找到关于这种影响的资料。

也许我正面临SVG的限制。但是，如果谁有一个想法或知道一个网站，在那里描述了这种效果，请让我知道。

Answer 1

只需要一个SVG就可以完成。IMO，最简单的方法可能是忘记破折号偏移量和动画破折号数组。

由于动画的一部分，您需要一个

gap - stroke - gap

您需要使用一个有四个值的dasharray（笔画间隙笔画间隙）。

.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>