SVGおよびCSSでテキストをアニメーション化する方法

SVGとCSSを使用して、アニメーション化されたテキスト効果を作成します

最近、私は友人のJezが彼のニュースレターのウェブサイトDept. of Everismを作成するのを手伝っていましたが、タイトルの「熱意」という言葉をわずかに動かせたらどうでしょうか。たとえば、言葉のすべての文字が活力で上下に叩きつけている場合はどうなりますか？

効果は次のとおりです。

とてもクールですよね？ SVGを使用してテキストを作成し、CSSを使用してアニメーションを作成できることを知っています。各文字は、独自のクラス名を持つパスであるため、各文字を選択できます。とはいえ、これを達成するためにHTMLとCSSを使用することを妨げるものは何もありません。 SVGを使用することは、当時それが適切だと思った1つの方法にすぎませんでした。

まず、Figmaを開き、テキストを別のテキストボックスに入力します。これは、こちらの「アウトラインストローク」メニュー項目をクリックするときに行われます...

…各文字に個別のベクトルを取得できます。これにより、SVGをエクスポートするときに各要素に正しいCSSクラスを追加するのに役立ちます。各文字のストロークを描いたら、ベクトルのポイントを編集できます（しかし、これからやろうとしていることについては、これを行う必要はありません）：

すべてのテキストをボックスに入れて「アウトラインストローク」をクリックすると、これらすべての文字を含む単一のベクトルが作成されます。その後、座標を備えた単一のパスを作成します。これは、スタイルを整えたり、そこで何が起こっているのかを理解することさえ非常に困難です。

次に、これらすべての文字をフレームに入れ（アートボードをスケッチする）、各単語をグループに入れます。このようにして、それらがSVGとしてエクスポートされると、各単語は独自のgタグになり、文字のスタイルも役立ちます。

次に、SVGをエクスポートしましたが、 - エクスポート時にIDオプションが含まれていることを確認する必要があります。

これを行わないと、各文字のパス要素がたくさんありますが、ID属性はありません。

エクスポート後、次の結果が得られます。

私の問題がいくつあるのか、FigmaのSVGエクスポートの問題はいくつあるのかわかりませんが、削除しました<rect></rect>要素は不要だからです。次に、テキストを表示し、SVG自体のインラインの高さと幅の特性を削除できるように、ボディ要素の背景を設定しました。<rect></rect>

素晴らしい！今、私たちは興味深い部分に入ることができます：言葉のすべての文字をアニメーション化します。

上記の例でHTMLを見ると、Figmaのフレームワーク名と同じIDを持つg要素があることに気付くでしょう。各単語にはg要素もあり、単語を形成する各パスには個別のIDがあります。 （だからこそ、フレームワークやグループに適切に名前を付けることが重要であるため、設計アプリケーションで優れた組織を維持することが重要です。）

私が驚いたことの1つは、各パスのエクスポートの順序でした。それは私が期待した順序の反対であり、「熱意」グループの最初の手紙はMでした。そのため、各文字が正しい順序で配置されるように少し掃除しました。

アニメーションを機能させるために、最初に各文字を2ピクセル下に移動します。

 gパス{
  変換：Translatey（2px）;
}

これは、各文字が2ピクセルをジャンプさせたいからです。それについては後で説明します。また、この変更により、SVGビューポートを更新する必要があることにも気付きました。それ以外の場合、各文字の底が遮断されます。

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

おそらく、Figmaのフレームワーク内のテキストを再配置して再度エクスポートする必要がありますが、それは私に必要なものに十分です。

これで、SVGの3番目のグループ（「熱意」という単語）を見つけることができ、 animation-count Infiniteに設定できます。

 / *「熱意」という言葉をターゲットにします */
G：nth-​​child（3）パス{
  アニメーション名：wigglewiggle;
  アニメーション期間：2.5秒;
  Animation-Iteration-Count：Infinite;
}

上記のコードは、次のwiggleWiggleアニメーションを呼び出します。

 @keyframes wigglewiggle {
  20％、
  100％{
    変換：翻訳（0、2px）; / *ほとんどのアニメーション期間のベースラインにとどまる */
  }

  0％{
    変換：翻訳（0、0px）; / *ホップアップ */
  }
  10％{
    変換：翻訳（0、2px）; / *ベースラインに戻る */
  }
}

そのキーフレームの始まりを見たことがありますか？ 20% 、 100%部分？それは、「ほとんどのアニメーションのベースラインにすべてのテキストを保持すること」を意味します。これが、各リバウンドの間に良い遅延をもたらすものです。

この非常に良い記事から、アニメーションの時間に関するGeoffのこの非常に良い記事からこのトリックを学びました。CSSアニメーションの学習を開始しようとしている場合は、チェックすることを強くお勧めします。

今が興味深い部分です。 animation-delayプロパティを使用して、前の文字の後に各文字を曲げることができます。私は間違いなくこれを行うためのより賢い方法を持っていますが、私はそれぞれの文字のIDを使用しました。

 ＃e {
  Animation-Delay：0S;
}

#n {
  アニメーション遅延：0.1秒;
}

#t {
  アニメーション遅延：0.15秒;
}

＃h {
  アニメーション遅延：0.2秒;
}

#u {
  アニメーション遅延：0.25秒;
}

＃s_2 {
  アニメーション遅延：0.3s;
}

＃私 {
  アニメーション遅延：0.35秒;
}

＃a {
  アニメーション遅延：0.4s;
}

＃s {
  アニメーション遅延：0.45秒;
}

＃m {
  アニメーション遅延：0.5s;
}

それは本当に乱雑ですが、ループを書くことは私に時間を節約できないので、将来更新する必要はないので、それは十分だと思います。このようにして、私たちはほとんど完了です！

今、私たちは挨拶するためにバウンスされた活気のあるタイトルを持っています。 be打の言葉を応援してください！

以上がSVGおよびCSSでテキストをアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。