スケーラブルベクターグラフィックス（SVG）は、XMLで記述された画像形式です。 SVGを使用すると、2次元のスケーラブルなグラフィックをコーディングできます。 その後、CSSおよびJavaScriptでそれらを実装および変更できます。
SVGでは、ベクターシェイプ（すべての方向とシェイプの直線と曲線）、画像、テキストの3種類のグラフィックを使用できます。 Webデザイナーはさまざまな機能を備えているため、SVGを使用して複雑なアニメーションを作成します。 インストールは簡単で、サイズを変更しても品質が低下することはなく、サードパーティ製のアプリを使用する必要もありません。
アニメーションの人気は依然として高まっているため、ほとんどの人はそれらに慣れていません。 この記事では、この形式の可能性を示す20の素晴らしいSVGアニメーションを取り上げます。
1.キットトンによる医療SVGアイコン
クイックリンク
- 1.キットトンによる医療SVGアイコン
- 2. SeanMcCafferyによるホバー
- 3.ニコライ・タラノフによるリフレッシュのためのプルダウン（紙飛行機）
- 4.ディアコ・M・ロトフォラヒによるゴーイング・キープ・ゴーイング
- 5. HTML5ビデオに追加されたSVGフィルター
- 6.ジグソーパズル
- 7.パトリック・ヤングによるライナーグラデーション
- 8. jjperezaguinagaで旅行しましょう
- 9.モハマド・モヘビファールの時計
- 10.ルイージ・デ・ロサによるアニメーションアイコン
- 11. Chris GannonによるSVGのすべてのデバイス
- 12.クリス・ギャノンの滝
- 13. Blake BowenによるPlant Generator
- 14. Hamish Williamsによるクリック可能なアイコン
- 15.マルコ・バリアによる新しいケーキ
- 16.クリスガノンによるシュレッダー
- 17. GRAYGHOSTによる低ポリイオン
- 18.リーラの砂時計ローダー
- 19.サラ・ドラスナーによるレスポンシブ・カウ
- 20.ドマニーの学生
- あなたの番
この暖かく滑らかなアニメーションは、健康関連のWebサイトに最適です。 異なるスレッドを一覧表示している間、画像は微妙に表示されます。 救急車または原子が構築され、目が開き、医師が飛び出します。 このアニメーションは、SVGのすべての楽しさとダイナミズムを示しています。
リンク
2. SeanMcCafferyによるホバー
任意のインタラクティブなWebサイトに配置できるユニバーサルアニメーション。 ホバーしたときのボーダーの微妙な外観により、満足感が得られ、リンクをクリックすることができます。
リンク
3.ニコライ・タラノフによるリフレッシュのためのプルダウン（紙飛行機）
通常、ページを「プルダウン」すると更新されます。 このアニメーションは、これを新しいレベルに引き上げます。 プルダウンして解放すると、紙飛行機が空に飛び出します。 訪問者にアプリを頻繁に更新してもらいたい場合は、このようなアニメーションを追加することを検討してください。
4.ディアコ・M・ロトフォラヒによるゴーイング・キープ・ゴーイング
スケーリングベクトルの可能性を示すSVGアニメーション。 人体の滑らかで正確な動きは催眠術をかけています。
リンク
5. HTML5ビデオに追加されたSVGフィルター
Google ChromeチームのPaul Irishは、SVGがベクターグラフィックス以外のコンテンツをどのように変更できるかについて検討しました。 彼はCSSとSVGを組み合わせて素晴らしい視覚フィルターを作成し、SVGアニメーションが既製のビデオに素晴らしい追加物になることを示しました。
リンク
6.ジグソーパズル
SVGアニメーションを使用して、驚くほどインタラクティブなジグソーパズルを作成できます。 この例では、多くの写真の1つを選択し、それがパズルの多くの小さな断片にどのように分解されるかを確認できます。 再構築することもできます！
リンク
7.パトリック・ヤングによるライナーグラデーション
ネオンライトと美しいフォントが好きなら、このアニメーションをお楽しみください。 この作品は、華麗なアニメーションのために動く線を必要とせず、素晴らしいフォントとグラデーション効果を備えた適切なカラーコードを必要としないことを示しています。
リンク
8. jjperezaguinagaで旅行しましょう
2機の飛行機と、世界の人気のランドマークの周りを回転する熱気球。 このアニメーションはカラフルで楽観的で、衝撃的です。 SVGに熟練している場合にできるすべてのことを示しています。
リンク
9.モハマド・モヘビファールの時計
現在の時刻を示す移動時計の単純なSVGアニメーション。 ポインタのなだらかな動きとミニマルなデザインは、このアニメーションに驚異的です。
リンク
10.ルイージ・デ・ロサによるアニメーションアイコン
これらのアイコンにカーソルを合わせると、アニメーションがトリガーされますが、これはシンプルですが効果的です。 印象的なアニメーションアイコンを作成するために不思議なことをする必要がないことがわかります。
11. Chris GannonによるSVGのすべてのデバイス
最もクリエイティブな方法で使用するすべてのスマートデバイスを対象としたワンテイクアニメーション。 デスクトップはラップトップに、ラップトップはタブレットに、そしてスマートフォンに変わります。
リンク
12.クリス・ギャノンの滝
クリス・ガンノンによる別の1つは、これは泡立つ滝底のきちんとしたデモンストレーションです。 水の動きはきちんとしているので、アニメーションの境界線を離れて、すべてがよりリアルに見えるようにするために、はねかける水の小滴が見えます。
リンク
13. Blake BowenによるPlant Generator
今、これは別のものです。 「作成」ボタンをクリックすると、植物の成長と成長が見られます。 しかし、クリックするたびに、異なるパターンが形成されます。
リンク
14. Hamish Williamsによるクリック可能なアイコン
クリックするとアニメーションをトリガーする別のインタラクティブなSVG。 このボタンをクリックすると、「送信」アニメーションが開始されます。
リンク
15.マルコ・バリアによる新しいケーキ
ケーキの作成をレイヤーごとに示す興味深いアニメーション。 誕生日カードに適した印象的なSVGアニメーションです。
16.クリスガノンによるシュレッダー
紙の細断を見るのが好きな人は、シームレスなシーケンスで無制限の回数紙を細断する機械を描くこのアニメーションをお楽しみいただけます。
リンク
17. GRAYGHOSTによる低ポリイオン
これは、ライオンの頭がアニメーション化されたポリゴンの形で現れたり消えたりするのを描いた、衝撃的なイラストとアニメーションです。
リンク
18.リーラの砂時計ローダー
SVGのみを使用する別の効果的なアニメーション。 5秒ごとに、砂時計が逆さまになって、新しいサイクルを開始します。
リンク
19.サラ・ドラスナーによるレスポンシブ・カウ
これは、おもしろい宇宙飛行士が牛を見ている間に、牛をクリックして月の周りをドラッグできる面白いインタラクティブなアニメーションです。
20.ドマニーの学生
熱心な学生が学ぶ準備ができているようです！ 本のページがきれいに回転している素晴らしいアニメーションです。 学生からのまばたきはありませんが、これはこのリストを締めくくる完全にきちんとしたアニメーションです。
リンク
あなたの番
このリストに含まれていないお気に入りのSVGアニメーションは何ですか？ 以下のコメントであなたの選んだものを共有してください！
