使用手写手势对 SVG 文本进行动画处理

在本文中，我们将深入研究用于创建示例中展示的迷人手写文本动画的技术像 CodePen.io/se7ensky/pen/waoMyx 和CodePen.io/munkholm/pen/EaZJQE。

了解标准 Dash 动画技术

Se7ensky 动画巧妙地利用了标准 Dash 动画技术。此技术需要：

1. 绘制连续笔画：沿文本路径创建连续笔画。
   

    <path></svg>

   
   

   
   
2. 隐藏大部分笔画：设置将 lines-dasharray 属性设置为大于笔划实际长度的值，从而最初隐藏大部分笔画。
   
   
   

   Stroke-dasharray： 300;<br>}

   
   

   
   

   登录后复制

3. 动画笔​​画：使用 CSS 动画逐渐减少 trip-dashoffset 属性，这会显示笔划，就好像它正在绘制。
   

   
   

   @keyframes 绘制 {<br> 到 {<pre class="brush:php;toolbar:false">stroke-dashoffset: 0;

   登录后复制

   }
   }

   路径{

   动画：绘制15秒1;
   }
   

   
   

   添加手绘效果

   为了实现示例中看到的手绘效果， Se7ensky 使用了一种巧妙的技术：

   1. 创建手写文本的 SVG 路径轮廓： 创建与文本外边缘相对应的路径。此路径提供手绘轮廓。
      
      
      

       <path></svg>

      
      

      
      
   2. 用轮廓剪辑动画笔画：使用 clip-path 属性定义限制动画的剪切区域描边到轮廓的边界。
      
      
      

       剪辑路径： url(#outline);<br>}

      
      

      
      

      通过结合这些技术，Se7ensky动画有效地复制了手绘文本动画的外观。

      登录后复制