如何使用 SVG 制作手写文本动画：Dasharray、Dashoffset 和 Masking？

如何使用 SVG 在网页上制作手写文本动画

目标

在本指南中，我们将深入研究动画 SVG 文本以使其类似于手写的诱人效果。我们将探索受示例动画启发的技术，例如发现的技术这里：

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen.io/munkholm/pen/EaZJQE

实现

为了实现这种迷人的手写效果，我们将偏离仅对文本笔画进行动画处理的标准方法。相反，我们将从前面提到的特殊动画中汲取灵感。

技术 1：

• 对路径的描边 dasharray 和描边 dashoffset 属性进行动画处理。
• 用所需手绘的轮廓剪辑动画笔画

JavaScript 代码：

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS：

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

技术2:

• 使用手绘形状的轮廓创建蒙版。
• 沿路径动画蒙版的位置。

JavaScript代码：

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS：

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG 蒙版：

<defs>
  <mask>

附加注意：

• 自定义动画时序和路径以满足您的特定需求。
• 尝试不同的绘画风格，以实现独特的手绘效果。
• 使用高分辨率 SVG 来保留文本或内容的复杂细节

现场演示：

在 CodePen 上查看交互式示例：

以上是如何使用 SVG 制作手写文本动画：Dasharray、Dashoffset 和 Masking？的详细内容。更多信息请关注PHP中文网其他相关文章！