【コード実装】たった数行で実現できるSVGアニメーション code_html/css_WEB-ITnose

デザイナーとして、コードを使用してアニメーション効果を実現できれば、それは素晴らしいことです。

画像形式 SVG は、最近 「モーション エフェクト」 という言葉が非常に人気があり、すべての製品に素晴らしいモーション エフェクトを追加することに熱心で、デザイナーはすべての機能を習得することに熱心です。モーションエフェクトを一晩で作成するためのソフトウェアであり、SVG の人気は多かれ少なかれこの torrent のおかげです。 SVG とコードは非常にうまく連携できます。デザイナーは、数行の CSS コードを使用して、多くの動的な効果を実現できます。これは、もはや「GIF のようなアニメーション」ではなく、コードによって実現されるアニメーション効果です。本当にとてもシンプルです。 CSS コードを適切に操作できることに加えて、SVG には他にも多くの優れた機能があります。

1. クロスデバイス機能。 SVG の正式名は (Scalable Vector Graphic) です。これは、どんなにいじっても、どのようなサイズで表示されても、常に最良の状態を維持できることを意味します。今では、ユーザーがどのようなデバイスを使用してコンテンツを使用するかは神のみぞ知る、レスポンシブ製品が主流です。今度はデザイナーは満足しています。プログラマーに直接出力してください。彼は二度と戻ってくることはありません。私が保証します。
2. 透明なチャンネル。 SVG は PNG の透明度と同様に透明で使いやすく、完全に健全で正常です。これだけで数え切れないほどの落とし穴を避けることができます。
3. 小さい、ずっと、ずっと小さい。 GIF アニメーションは時々非常に大きいため、Web ページの読み込み時間が非常に長くなり、ユーザー トラフィックが過剰に消費されることは誰もが知っています。現在のトラフィックがどれほど高価であるか、そしてそれには 5 秒以上かかることを知っておく必要があります。待ち時間が過ぎると、ユーザーは容赦なくあなたをシャットダウンします。さらに、巨大な GIF 画像は、読み込まれた後でもレンダリングに多くのリソースを消費するため、エクスペリエンス全体が非常に遅くなります。製品のパフォーマンスを向上させるために、デザイナーはある程度これを行う必要があると思います。
4. インタラクティブ。 CSS または Javascript で制御でき、非常に簡単だからです。

私は非常に経験が浅く、ここで挙げるのはほんのわずかであることをここで断っておかなければなりません。SVG には他にも多くの利点があるかもしれません。

次に、SVG と CSS を使用した小さなロゴ アニメーションについて説明します。興味がある場合は、私の [Github](https://github.com/zyxscientist/textAnimation) からすべてのコードをダウンロードして勉強してください。このチュートリアルを読んだ後、すぐに自分の製品で使用できるようになることを願っています。

CodePen の Zhuyxuan (@Zyxscientist ) による Pen TextLogoAnimation をご覧ください

見てください、これは本当に短くて簡潔で、合計サイズはわずか数 K です。

HTML 部分: まず SVG タグを通じてマスクを設定します。ここでのマスクはテキスト「Zyxscientist」の行です。ここで言及しなければならないのは、その中にあるすべてのものを保持するためにそれを使用する必要があるということです。これを行わないと、ブラウザによってはアニメーションが正常に動かない場合がありますが、理由はわかりません。

6 in 1 を定義し、clip-path="url(#mask-path)" を使用して上で定義したマスクを指すようにします。そのため、6 つの正方形のマスクは、 の領域のみを通る行「Zyxscientisit」になります。この列、私たちの列が見えますか？

一般的に、HTML 部分にはこれらの要素しかありませんが、CSS を使用すると、アニメーションにおける SVG の可塑性を反映して、単調ではないアニメーション効果を作成できます。

CSS パート: おそらくアニメーション全体を 3 つの小さな部分に分割できます (詳細については、以下に示すタイムラインを参照してください)。 パート 1: まず最初に見えるのは、マスク「Zyxscientist」が最初は静止したままですが、ライン サーフェスの 6 つの要素が初期状態から 4 秒間動き始めていることです。ここでは CSS で 6 つの正方形の色を設定しているため、アニメーションが開始されると、これらの 6 つの要素がマスクを通過するときに色の効果が表示されます。 パート 2: 2 番目のパートのアニメーションを反転して再度再生します。これは 2 つのパートを別々に記述しようとしましたが、同じキーフレームに書き込むと若干の遅れが生じます。一度はこの状況を回避できますが、ある程度の柔軟性は失われます。 パート 3: マスクを右に移動し始め、マスクが下の要素と重なる部分に「Z」の文字だけを残して、最終的な効果を確認します。

CSS 部分は少し長くなりますが、アイデアはまだ非常にシンプルです。

OK、Jiantian の共有はこれで終わりです。多くの人が気に入ってくれたら、SVG アニメーションについてさらに詳しく共有していきます。

繰り返しますが、このコードを私の Github から直接ダウンロードして、ご自身でプレイしてください。

今後、新しい記事や作品は ui China に掲載されるだけでなく、私が最近構築した ブログ にも掲載される予定です。もっと。

最後に、誰かが上記のコードの naiev 部分を指摘してくれることを願っています。