CSS アニメーションとクリッピング パスを使用して、SVG テキストをアニメーション化して手書きの効果をシミュレートするにはどうすればよいですか?

手書きのジェスチャーを使用した SVG テキストのアニメーション化

この記事では、例で紹介されている魅力的な手書き風のテキスト アニメーションを作成するために使用されるテクニックを詳しく掘り下げていきます。 CodePen.io/se7ensky/pen/waoMyx などCodePen.io/munkholm/pen/EaZJQE.

標準的なダッシュ アニメーション手法を理解する

Se7ensky アニメーションは、標準的なダッシュ アニメーション手法を巧みに活用しています。このテクニックには次のことが含まれます:

1. 連続ストロークの描画: テキストのパスに沿って連続ストロークを作成します。
   
   
   <前> <path></svg>
   

   
   
2. ストロークの大部分を非表示にする: セットblood-dasharray プロパティを次の値よりも大きい値に設定しますストロークの実際の長さにより、最初はストロークの大部分が非表示になります。
   
   
   

    ストローク-dasharray: 300;<br>}

   
   

   
   

   ログイン後にコピー

3. ストロークのアニメーション化: CSS アニメーションを使用して、 ストロークダッシュオフセットを徐々に減らします
   

   
   

   @keyframesdraw {<br> to {</p>
   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">stroke-dashoffset: 0;

   ログイン後にコピー

   }
   }

   パス{

   アニメーション: 15 秒 1 を描画します;
   }
   

   
   

手描き効果を追加する

例で見られる手描き効果を実現するには、Se7ensky が賢いテクニックを使用します:

1. 手書きテキストの SVG パス アウトラインを作成します:テキストの外側の端に対応するパス。このパスは、手書きの輪郭を提供します。
   
   
   

    <path></svg>

   
   

   
   

   ログイン後にコピー
2. アニメーション化されたストロークをアウトラインでクリップします: clip-path プロパティを使用してクリッピングを定義しますアニメーション化されたストロークをアウトラインの境界に制限する領域。
   
   
   

    クリップパス: url(#outline);<br>}

   
   

   
   

   これらの手法を組み合わせることで、Se7enskyアニメーションは、手描きのテキスト アニメーションの外観を効果的に複製します。

   ログイン後にコピー