手書きのジェスチャーを使用した 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 を描画します;
   }