月別アーカイブ: 2017年8月

ハンバーガーメニューからバツに変化するトグルアニメーション

ハンバーガーメニューのラインを活かしたトグルアニメーションのうち
2017年8月現在アップル社のスマホUIにも採用されている
ハンバーガーメニューと閉じるボタンを意味するバッテンの表現とを往復する
トグルアニメーションを作成しCodePenに置きました

See the Pen hamburger to cross by sekiyaeiji (@sekiyaeiji) on CodePen.dark

アップル社のスマホUIではハンバーガー風のデザインは2本線なのですが
ハンバーガーメニューは一般的には名前の通り(つまりバンズと具による)3本線なので
3本ラインにして、中央の1本は
バッテン表現の際にジャマにならないように
回転しながらフェードアウトしてしまっています

このようなアニメーション表現の存在は
時として不当に軽視されがちですが
インタラクションの前後関係を説明する小さな気遣いとして
使いどころによってはヘルプなどの言葉による説明よりも
実ははるかに有用な場合もあると感じます

3本の線が移動するだけのアニメーション表現ですが
移動の軌跡のバリエーションには限りがありません

こんなにシンプルなマイクロインタラクションですが
CSSアニメーションはまだまだ多彩な可能性を秘めていると思わせられる表現の一例だなと感じました