on:2018年8月20日sponsorsスマホアプリやWebサイトでよく見かける、ハンバーガーメニューやケバブメニューのアイコンをアニメーションで変形させるUI用のスニペットを紹介します。いう方は「スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか」をご覧ください。-GitHub上記はアイコンが変形する仕組みをアニメーション化したもので、通常時は下記のように利用できます。コピペで利用するのも楽しいですが、こういう仕組みを考えるのも楽しいですよね。通常のアニメーションアイコンはSVGで実装されています。/></svg></label></div>ハンバーガーアイコンも同様に、クローズの「x」と矢印にアニメーションで変化します。変形の仕組みハンバーガーアイコンも通常時は、下記のように表示されます。通常のアニメーション実際の動作は、下記ページで楽しめます。左上の「Debug」をオンにすると、変形が表示されます(0.5xで見えます)。