SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック

Post on:2018年8月20日

sponsors

スマホアプリやWebサイトでよく見かける、ハンバーガーメニューやケバブメニューのアイコンをアニメーションで変形させるUI用のスニペットを紹介します。

上記はアイコンが変形する仕組みをアニメーション化したもので、通常時は下記のように利用できます。
コピペで利用するのも楽しいですが、こういう仕組みを考えるのも楽しいですよね。

通常のアニメーション

アイコンはSVGで実装されています。

<label>

</svg>

</label>

</div>

ハンバーガーアイコンも同様に、クローズの「x」と矢印にアニメーションで変化します。

変形の仕組み

ハンバーガーアイコンも通常時は、下記のように表示されます。

通常のアニメーション

実際の動作は、下記ページで楽しめます。
左上の「Debug」をオンにすると、変形が表示されます（0.5xで見えます）。