svg动画字母按字母填写vivus.js

Question

我的目标是使这个笔迹看起来尽可能自然，就像用钢笔写的一样。

我认为最好的选择是在每封信写完后填写它们，但到目前为止，我所做的只是在整个动画完成后使用：

      $('path').attr('style', 'fill:white');

在每个字母都完成动画之后，我该如何做到这一点，或者是否有人有更好的选择？以下是未填充的状态：

https://codepen.io/anon/pen/WjBeWG

Answer 1

这花了我一段时间，但我终于有了答案.

1)删除所有硬编码到SVG代码中的fill:none

2)在CSS中添加：

path {
  transition: 1s fill;
  fill: transparent;//transparent is animatable, "none" isn't
}

3)将其添加到jQuery中：

//Target each of the paths
$("svg path").each(function(i){
  var path = $(this);//Store the element (setTimeout doesn't have access to $(this)...
  setTimeout(function(){
    path.css("fill", "white");
  }, 400 + 400*i);//Add a delay based on the path's index

});
//The following is only necessary to reset on the "click" event...
$(document).click(function(){
  $("path").css({"fill":"black"});
  $("svg path").each(function(i){
  var path = $(this);
  setTimeout(function(){
    path.css("fill", "white");
  }, 400 + 400*i);

});

下面是我的CodePen上的一个例子：

124/pen/aWrbQg?editors=0010