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

Post on:2018年8月29日

sponsors

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

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

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

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

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

ハンバーガーメニュー

閉じるアイコン

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

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

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

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

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

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

Nucleoと連動すると更に便利

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

Nucleo

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

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