Toggleアニメーション実装の構造に関する考察


See the Pen YVLaQX by nakanishi (@nakanishi) on CodePen.

スライドメニュー等、アニメーション後の状態が2つしかないものの実装を考えてみる。状態=stateがいくつあるのかということは重要だと思う。メニューの表示/非表示、アコーディオンパネルの伸/縮。これらのように2つしかstateがないもの=トグルタイプを考える。

どのような要素で構成されているか

整理して考えてみると、トグルタイプのアニメーションの実装は、以下の4つの要素から構成されている。

  1. ユーザー操作の検知(例:clickイベントの取得)
  2. stateによる条件分岐とstateの変更(例:isOpenによる判定)
  3. DOMの操作・アニメーション(velociy.jsによるアニメーション等)
  4. DOM操作をトリガーするためのイベントの発行とリスン(例:$(window).triggerHandler(“customEvent”,()=>{}))

以上4つの操作は、実行される時系列に従って並べると以下のようになる。

ユーザー操作を検知(例:clickイベントの取得)
stateによって分岐(例:isOpenによる判定)
イベントのトリガー(例:$(window).triggerHandler(“customEvent”,()=>{}))
イベントのリスナー(例:$(window).on(“customEvent”,()=>{}))
DOM操作(velociy.jsによるアニメーション等)
stateの変更(例:isOpenの変更)

「イベントのトリガー」は、なくても実装は出来る。しかし次のように4つの要素を、以下のように2つにわけるとデバグが簡単になる。その理由は後半で検証する。

ユーザー操作を検知(例:clickイベントの取得)
stateによって分岐(例:isOpenによる判定)
イベントのトリガー(例:$(window).triggerHandler(“customEvent”,()=>{}))

イベントのリスナー(例:$(window).on(“customEvent”,()=>{}))
DOM操作(velociy.jsによるアニメーション等)
stateの変更(例:isOpenの変更)

何故デバグしやすくなるか

上記のように2つに分けて実装すると、どのアニメーションを実行するか(上段)のロジックと、アニメーションの内容(下段)を切り離すことが出来る。アニメーションの内容の中にさらに分岐のロジックがあると、アニメーションを使いまわすことができない。なので、この切り離しが有効なのではないか。

また、stateによる分岐と、stateの変更を2つに分ける点も重要である。この2つの要素が同一の単位の中にあったり、複数回登場すると、混乱するような気がする。何故なのかはわからない。要検証

その他細々したtips

  • JSの中でreturn;すると、その時点で関数が終了する。
  • jQueryイベントには名前空間を用意できる。customEvent.testイベントを発行すると、これをリスンするにはcustomEvent.testを対象としないといけない。customEventをリスンしてもダメ。
  • 複数イベントの監視は以下のように書く
  • $window.on({customEvent1:()=>{do1},customEvent2:()=>{do2}});
  • $window.off(“.test”);とすると.test名前空間にいるものは全てoffにする。
  • customEvent.test.devという名前空間の指定は、test -> dev -> customEventという階層構造を作っているのではない。これはあくまで「customEvent.test」 and「customEvent.dev」ということである。なので「customEvent.test」、「customEvent.dev」のどちらを監視しても発動する。同様に.testを削除しても、.devを削除しても、削除される。
  • ユーザー操作の監視をonする関数と、offする関数をわけておくと、アニメーション中だけユーザー操作を受け付けないシステムを簡単に作れる。

“Toggleアニメーション実装の構造に関する考察” への 2 件のフィードバック

コメントを残す

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