便利なツールが登場!ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール

SVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。

SVGアイコンをアニメーションさせるには、どうしていますか?
例えば、ハンバーガーメニューを閉じるアイコンに変化させるなど、2つのSVGアイコンをアニメーションで変化させるオンラインツールを紹介します。

使い方は超簡単で、2つのSVGアイコンをぽいっとするだけです。

サイトのキャプチャ

Icon Transition Generator

さっそく試してみました。
まずは、SVGアイコンを2つ用意します。せっかくなので、先日紹介したIcon Boxのアイコンを使用してみました。

サイトのキャプチャ

国産のSVGアイコンサイトが登場!日本人クリエイターが作成した商用無料で利用できるアイコン素材 -Icon Box

よく見かけるハンバーガーメニューをクリック・タップすると、閉じアイコンに変わるアニメーションを作成してみます。まずは、それぞれのアイコンから。

ハンバーガーメニュー

ハンバーガーメニュー

ハンバーガーメニュー

閉じるアイコン

あとは、Icon Transition Generatorにドラッグ&ドロップするだけです。

サイトのキャプチャ

Icon Transition Generator

エフェクトは、Scale, Rotateの2種類があり、クリックとホバーを選択できます。

エフェクト: Scale、イベント: クリック

エフェクト: Rotate、イベント: クリック

SVGアイコンなので、サイズも自由自在です。

エフェクト: Rotate、イベント: クリック

エフェクト: Rotate、イベント: クリック

Nucleoと連動すると更に便利

無料のアイコン管理アプリ「Nucleo」にも対応しており、アプリ内で直接アニメーションアイコンをアップロードしてプレビューできます。

アプリのキャプチャ

Nucleo

Nucleoのダウンロードは、下記ページから。

サイトのキャプチャ

Nucleo

macOS版、Windows版が無料でダウンロードできます。また、Material Designのアイコンがあらかじめ登録されているのも便利です。

sponsors

top of page

©2019 coliss