ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブプログラミング > 「requestAnimationFrame」でJavaScriptアニメーションをスピードアップさせる方法

「requestAnimationFrame」でJavaScriptアニメーションをスピードアップさせる方法

投稿日:2013年4月30日       ソフトウェア:CSS3

「requestAnimationFrame」でJavaScriptアニメーションをスピードアップさせる方法


Step1:はじめに

requestAnimationFrame

CSS3のおかげで見た目の良いアニメーションにFlashが必要なくなりました。

JavaScriptさえいらないと言われます。

しかしCSS3では不十分な場合もあります。

アニメーションの計算や再計算をするのに、
JavaScriptを使う必要はありません。

「setTimeout」や「setInterval」を使う必要はありません。

定義されたインターバルに関数をリピートするだけなのでメリットはないのです。

アニメーションを見るのに、定義されたインターバルは最適とはいえません。

ここで取り上げる二つの関数を使っている場合は、
アニメーションの表示に必要なインターバルの値がわからなくなっているかもしれません。

さらに、「setTimeout」や「setInterval」は
エフェクトを表示させるリフレッシュレートと同期することはありませんので、
アニメーションが正確に表示されません。

Step2:「requestAnimationFrame」によって責任はブラウザへ

HTML5の別の選択肢「requestAnimationFrame」を紹介します。

オペレーションのモードはこれまでの関数と同じで、大きな例外は一つだけです。

リフレッシュレートのインターバルを定義することに代わり、
これまでよりもサイズがダウンし、ブラウザの役割が大きくなります。

「setTimeout」や「setInterval」と比較すると、
複数のアニメーションを並行してブラウザで表示させる場合に大きく違いが出ます。

これまでの関数では流れるようで現代的とは感じられないでしょう。

別の選択肢「requestAnimationFrame」は必要に応じフレームレートを減らしながら、
アニメーションの流れを滑らかに保ちます。

var schritt=0; function animation() { schritt += 10;
document.getElementById("element").style.left = schritt + "px";
window.requestAnimationFrame(animation); }
window.requestAnimationFrame(animation);

この例では10ピクセルずつ左から右へHTML要素を動かします。

デフォルトのリフレッシュレートは1秒当たり60フレームですが、CPUの負荷によって変わります。

ブラウザはあらかじめ設定されたフレームレートでは動きません。

「requestAnimationFrame」の別の利点は、
ウィンドウやタブの目に見える部分のアニメーションだけが動くことです。

ウィンドウやタブでアクティブではないアニメーションの存在がわかると、
アニメーションは停止しますが、
ウィンドウやタブがアクティブになるとアニメーションは自動的に再開します。

アニメーションを手動で止めるには、「cancelAnimationFrame」関数が使えます。




Step3:ベンダープレフィックス付きだけをサポートするブラウザ

この記事を書いている最中にも、Webkit、Mozilla、
最新のInternetExplorerが「requestAnimationFrame」関数をサポートしています。

「cancelfunction」と「cancelAnimationFrame」は今のところMozillaだけに限られています。

関数が比較的新しいと、ブラウザごとに異なる構文が必要になります。

変数を使うことによって対応するプレフィックスを設定できます。

var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

Step4:結論

スムーズなアニメーションの動作はまぎれもなく「requestAnimationFrame」によって実現します。

その方が動作が速くて信頼性が高いのです。

ですので、可能ならこれまでの方法よりも今回紹介した手法を選択した方がよいといえます。

古いブラウザが実装されているとフォールバックが起こり得ます。

特にモバイルクライアントは処理能力が低いので、ユーザーは今回の手法がお得です。

できのよい比較対象を探しているようでしたら、
Microsoft's Test Drive of the Internet Explorer
を必要であればご覧ください。

引用:Web Design Library   翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング