HTML5+CSS+JS＋他jsライブラリで作るアニメーションや動きの構造を見てみる

ざっくりとした構造は、こんな印象

divタグのようなブロック要素のなかが、flashのステージみたいな状態になっていて
この要素のなかではjsで読み込んだ画像などのメディアを読み込み、表示するという手続きが再度必要になる場所になっている。
アニメーションはデータを読み込むたびに初期化するという方法でパタパタアニメのような処理をしているよう。

で、もともと定義されている「canvas+css+js」な組み合わせでも
オブジェクト化されたものを動かしたりできるけれど
手続きがおおい。→なので、よく使う手続きをまとめて関数化して、独自の名前空間で使えるようにしたライブラリやアプリができた。

というような感じなのかな、と思いました。

なので、本質は違うかもしれないけど、Create.js や Edge animate のjs独自関数なんかは全部jQueryみたいなものかなーって思うと、なんだかしっくりきました。
「jsだけで簡単に操作できる」は正解だし間違い。jsのなかの関数やどのソースを使うかによって操作の手順が変わってくるし、書き方もいっぱいあるっぽいです。

HTML5+CSS3での通常コーディングについて

このあたり、名前変えたらいいのにって思うのですが
HTML5+CSS3に関しては、アニメーションなどが加わってタグが少し追加されたり非推奨になったり定義の仕方が変わっただけで、作法はほとんどXHTMLなどとかわりありません。
デザインでいうと、枠を作って、画像ファイルを参照してっていう流れです。
最近のウェブサイトはそういう意味ではほとんどHTML5になってきているのではないでしょうか。

インタラクティブな部分を除いてもHTML5、canvasベースの部分が追加されてもHTML5って呼ぶのがまたぼんやりさせてしまう原因なのでは、と思ってしまいます。

Create.js

HTML5のCanvas上の動きでよく使うものを少しの手続きでできるようにしたライブラリ。
（音再生だけならCanvasいらないっぽいですが。）
ソースコードベースでの開発になります。
HTML5アプリケーションやゲームも作れるすぐれもの。Flashとの連携も優しく、Action Script系の技術を持っている人には優しいらしいです。
HTML5の機能を使いやすくするクッションみたいなものかなと思います。

Create.jsで見るcanvasに描画する手続き

画像でいうと、

１）データをキューに入れて
２）イベントリスナーに入れて
３）描画する＋表示更新

という手続きを踏みます。

定義→設定→描画という流れです。
知ってもらいたいのは、一つの画像を表示するにもいくつかの手続きが必要になる点ですね。
HTML（マークアップ言語）の感覚で突っ込むより、どちらかとプログラミング脳で臨んだほうがよさそうなのがわかるかとおもいます。

GUI系の制作ツール

Edge Animateにしても、Hypeにしても、同じように定義→設定→描画というようなことはやってて、書きだされたソースコードには入っていくのですが、単純に画像を平行移動させるとか、フェードイン・フェードアウト・イージング処理などオブジェクトの目に見える「動き」の部分に対してクリックと目に見える設定でタイムラインごとに行えるというのが強みですね。
ここでは触れませんが、google web designer も同じような目的を持っているものだと思います。（こちらは広告特化っぽいですね。）

で、この２つのアプリケーションでも「簡単にJSで制御できる」といウリ文句があるのですが、「どのJSなんだよ」、ってなりませんか。・・なんと。どちらも独自のAPIが用意されているようです。

→Edge AnimateのAPIはこちら。　名前空間は AdobeEdge
→HypeのAPIはこちら。　名前空間は hypeDocument

☆

いろんな技術に対してネーミングするのが流行っているなら、こういう動きの違いにこそ名前をつけて呼んであげたい気分になるくらい、やれることも、方法もたくさんあるみたいですね。もう少し整理されたらいいなぁって思います。
大きな流れ的にはこんな感じかと。

ご参考にどうぞ。