書道フォントの手書きアニメーションをやりたかったのです。これは、目に見えないペンによって書かれているような言葉がアニメーション化する種類です。書道フォントには不均一なストローク幅があるため（実際にはSVGの點ではストロークさえありません）、典型的なパスアニメーションテクニックでこのようなことをすることはほぼ不可能でした。しかし、私は數(shù)分でこの影響を達(dá)成するために、SVGマスキングの革新的なアプリケーションを見つけました。

これを行う方法を研究している間、私は複數(shù)のソースから情報を収集しました。それらを組み合わせて、最終効果を作成することができました。

一緒に作りましょう！

SVGマスキング

単語や文のすべての文字のストローク幅が全體に均一である場合、クレイグロブスキーは手書きをアニメーション化する良い方法を持っています。これは、SVGストロークダッシュアレイとストロークオフセット屬性をアニメーション化する巧妙な手法です。

ここでアニメーション化したいような書道フォントは、文字全體に不均一なストローク幅を持っているため、である必要があり、そのようにアニメーション化する必要があります。トリックは、SVGマスキングを使用することです。

まず、使用したいフォントを把握することから始めましょう。この記事全體で使用するものはHaveAreToneです。これは、手書きに最適なブラシストロークの外観が素敵です。

アイデアは、アニメーション化したいのと同じ文からを作成し、それを文の上に置くことです。言い換えれば、同じ文の2つの層があります。マスクは上に座っているので、それを白にして、その下の元の文を隠します。アニメーションが実行されると、下層が明らかになるようにマスクをアニメーション化します。

レイヤーを作成します

このトリックの基礎(chǔ)は、実際に2つの別々のレイヤーを作成することです。

1. 一番下のレイヤーは、目的のフォントのある?yún)g語です（私の場合、それはハートネーブです）。
2. 最上層は、単語に近い手作りのパスです。

手作りのパスを作成することは、あなたが思うほど難しくありません。文をアニメーション化して明らかにするための連続パスが必要です。これは、これについてはを意味します。しかし、イラストレーターを含むアプリの多くは、文字をパスに変換することができます。

1. 単語を選択します。
2. 「プロパティ」パネルを開き、 [アウトラインの作成]をクリックします。

そして、魔法のように、文字は形狀に続くベクトルポイントの輪郭になります。

この時點で、レイヤーとして保存されているこれらのパスに意味のある名前を與えることが非常に重要です。これをSVGに期待すると、アプリはコードを生成し、それらのレイヤー名をIDおよびクラスとして使用します。

個々の文字がどのように埋められているかに注意してくださいが、ストロークはありません：

SVGでは、私たちが望むようにストロークをアニメーション化することができるので、2番目のメイン層であるマスクとしてそれを作成する必要があります。ペンツールを使用して文字をトレースできます。

1. ペンツールを選択します。
2. 塗りつぶしオプションを「なし」に設(shè)定します。
3. ストローク幅は、使用しているフォントによって異なります。ストローク幅オプションを5pxに設(shè)定し、その色を黒に設(shè)定しています。
4. 描畫を始めましょう！

私のペンツールのスキルは素晴らしいものではありませんが、それは大丈夫です。重要なことは完璧ではありませんが、マスクがその下のレイヤーを覆うことです。

各文字のマスクを作成し、レイヤーに適した名前を使用することを忘れないでください。そして、同じ文字が複數(shù)ある場所にマスクを再利用することは、同じ「a」キャラクターを何度も再描畫する必要はありません。

エクスポート

次に、SVGファイルをエクスポートする必要があります。それはおそらくあなたが使用しているアプリケーションに依存します。 Illustratorでは、ファイル→エクスポート→エクスポート→SVGでそれを行うことができます

SVGオプションのポップアップが開きます。以下は、この例のためにエクスポートするための優(yōu)先設(shè)定です。

これで、すべてのアプリがSVGをまったく同じ方法でエクスポートするわけではありません。スリムで効率的なコードを生成するのに優(yōu)れた仕事をする人もいます。他の人、それほどではありません。いずれにせよ、コードエディターでファイルを開くことをお勧めします

SVGを使用しているとき、パフォーマンスのために可能な限り軽量にするために考慮すべきいくつかのヒントがあります。

1. ポイントが少ないほど、ファイルが軽くなります。
2. より小さなViewboxを使用すると役立ちます。
3. SVGをさらに最適化するためのツールがたくさんあります。

SVGコードを手動で編集します

