不規則なSVGストロークで手書きアニメーションを取得する方法

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

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

一緒に作りましょう！

SVGマスキング

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

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

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

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

レイヤーを作成します

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

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

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

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

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

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

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

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

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

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

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

エクスポート

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

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

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

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

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

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

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

やりがいのあること：

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

例えば：

 
 <path ...></path>

アウトライングループ内（＃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にハードコードすることができます。

 / *ストロークダッシュアレイとストロークダッシュオフセットを設定 */
。マスク {
 ストロークダッシュアレイ：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; //スタイルのストロークダシャレイに長さを設定します
 path.style.strokedashoffset = length; //スタイルのストロークダッシュオフセットに長さを設定します
}）

GSAP

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

これがどのように機能しますか：

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

参照

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

以上が不規則なSVGストロークで手書きアニメーションを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。