Question

我的目标是尝试让这种笔迹看起来尽可能自然，就好像用笔书写一样。

我认为最好的选择是在他们写完之后填写每个字母，但到目前为止我所做的只是在整个动画完成后填写：

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

在每封信完成动画后，或者有没有更好的选择，我将如何实现这一目标？这是未填充状态：

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

Answer 1

这花了我一段时间才得到，但我终于有了答案......
1）将所有fill:none硬编码删除到SVG代码中
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示例：
https://codepen.io/jacob_124/pen/aWrbQg?editors=0010

svg动画逐字母填写vivus.js

1 个答案: