Home > スポンサー広告 > HTML5+CSS+JS+他jsライブラリで作るアニメーションや動きの構造を見てみる

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/150-131c8d20
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > HTML5+CSS+JS+他jsライブラリで作るアニメーションや動きの構造を見てみる

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

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

  • vanillate
  • 2015-05-04 Mon 16:08:29
  • ウェブ
html5js_2.jpg

HTML5アニメーション、アプリなど、最近いろいろと聞くようになってきたので
私自身もやっとしていた部分を改めて構造的に見てみたいとおもいます。



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

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に描画する手続き

画像でいうと、

1)データをキューに入れて
2)イベントリスナーに入れて
3)描画する+表示更新

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

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

GUI系の制作ツール

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

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

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


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

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/150-131c8d20
Listed below are links to weblogs that reference
HTML5+CSS+JS+他jsライブラリで作るアニメーションや動きの構造を見てみる from バニデザノート

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

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。