jQuery Easingを使って階層メニューの表現を考えてみました。
といっても進捗10%くらいですが、、、
Easingを使ってゲームメニューのようなリッチな階層メニューを作りたかったので、ちょっと1階層だけイメージを作ってみました。
下記がそのプロトです。

1

jsdo.itがいつの間にか閉鎖されていたので、当時のコードは消失していましたorz (2022/9/17 更新)

もちろんデザインする要素はまだ多々あるのですが、とりあえず昨日の成果はこんな感じです。
これからかっこよく、利用可能な形にしていきたいと思います。

ディレクトリを辿るUIを目的に検討していますが、この展開形式のよい点はパンくずリストと階層表現が一体になっているところかなと。
もちろんその分UIの表示領域が広がってしまうのですが、うまくアニメーションを入れながら要素を削ってすっきりできれば、、、とか思っています。

アニメーションは動きによって、静的に表現されている情報に加えて時間方向に想像させる力があるので、適切に使うことで利用しやすさや、かっこよさ、気持ちよさを演出できるのではないかと思っています。

とりあえず.animate()を使ってみたので、書いておきたいと思います。
jQueryのEasingライブラリを使っています。


.animate()については、こちらに参照があります。
CreateJSもすこし触ってみたのですが、アニメーションの指定はほぼ同じなんだな、と思いました。CreateJSはCanvasがないと使えないので、まずはjQueryでやってみました。

1

$(".arrow").animate({"opacity":0},400, "easeOutQuint");

こんな感じで、第一引数にオブジェクト形式で変化させたいパラメータと数値をセットで入れていき、変化する時間を第2引数にセットするだけです。
第3引数はEasingのタイプを指定でき、ここで動作させて確認することができます。

今回は最初の要素のアニメーションの後に、リスト化される要素をアニメーションしたかったのでCallbackも使っています。

1
2
3
4
5
6
7

 $(".node").animate({"marginLeft":"100px","opacity":1},1000,"easeOutQuint",
                           function(){
                             //$(".child").animate({"marginLeft":"100px"},1000,"easeOutQuint");
                             $("#item2").animate({"marginTop":18 + "px","opacity":1},300,"easeOutQuint");
                             $("#item3").animate({"marginTop":36 + "px","opacity":1},300,"easeOutQuint");
                           });
      });

こんな感じで指定すると、最初のアニメーションが終わったタイミングでCallbackが実行されるので連続して段階的にアニメーションさせることができます。