HTML5手習い

アニメーションのタイミングを取る方法

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
requestAnimationFrameメソッドを使用して、アニメーションのための画面更新処理を最適なタイミングで行う方法について学びます。また、経過時間に応じてアニメーションを行うための基本処理についても説明します。
講師:
05:44

字幕

このレッスンでは JavaScript で アニメーションを行うのに 最適なタイミングで 画面の更新処理を行う方法について説明します JavaScriptではアニメーション処理を 最適なタイミングで行うための機能として Window オブジェクトの requestAnimationFrameメソッドが 用意されています このメソッドはコールバック関数をとり 渡されたコールバック関数を 次に画面を更新するのに 最適なタイミングで呼び出してくれます 通常 この関数を使うと アニメーションは 60 fps で更新されます それでは実際に この機能を使ってみましょう アセットの animation.html を テキストエディタと Google Chromeで開いてください この画面に円運動をする 図形を描画してみましょう それではまず アニメーションの 枠組みの準備からです アニメーションの枠組みを準備するために まず Windowの― requestAnimationFrame メソッドを使います そして コールバック関数を渡します コールバック関数は 再度呼び出す必要があるため 名前をつけておきます そしてそのコールバック関数は < timestamp > という パラメータをとります この < timestamp > は アプリケーションが 起動してからの時間を示しており アニメーションをする際に使用します そしてアニメーション用の時刻を 格納する変数を用意しましょう < p > という変数には 時間を秒で格納していくことにします それから < t > を作るために 初回の timestamp を 起動しておくための変数 start を作ります そして start がまだ一度も 初期化されていなければ start を初回呼び出し時の timestampで初期化します そして < t > を < timestamp > 変数と < start > 変数を使用して計算します < t > は 「 timestamp - start 」 これはミリ秒で時刻が入っていますので 秒に変換するために1000 で割ります すると < t > は経過時刻を 秒で表したものになります そして円を描画しましょう ストロークスタイルの設定をします ストロークスタイルは rgba で 「2552552551」 白ですね 白を設定しておきます そして begin パスで パスの指定を開始し 円を描画してみましょう 円の中心座標は 半径 100 の円とします そしてその円は canvas の中心と その円の中心が一致するような形で 軌跡を描きます 「canvas.width / 2」 y 座標はサインをコサインに変えて 「width」を「height」に変えます これがその円の軌跡を表した式です そして その円自体の半径は 30 そして開始角度・終了角度は 2 倍です そして Context の Stroke これで円が描画されます そして大事なことは 処理が完了したら 再度 requestAnimationFrame で 自分自身を呼び出します これによって毎フレーム 描画が更新されます ではリロードしてみましょう 変数名の記述が間違っていました パラメータ名の部分が間違っていましたね そして再度リロードします するとこのように 円が 円軌道を描いて描画されていきます ここで問題なのは これはこれで面白いのですが 毎回画面をクリアしないと このように描画がどんどん 重なっていってしまいます そのため 通常コンピュータグラフィックスで アニメーションをする際には 毎回画面を一度クリアします clearRect (0,0,canvas.width,canvas.height) これで画面がクリアされます すると このように円が円軌道を描いて アニメーションしています このレッスンではJavaScriptで アニメーションのタイミングを 取る方法について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。