ハンバーガーボタンのアニメーション

By | 2015年1月11日

ハンバーガーボタン(メニューボタン)のアニメーションをいくつか考えてみました。
gifなのでソースコードは無いです。

ハンバーガーボタンのアニメーション

ハンバーガーボタンのアニメーション

1、3,5、7
2、4,6、8
と並んでいるとして、

1:動きの途中で「<」「>」みたいになる瞬間がなんとなく気に入らない。
2:真ん中の棒が活かせてない気がする。
3:回転を入れてみた。まぁ好みの感じ。
4,3に更に回転要素を入れてみた。3,4あたりの回転が入る動きが好みの様。
5:変形を加えてみた例。無難かもしれないが、棒が曲がるのが気になるかもしれない。
6:広がるイメージが付いてしまったので、スライドするだけのドロワーには向かないか。
7:棒の間の白い2本の空白に注目してみた。何となく気持ち悪いのでこの方向でもっと考えるべき。
8:便利だけど逃げのフェードイン&アウト。とりあえず作って並べてみる。

作ってみた感想としては、3,4あたりの回転する動きが個人的に気に入った様子。あとはサイトorアプリの雰囲気や上下左右の何がスライドするかによってアニメーションの尺を調整したり、反転させたりする必要がありますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です