HTML5手習い

アニメーションの原理

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションの原理と、グラフィックスをアニメーションさせるためには、どの程度のFPSで画面を更新する必要があるのかについて学びます。
講師:
03:19

字幕

このレッスンでは アニメーションの原理ー すなわち コンピュータのグラフィックスで どのようにアニメーションを 生み出せば良いのかについて学びます それでは アセットの manual.html を Google Chromeで開いてください HTMLを開くと このような四角形が表示されます コンピュータでアニメーションを 生み出すためには 画像を少しずつ変化させながら 高速に画面を切り替えていく必要があります 人間の視覚と脳はそのような切り替えが 毎秒 10 枚から 12 枚程度の速さになると だんだんそれがアニメーションしてきて いるように認識するようになるー と言われています それでは こちらのブラウザを クリックしてみてください クリックすると このように 四角形の位置が変化します 少し速くクリックすると このように 四角形が少し滑らかに回転します それでは 高速にクリックしてみてください あるいは キーボードでもかまいません 何らかのキーを押せば このように 四角形が更新されます アニメーションしているように 見えるでしょうか 通常コンピュータで アニメーションを表示させる場合には タイマーで自動的に更新をかけますので このようなことをする必要はありません ご安心ください それでは アセットの auto.html を開いてください auto.html を開くと このように四角形の表示が 一定間隔で更新されます 初期状態では 5 fps すなわち 毎秒 5 枚の間隔で 更新されています それでは この fps を だんだんと上げていってみましょう スライダーをクリックして キーボードの右を押せばスライダーの値を 変化させることができます 左に押せば下がっていきます 一番左までスライダーを持っていくと 1 fps つまり毎秒 1 枚間隔での更新です では これをもう少し上に上げて 12 fps 程度にしてみましょう それなりにアニメーションを しているようにも見えますが まだまだ違和感があります では これを 24 fps まで もっていきましょう 24 fps は通常映画で 使われているフレームレートです それなりに滑らかに見えますが まだ若干の粗さがあるようにも感じます ビデオゲームは通常 30 fps または 60 fps です では 60 fps まで上げてみましょう するとかなり滑らかになりました 60 fps では 1 フレームに許された 処理の時間は約16 ミリ秒です この 16 ミリ秒の間に すべての計算を行って 画像の更新に間に合わせなければなりません このため ビデオゲームの開発では フレームレートの維持に かなりの労力が費やされています このレッスンでは アニメーションの 原理について学びました

HTML5手習い

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

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

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

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

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