ハンバーガーボタン(メニューボタン)のアニメーションをいくつか考えてみました。
gifなのでソースコードは無いです。
1、3,5、7
2、4,6、8
と並んでいるとして、
1:動きの途中で「<」「>」みたいになる瞬間がなんとなく気に入らない。
2:真ん中の棒が活かせてない気がする。
3:回転を入れてみた。まぁ好みの感じ。
4,3に更に回転要素を入れてみた。3,4あたりの回転が入る動きが好みの様。
5:変形を加えてみた例。無難かもしれないが、棒が曲がるのが気になるかもしれない。
6:広がるイメージが付いてしまったので、スライドするだけのドロワーには向かないか。
7:棒の間の白い2本の空白に注目してみた。何となく気持ち悪いのでこの方向でもっと考えるべき。
8:便利だけど逃げのフェードイン&アウト。とりあえず作って並べてみる。
作ってみた感想としては、3,4あたりの回転する動きが個人的に気に入った様子。あとはサイトorアプリの雰囲気や上下左右の何がスライドするかによってアニメーションの尺を調整したり、反転させたりする必要がありますね。