これで、すべてのアプリがSVGをまったく同じ方法でエクスポートするわけではありません。スリムで効率的なコードを生成するのに優(yōu)れた仕事をする人もいます。他の人、それほどではありません。いずれにせよ、コードエディターでファイルをクラックしていくつかの変更を加えることをお勧めします。

やりがいのあること：

1. 最終設(shè)計のサイズに設(shè)定されている
3. イラストアプリで名前が付けられたレイヤーに基づいて、IDSを使用してグループ要素（）がある可能性があります。この特定のデモでは、＃Marketing-Lab（アウトライン）と＃マーケティングマスク（マスク）の2つのグループ要素があります。マスクを要素に移動します。これは視覚的にそれを隠すでしょう、それが私たちが望むものです。
4. マスクグループ內(nèi)にパスがある可能性があります。もしそうなら、先に進(jìn)み、それらから変換屬性を削除します。
5. 各パス要素をに包み、マスクされた文字を示す.MASKクラスとIDを付けます。

例えば：

 
 <path ...></path>

アウトライングループ內(nèi)（＃Marketing-LabのIDが與えられました）は、Mask = "URL（＃Mask-Marketing-M）"を使用して、それぞれの文字パス要素にマスクを適用します。

 <g>
 <path mask="url（＃mask-marketing-m）" d="m427,360、..."></path>
</g>

上記のすべての変更を使用する1つの文字のコードは次のとおりです。

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <title>マーケティングラボ</title>
 <defs>
  <g>
   
    
   
  </g>
 </defs>
 <g>
  
 </g>
</svg>

最後に、ストローク色を白で上書きする.MASK要素にCSSを追加して、ドキュメントの背景色に対して隠されます。

 。マスク {
 塗りつぶし：なし;
 ストローク：#fff;
}

アニメーション

CSS Stroke-Dasharrayプロパティをアニメーション化して、連続ラインの明らかな効果を取得します。 CSSとJavasscriptまたはGreensock（GSAP）のいずれかでアニメーションを行うことができます。両方のアプローチを見ていきます。

CSSおよびJavaScript

これをCSSだけで行うのはかなり簡単です。 JavaScriptを使用してパスの長さを計算し、その返された値を使用してアニメーション化できます。 JavaScriptをまったく使用したくない場合は、パスの長さを1回計算し、その値をCSSにハードコードすることができます。

 / *ストロークダッシュアレイとストロークダッシュオフセットを設(shè)定 */
。マスク {
 ストロークダッシュアレイ：1000;
 ストロークダッシュオフセット：1000;
}
?
/ *アニメーションストロークダッシュオフセットはゼロの長さになります */
@keyframes strokeoffset {
 に {
  ストロークダッシュオフセット：0;
 }
}
?
/ *各マスクにアニメーションを適用します */
＃mask-m {
 アニメーション：ストロークオフセット1S線形前方。
}

JavaScriptは、代わりにそのルートに行きたい場合は、カウントを支援できます。

 //マスクを配列に入れます
const masks = ['m'、 'a'、 'r'、 'k-1'、 'k-2'、 'e'、 't-line-v'、 't-line-h'、 'i-2'、 'i-dot'、 'n'、 'g' '、' lab-l '、' lab-a '、' lab-b ']]
?
masks.foreach（（mask、index、el）=> {
 const id = `#mask-$ {mask}` // prepend＃mask-各マスク要素名に
 let path = document.queryselector（id）
 const length = path.getTotallength（）//パスの長さを計算します
 path.style.strokedasharray = length; //スタイルのストロークダシャレイに長さを設(shè)定します
 path.style.strokedashoffset = length; //スタイルのストロークダッシュオフセットに長さを設(shè)定します
}）

GSAP

GSAPには、svg 、、、、、またはのストロークを徐々に明らかに（または非表示）できるDrawSVGプラグインがあります。ボンネットの下では、CSSストロークダッシュオフセットとストロークダッシュアレイのプロパティを使用しています。

これがどのように機(jī)能しますか：

1. コードにGSAPとDrawSVGスクリプトを含めます。
2. Autoalphaを使用して、最初にグラフィックを非表示にします。
3. タイムラインを作成します。
4. グラフィックのためにAutoalphaをTrueに設(shè)定します。
5. すべての文字パスマスクIDを適切な順序でタイムラインに追加します。
6. DrawSVGを使用して、すべての文字をアニメーション化します。

參照

1. Jake ArchibaldによるSVGのアニメーション図面
2. Cassie Evansによるロゴアニメーションの作成

以上が不規(guī)則なSVGストロークで手書きアニメーションを取得する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。