Question

我正在尝试重新创建以下行为，特别是我希望这些字母一次只能出现一个字母，从左到右，就像有人在屏幕上实际写入一样。

我知道svg代码的这一部分是hello：

<path id="fontshape" d="m 250 252 c 0 0 25.833 -21.854 33 -6.59 c 2.244 4.778 -43.583 107.903 -43.583 107.903 s 20.416 -48.943 27.583 -51.667 c 5.042 -1.916 42.333 2.175 53 -3.079 s 31.667 -58.746 31.667 -58.746 s -49.991 106.985 -38.334 113.492 c 14.228 7.941 77.913 -39.622 64.667 -50.334 c -8.667 -7.009 -17.608 4.216 -21 8.334 c -1.747 2.121 -21.333 44.027 2.667 42.014 s 91.817 -93.427 96.306 -103.723 c 4.669 -10.712 1.947 -11.996 -0.639 -12.291 c -11.721 -1.335 -37.539 40.442 -53 103.333 c -3.426 13.935 6.667 17.333 15.333 9.333 s 76.855 -91.35 79 -100.226 c 2.393 -9.902 -7.731 -15.378 -17 0.226 c -11.271 18.976 -36.465 82.571 -36 92.667 c 0.263 5.689 2.403 18.828 15.333 6.667 c 19.894 -18.71 42.666 -47.667 42.666 -47.667 s -21.522 22.389 -22 45 c -0.245 11.592 16.631 5.965 23.274 0.667 c 5.081 -4.052 17.727 -21.334 15.06 -36.667 s -13.334 -10.001 -16.667 1.333 s 5 10 17 8 s 17 -13.666 17 -14.333" fill="none" stroke="none" />

这是动画：

.animatedfont {
fill:none;
stroke:#fff;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:100;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
-webkit-animation: dash 4.9s linear forwards;
-o-animation: dash 4.9s linear forwards;
-moz-animation: dash 4.9s linear forwards;
animation: dash 4.9s linear forwards;
-webkit-animation-play-state: running;
}
@-webkit-keyframes dash {
from {
        stroke-dashoffset: 2000;
}
to {
        stroke-dashoffset: 0;
}

这是我的努力： https://jsbin.com/qelonotoxu/1/edit?html,js,output

和我的动画代码：

<style type="text/css">
.st0{

    fill:none;
    stroke:#000000;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    -webkit-animation: dash 10s linear forwards;
    -o-animation: dash 10s linear forwards;
    -moz-animation: dash 10s linear forwards;
    animation: dash 10s linear forwards;

}

@-webkit-keyframes dash {
    to {
stroke-dashoffset: 2000;
    }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

 </style>

正如您所看到的，所有字母都是同时动画的，如果我更改了我的笔画 - dashoffset = 0，它根本就没有动画效果。任何建议都非常感谢。谢谢。

Answer 1

我将向您展示如何使用尽可能少的svg path更改并仅使用基于css的动画{{{{{}}来为这些字母（实际上我在三个字母后停止）分别设置动画。 1}}。但是，让我从一开始就说，这是痛苦的和不以你想要的方式为字母设置动画的方式。最后的教训可能是：“尝试别的东西。”

要查看动画效果，点击下方的“运行代码段”。

我必须做几件事。使用keyframes属性在其中具有多个“moveto”命令（即多个path s）的"M"从开始到结束（或从结束到开始）进行动画处理撤销的。这是因为每次'moveto'之后，中风dasharray重新开始，我相信你无法控制它。因此，stroke-dashoffset必须消除所有'moveto'命令。然而，这意味着，如果一个字母“结束”到下一个字母“开始”的位置，则会有一个难实的连接。这些需要通过在每次跳转时插入一个dasharray间隙到原来的'moveto'命令所在的下一个字母来消除。我通过反复试验（痛苦地）做到了这一点。然后需要多个动画path来为下一个后面的一个字母设置动画。首先，逐渐加长一个破折号以完成第一个字母，然后是一个基本上无限的间隙来隐藏剩余的字母。然后在第二个字母处插入了正确的间隙，并重复了该过程。

这里的部分问题是路径中的字母由'moveto'命令分隔。在您在问题中链接的codepen中显示了您正在寻找的行为，您会看到路径实际上是连续的，字母之间没有间隙...通过更改{{1}来更容易css-animate }}。如果这就是你想要的，那很好，但是你将不得不从根本上改变（即回到Illustrator等）您正在使用的图像，这可能是您可能愿意或不愿意做的。

您仍然可以分别为此图片中的每个字母设置动画。但是，如果您这样做，我认为最好的策略是将单个单片keyframes元素分隔为每个“字母”的单个stroke-dashoffset。然后你必须为第一个字母设置动画（可能使用path，但可能使用另一种方式），当完成后，启动下一个字母，等等。我想你可以尝试使用严格的基于CSS的方式动画。但是，最后，我认为使用某种基于JavaScript的动画可能会更好（更高效，更广泛适用等），您可以通过编程方式更好地控制事物。

path

stroke-dashoffset

SVG一次绘制一个字母

1 个答案: