こんばんは、企画の林です。
今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。
iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。
※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。
iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには
jQuery.animate() を使ってはいけません。
CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。
（jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。）
上下左右どの動きも transform:translate3d で動かしましょう。
スマートフォン向けに jQuery Mobile というすばらしいライブラリもあるのですが、
細部にまで拘って作る場合は、jQuery くらいで抑えた方が自由度が高くて良いです。
そんな transform:translate3d の使い方です。
jQuery.animate() を使っている人にわかりやすくコードを書いてみます。
jQuery を使って <div id="hogehoge"></div> というオブジェクトを右に 50px、上に 20px、速度 500ms で動かすには以下のように記述します。
jQuery.animate() の場合
$(‘#hogehoge’).animate({left:’50px’, top:‘-20px’}, 500, ‘swing’, function(){
// アニメーション終了処理
// アニメーションでの移動後 X,Y 座標を取得するには以下の方法で
var x = $(this).css(‘left’); // 50px
var y = $(this).css(‘top’); // -20px
});
transform:translate3d の場合
$(‘#hogehoge’).css({
‘-webkit-transform’:‘translate3d(50px,-20px,0)’,
‘-webkit-transition’:‘-webkit-transform 500ms cubic-bezier(0,0,0.25,1)’
}).one(‘webkitTransitionEnd’, function(){
// アニメーション終了処理
// アニメーションでの移動後 X,Y 座標を取得するには以下の方法で
var matrix = new WebKitCSSMatrix(window.getComputedStyle(this).webkitTransform);
var x = matrix.e; // 50
var y = matrix.f; // -20
});
-–
translate3d という今までとは違った座標を移動させるアニメーション処理ですが慣れてしまえば簡単です。
この方法で上下左右にとても滑らかにアニメーション移動させることができます。
Sleipnir Start for iPad の多くのアニメーションはこの記述で行なっており、タッチイベントと組み合わせることで iPhone/iPad のネイティブアプリのような操作感を実現する事ができます。
次回はタッチイベントについて書きたいと思います。お楽しみに★
企画：林
■ Sleipnir Start for iPad
http://m.sleipnirstart.com/
（iPad でアクセスまたは Safari でユーザーエージェント偽装することで動作を確認できます）
■ Sleipnir Mobile for iPhone/iPad
http://www.fenrir.co.jp/iphone/apps/sleipnir-mobile.html
フェンリルのオフィシャルアカウントをフォローする