2018年08月20日(月)

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

• 0
• 164
• 86
• 220

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

ケバブってなに？ という方は「スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか」をご覧ください。

Menu Button Animations
Menu Button Animations -GitHub

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