SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック
Post on:2018年8月20日
sponsors
スマホアプリやWebサイトでよく見かける、ハンバーガーメニューやケバブメニューのアイコンをアニメーションで変形させるUI用のスニペットを紹介します。
ケバブってなに？ という方は「スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか」をご覧ください。
Menu Button Animations
Menu Button Animations -GitHub
上記はアイコンが変形する仕組みをアニメーション化したもので、通常時は下記のように利用できます。
コピペで利用するのも楽しいですが、こういう仕組みを考えるのも楽しいですよね。
通常のアニメーション
アイコンはSVGで実装されています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="menu cross menu--1"> <label> <input type="checkbox"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="30" /> <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" /> <path class="line--2" d="M0 50h70" /> <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" /> </svg> </label> </div> |
ハンバーガーアイコンも同様に、クローズの「x」と矢印にアニメーションで変化します。
変形の仕組み
ハンバーガーアイコンも通常時は、下記のように表示されます。
通常のアニメーション
実際の動作は、下記ページで楽しめます。
左上の「Debug」をオンにすると、変形が表示されます（0.5xで見えます）。
See the Pen Dot Menu Animations by Tamino Martinius (@Zaku) on CodePen.
See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.
sponsors
