【JavaScript/CSS3】アニメーションを作成する際のTips

読了: 約 5 分

現在やっているプロジェクトや、今後スマートフォンの市場でリアルタイムウェブの拡がりによって、WEBアプリが増えてきますよね。
プラットフォームのゲームでもFlashからJavaScriptにコンバートするシステム会社を買収して、そのシステムを導入していたり。
更に、これまでのマークアップとJSerの仕事の境界は曖昧になっていますよね。その中で、どうやってアニメーションを作成するか、
発想の仕方、スクリプトの両面のTipsをメモしておこうと思います。

概要

1 目的
2 CSS3でのアニメーションについて
3 JavaScriptでのアニメーションについて
- 3.1 ページめくりのturn.js
4 iPhone,androidでのバグについて
5 参考書籍
- 5.1 デザイナーの方の入門書といえばこれ

目的

マークアップとJSの作業分担を明確化するため
アニメ―ション作成の効率化

作業分担が曖昧になる事で責任の所在があいまいになります。
予めどういう組み方をするのかの設計が必要かと思いますが、
click等によるイベントならばJSとか。

ページが読みこまれた時から繰り返し処理なら、CSS3のtranstionで良いよねけど
androidどうなんだっけみたいな
分担を明確にするためです。これは大事な事です！！！！(；´Д｀)

そもそもマークアップがJSまで含まれている時もあるんですけどね(笑

アニメーション作成の効率化について
正直これは結構むずかしいと思いますが、ゆくゆくはこのサイトをwikiというか、フレームワークの置き場所としていきたいので
地道にメモしていきたいと思います。

CSS3でのアニメーションについて

最近CSSプログラミングだとか、結構CSSでのアニメーションでも面白いものが増えてきていますよね。
何を創るにしても基本と応用は必要なのでその辺ご紹介しておきます。

基本～応用編

これが基本を押さえるのに一番分かり易いかなと思います。
これを応用して、JSで制御とかすればそれなりのものが出来るかなーと
今日からCSS3アニメーションを使えるようになるチュートリアル

野球のソーシャルゲームの最初でしょうか。
CSS3を使った演出テクニックがすごいと話題に

超応用編

CSSだけでここまで出来る!? -CSSプログラミングについて-
どう考えても無茶な「CSSプログラミング」が話題に

ただ、webkit系だけなのでiPhoneとブラウザも限定されてしまいます。
受託や自社メディアであってもそれだけに限定するのは難しいですね。。

page flipのJSです。海外の記事ですが、参考になりますね。
Pure CSS3 Page Flip Effect

参考にクリックで動作するページフリップ作成しました。

メインの処理はクリックした後の下記の処理

$("#page-flip #r1").css({
	"-webkit-transform-origin": "1570px 500px",
	"-webkit-transform": "translate(-1285px, -500px) rotate(0deg)"
});

$("#page-flip #p1 &gt; div").css({
	"-webkit-transform-origin": "285px 0",
	"-webkit-transform": "translate(1285px, 500px) rotate(0deg)"
});


$("#page-flip #p1 &gt; div").css({
	"-webkit-transform-origin": "285px 0",
	"-webkit-transform": "translate(1285px, 500px) rotate(0deg)"
});

$("#page-flip #r3").css({
	"-webkit-transform-origin": "1370px 500px",
	"-webkit-transform": "translate(-1285px, -500px) rotate(0deg)"
});

$("#page-flip #p3 &gt; div").css({
	"-webkit-transform-origin": "0 0",
	"-webkit-transform": "translate(1000px, 500px) rotate(0deg)"
});

なんとChromeのuseragentの変更の、android2.3 nexusでは上記の処理は動いています。
※実際に使用する場合は、実機確認をしてください。

各端末バグ確認表

仕事でやっているものの各プロパティの動作確認を表にしておきます

確認デバイス	状況
docomo so-02c	異常なし
iPhone4s au ios 5.1.1	異常なし
docomo_Xpreria acro HD_ver 2.3	少し挙動が遅い
an_INFOBAR A01_ver 2.3.3	少し挙動が遅い