フェンリル

Developer's Blog

【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方

blog_banner.png
こんばんは、企画の林です。
今回は 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
Twitterフェンリルのオフィシャルアカウントをフォローする
 

Facebook コメント

コメント

ラシカル開発記2011年05月26日 20:27

これだけは読んでおきたい!jQuery記事まとめ – 2011/5/16 ~ 5/22

2011年5月16日~5月22日までの間に見つけたjQuery関連記事のまとめです。   カーソルを合わせると拡大するかっこいい検索窓作成jQu...

ラシカル開発記2011年06月03日 7:13

これだけは読んでおきたい!jQuery記事まとめ – 2011/5/16 ~ 5/22

2011年5月16日~5月22日までの間に見つけたjQuery関連記事のまとめです。   カーソルを合わせると拡大するかっこいい検索窓作成jQu...

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 | スターフィールド株式会社2015年05月12日 14:44

[…] 実は、これらの処理はCPUではなくGPU(グラフィックを専門に処理する演算装置)により行われるため(参考サイト)、アニメーションがスマホのネイティブアプリ並みに滑らかになります。 […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。