ハンバーガーメニューをタップしたときの挙動でよく見かける「3本線がなめらかにクロスして×（バツ印）に変化する」アニメーションをSTUDIOで実装する方法を解説します。目次1. ハンバーガーメニューの設置まずはハンバーガーメニューを作成します。ハンバーガーメニューの基本的な作成方法については公式のヘルプページで詳しく解説されてありますので、ここでは割愛します。今回はヘッダーの中に絶対配置でハンバーガーメニューを配置しています（配置方法などはそれぞれの事情に合わせて調整いただいて問題ありません）。なお、アイコンのみで配置するのではなく、縦横50pxのボックスの中にアイコンを入れています。これはアイコン単体だとタップの判定領域がシビアになってしまうからです。ハンバーガーメニューから多少ずれたところをタップしてもメニューが開くように50px × 50pxの領域を確保しています。2. モーダルでメニューページを作成メニューページを作成し、さきほどのハンバーガーメニューと同じ位置に絶対配置でボックスを配置します。なお、今回はわかりやすいようにモーダルページの背景色を黒にしています。なお、モーダルのトランジションは「fade」に設定します。3. 自作のハンバーガーメニューを作成し、バツ印に変化させるアニメーションを設定するここからが今回の本題となる内容です。アイコンは形を変化させることができないため、ハンバーガーメニューの3本線をバツ印に変化させるためには、ボックスを3つ並べた自作のハンバーガーメニューが必要です。そこでまずはハンバーガーメニューのアイコンと全く同じものをボックスで再現します。サイズ24のアイコンの場合、自作するハンバーガーメニューのボックスは横幅18px、縦幅2pxでそれぞれのバーの間隔は3pxあけると綺麗に再現することができます。今回は黒背景の上に設置するため、塗りは白にしています。トップページに自作のハンバーガーメニューを設置しない理由についてここで自作のハンバーガーメニューを作成するのであれば、トップページにもそれと同じものを配置すればよいのでは？と感じられる方もいらっしゃると思います。たしかにその通りではあるのですが、表示するデバイスによっては、自作したハンバーガーメニューが想定通りに綺麗に表示されないことがあります。3本線のうち真ん中の線が上下どちらかに1pxずれて表示されたり、線の太さが意図していない太さで表示されたりします。下図はXperia 5 IIでみたときの表示のされ方で、左が自作のハンバーガーメニュー・右がアイコンです。このずれた左側のハンバーガーメニューがトップ（ホーム）ページ上に常に表示されている状況は避けたいため、トップページにはアイコンでハンバーガーメニューを配置し、メニューモーダルには自作のハンバーガーメニューからバツ印へのアニメーションを実装するという形をここでは取っています。モーダル画面ではすぐにハンバーガーメニューからバツ印へのアニメーションが再生されるため、3本線が表示されるのは一瞬です。そのため、仮にずれがあっても許容範囲内と判断しました。3本線をベースにして、メニューページで表示する「×（バツ印）」を作成する自作のハンバーガーメニューの上の線と下の線を交差させる設定を行います。「モーション」で以下の設定を加えます（作成するサイズが変われば、以下の数値もそれに伴って変化します）。上の線Y 5px45deg 回転真ん中の線塗りを0下の線Y -5px-45deg 回転これでバツ印が作成できました。トップページのハンバーガーメニューと位置が綺麗に重なっているか確認するためには、モーダルページの背景色を半透明にする方法がおすすめです。出現時のスタイルで、3本線からバツ印に変化するアニメーションを設定次は「3本線からバツ印に変化するアニメーション」を実装していきます。上の線も下の線も同じアニメーションで、「出現時」のスタイルで下記のように設定します。必須となるのは「Y 0px, 回転を0deg」にすることです。イージングや時間、遅延はお好みでの設定で構いませんが、遅延は0ではなく、わずかに設定しておいた方がアニメーションが明確で良いかもしれません。トップページからモーダルメニューに切り替える際に、背景色を反転させているかどうかで遅延の有無の必要性が異なってきます（背景色を切り替える場合は遅延がいくらか設定されていないと「3本線→バツ印」への移行が明確に認識できないアニメーションとなります）。イージングについては、ここでは「cubic-bezier(0.15, 0.9 , 0.41, 1.04)」としています。真ん中の線の出現時のアニメーションスタイルは「透明にしている塗りを最大に」「遅延200」を設定しています。遅延については、こちらも好みになりますが上下の線がクロスするアニメーションを邪魔しないように200としています。あとは絶対配置で置いている50px × 50pxのボックスに「モーダルを閉じる」のリンク設定を加えれば完成です。現在の仕様の範囲内では、閉じる動作に対して「バツ印から3本線になめらかに戻る」アニメーションを設定することはおそらくできないと思いますので、“片道”のみの実装となります。まとめ特にひねりのない実装方法で、作成にはひと手間かかりますが、一度作ってしまえばコピー・貼り付けでプロジェクトをまたいで転用することもできます。馴染みのあるアニメーションなので使用する機会も多く、おすすめです。