如何使用不规则的SVG笔触获得手写动画

我想为书法字体做一个手写动画，这种单词像被看不见的笔一样动画。由于书法字体的中风宽度不均匀（实际上它们甚至不是SVG的中风），因此使用典型的路径动画技术来做这种事情几乎是不可能的。但是我发现SVG屏蔽的创新应用可以在几分钟内实现这种影响。

在研究如何执行此操作时，我从多个来源收集了信息。我将它们结合在一起，并能够创建最终效果。

让我们一起做！

SVG掩蔽

如果一个单词或句子中所有字母的中风宽度都遍布，那么Craig Roblewsky可以使用手写动画。这是一种巧妙的技术，可以使SVG卒中 - 划线和中风 - 扣除属性动画。

书法字体像我们想在这里动画的字体在整个字母中都具有不平衡的中风宽度，因此，它需要是，并以这种方式对其进行动画操作。诀窍是使用SVG掩码。

首先，让我们弄清楚要使用的字体。在本文中我将使用的是Hasheartone，它具有不错的笔触，非常适合笔迹。

这个想法是在我们要动画的同一句子中创建一个，然后将其放在句子的顶部。换句话说，将有两层相同的句子。由于面具位于顶部，我们将其使其白色，因此它将隐藏在其下方的原始句子。我们将对掩码进行动画化，以便在动画运行时揭示底层。

制作图层

这个技巧的基础是，我们实际上要创建两个单独的层，一个在另一个层上：

1. 底层是带有所需字体的单词（在我的情况下是hasheartone）。
2. 顶层是近似单词的手工制作路径。

创建手工的路径并不像您想象的那样难。我们需要一条连续的途径来动画和揭示句子。这意味着对此没有。但是，许多说明应用程序（包括插图画家）可以将字母转换为路径：

1. 选择单词。
2. 打开“属性”面板，然后单击“创建大纲” 。

而且，像魔术一样，字母变成了沿形状的矢量点的轮廓。

在这一点上，将有意义的名称赋予这些路径非常重要，这些路径被存储为层。当我们期望SVG时，该应用将生成代码，并将这些图层名称用作ID和类。

注意单个字母如何有填充，但没有中风：

在SVG中，我们可以按照自己想要的方式对中风进行动画动画，因此我们需要将其作为第二个主层，即蒙版。我们可以使用笔工具跟踪字母。

1. 选择笔工具。
2. 将填充选项设置为“无”。
3. 中风宽度将取决于您使用的字体。我将冲程宽度选项设置为5px，并将其颜色设置为黑色。
4. 开始绘画！

我的笔工具技能不佳，但这没关系。重要的不是完美，而是掩盖了下面的层。

为每个字母创建一个掩码，并记住对这些层使用好名字。绝对可以重复使用面具，那里有一个以上的字母之一 - 无需一遍又一遍地重新绘制相同的“ A”角色。

出口

接下来，我们需要导出SVG文件。这可能取决于您使用的应用程序。在Illustrator中，您可以使用文件→导出→导出为→SVG

SVG选项弹出窗口将打开，下面是此示例导出的首选设置。

现在，并非所有应用程序都以相同的方式导出SVG。有些在生成纤细，高效的代码方面做得非常出色。其他人，不是很多。无论哪种方式，最好在代码编辑器中打开文件

当我们与SVG合作时，有一些技巧需要考虑，以使其尽可能轻便，以表现出色：

1. 点越少，文件越轻。
2. 使用较小的查看框可以有所帮助。
3. 有很多工具可以进一步优化SVG。

手动编辑SVG代码

现在，并非所有应用程序都以相同的方式导出SVG。有些在生成纤细，高效的代码方面做得非常出色。其他人，不是很多。无论哪种方式，最好在代码编辑器中打开文件并进行一些更改。

有些事情值得做：

1. 给出设置为最终设计大小的
2. 使用
3. 可能会有基于Illustration App中命名的层的ID的组元素（）。在这个特定的演示中，我有两个小组元素：＃营销利润（大纲）和＃营销口罩（蒙版）。将蒙版移动到元素中。这将在视觉上隐藏它，这就是我们想要的。
4. 口罩组内部可能会有路径。如果是这样，请继续并从中删除转换属性。
5. 将每个路径元素包裹在中，并给它们一个.mask类和一个ID，以指示哪个字母掩盖。

例如：

 <mask>
 
</mask>

在轮廓组（我给出了＃Marketing-LAB的ID）内部，将掩码应用于相应的字符路径元素，并使用Mask =“ url（＃bask-marketing-m）”。

 <g>
 <path mask="“" url d="“" m427></path>
</g>

这是使用上述所有修改的一个字符的代码：

 <svg xmlns="“" http: viewbox="“">
 <title>营销实验室</title>
 <defs>
  <g>
   <mask>
    
   </mask>
  </g>
 </defs>
 <g>
  
 </g>
</svg>

最后，我们将为.mask元素添加CSS，该元素覆盖了用白色覆盖笔划的颜色，因此它与文档的背景颜色相对于文档的背景颜色隐藏。

 。面具 {
 填充：无；
 中风：#fff;
}

动画片

我们将对CSS冲程 - 戴式属性属性进行动画动画，以获取连续的线揭示效果。我们可以使用CSS和Javasscript或Greensock（GSAP）进行动画。我们将研究两种方法。

CSS和JavaScript

仅在CSS中执行此操作是非常简单的。您可以使用JavaScript来计算路径长度，然后使用返回的值对其进行动画化。如果您根本不想使用JavaScript，则可以计算一次路径长度，然后将该值进行硬编码到CSS中。

 / *设置“中风”和“划线” dashoffset */
。面具 {
 中风 -  dasharray：1000;
 中风划线：1000;
}


/ *动画将冲程 - 划线为零长度 */
@KeyFrames streoffset {
 到 {
  中风划线：0;
 }
}


/ *将动画应用于每个掩码 */
＃mask-m {
 动画：StrokeOffset 1S线性前进；
}

JavaScript如果您希望使用该路线，可以帮助进行计数：

 //将口罩放在数组中
const masks = ['m'，'a'，'r'，'k-1'，'k-2'，'e'，'t line-v'，'t-line-h'，'i-dot'，i-dot'，i-dot'，n'，'n'，'g'，'lab-l'，'lab-l'，'lab-a'，'lab-a'，'lab b'，'lab-b']，'lab b']


masks.foreach（（蒙版，索引，el）=> {
 const ID =`#mask- $ {蒙版}`//预先＃bask-到每个掩码元素名称
 让路径= document.queryselector（id）
 const长度= path.getTotallength（）//计算路径的长度
 PATH.STYLE.STROKEDASHARRAY =长度; //将长度设置为“样式”
 PATH.STYLE.STROKEDASHOFFSET =长度; //将长度设置为在样式中的中风式dashoffset
}））

GSAP

GSAP具有一个drawsvg插件，可让您逐步揭示（或隐藏）SVG ，，，，，，或。在引擎盖下，它使用了CSS冲程仪表式和中风划线属性。

这是其工作原理：

1. 在代码中包括GSAP和DrawsVG脚本。
2. 最初使用自动藻类隐藏图形。
3. 创建一个时间表。
4. 将自动α设置为图形。
5. 以适当的顺序将所有字符路径蒙版ID添加到时间表中。
6. 使用drawsvg来动画所有字符。

参考

1. 杰克·阿奇博尔德（Jake Archibald）在SVG中的动画绘图线
2. 创建Cassie Evans的徽标动画

以上是如何使用不规则的SVG笔触获得手写动画的详细内容。更多信息请关注PHP中文网其他相关文章！