如何使用SVG和CSS来动画文本

使用SVG和CSS制作动画文本效果

最近，我在帮助朋友Jez制作他的新闻通讯网站Dept. of Enthusiasm时，产生了一个想法：如果我们让标题中的“enthusiasm”这个词稍微动起来会怎样？例如，如果单词中的每个字母都充满活力地上下跳动？

效果如下：

很酷吧？我知道我们可以使用SVG来创建文本，然后用CSS来制作动画。每个字母都是一个带有自己类名的路径，这使得选择每个字母成为可能。也就是说，没有什么能阻止我们使用HTML和CSS来实现这一点。使用SVG只是当时我觉得合适的一种方法。

首先，我们打开Figma，将文本输入到单独的文本框中。这样做是为了当我们点击这里的“Outline stroke”（轮廓描边）菜单项时……

……我们可以得到每个字母的单独矢量。这将有助于我们在导出SVG时为每个元素添加正确的CSS类。一旦我们描绘了每个字母的描边，我们就可以编辑矢量中的点（但对于我们即将要做的事情，我们不需要这样做）：

如果我们将所有文本放在一个框中并点击“Outline Stroke”，那么它将创建一个包含所有这些字母的单个矢量。然后，它将创建一个包含坐标的单个路径，这对我来说很难进行样式设置，甚至很难理解那里到底发生了什么。

接下来，我把所有这些字母放在一个框架中（Sketch称之为画板），并将每个单词放入一个组中。这样，当它们被导出为SVG时，每个单词都将位于它自己的g标签中，这也有助于我们设置字母的样式：

然后，我导出了SVG——但是！——我必须确保在导出时包含id选项。

如果我们不这样做，我们将得到每个字母的一堆路径元素，但它们将没有id属性。

导出后，我们得到以下结果：

我不确定有多少奇怪之处是我的问题，有多少是Figma的SVG导出问题，但我删除了<rect></rect>元素，因为它是不必要的。然后，我为body元素设置了一个背景，这样我就可以看到文本并删除SVG本身的内联高度和宽度属性：<rect></rect>

太棒了！现在我们可以进入有趣的部分：为单词中的每个字母制作动画。

如果你查看上面示例的HTML，你会注意到有一个g元素，它的id与Figma中的框架名称相同。每个单词也有g元素，构成单词的每个路径都有一个单独的id。（这就是为什么正确命名我们的框架和组，以及在任何设计应用程序中保持良好的组织性非常重要的原因。）

令我惊讶的一件事是每个路径的导出顺序：它与我预期的顺序相反，“ENTHUSIASM”组中的第一个字母是M。所以我稍微清理了一下，确保每个字母都按正确的顺序排列。

为了使动画工作，我们首先将每个字母向下移动2像素：

g path {
  transform: translateY(2px);
}

这是因为我希望每个字母都能跳动2像素，我们稍后会讲到这一点。我还注意到，通过此更改，我还需要更新SVG视口。否则，每个字母的底部将被切掉：

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

我可能应该只是在Figma中重新定位框架内的文本并再次导出它，但这对我需要的东西来说已经足够了。

现在我可以定位SVG中的第三个组（单词“enthusiasm”）并将animation-count设置为无限：

/* targets the word "enthusiasm" */
g:nth-child(3) path {
  animation-name: wiggleWiggle;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

上面的代码调用下面的wiggleWiggle动画：

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 2px); /* stay on the baseline for most of the animation duration */
  }

  0% {
    transform: translate(0, 0px); /* hop up */
  }
  10% {
    transform: translate(0, 2px); /* return to baseline */
  }
}

看到那个关键帧的开头——20%, 100%部分了吗？它的意思是“让所有文本在动画的大部分时间里都保持在基线上”。这就是给我们每个反弹之间带来很好延迟的原因：

我从Geoff关于动画时间的这篇非常好的文章中学到了这个技巧，如果您即将开始学习CSS动画，我强烈建议您查看一下。

现在是有趣的部分：使用animation-delay属性，我们可以使每个字母在之前的字母之后跳动。我肯定有更聪明的方法可以做到这一点，但我只是使用了每个字母的id，如下所示：

#E {
  animation-delay: 0s;
}

#N {
  animation-delay: 0.1s;
}

#T {
  animation-delay: 0.15s;
}

#H {
  animation-delay: 0.2s;
}

#U {
  animation-delay: 0.25s;
}

#S_2 {
  animation-delay: 0.3s;
}

#I {
  animation-delay: 0.35s;
}

#A {
  animation-delay: 0.4s;
}

#S {
  animation-delay: 0.45s;
}

#M {
  animation-delay: 0.5s;
}

它确实很凌乱，但是编写循环并不会节省我很多时间，而且将来也不需要更新它，所以我认为它已经足够好了。就这样，我们差不多完成了！

现在我们有一个弹跳的、充满活力的标题来问好。为跳动的文字欢呼！

以上是如何使用SVG和CSS来动画文本的详细内容。更多信息请关注PHP中文网其他相关文章！