前回の記事(setTimeoutとUIスレッドを学ぶよ JS Advent Calendar, オレ標準コース)で紹介したUIスレッドの概念でアニメーションをみてみる。 前回の復習 UIスレッド UIスレッドとはjsとUIの更新が行われるプロセスのことである。 UIスレッドはただのキューイングシステムでプロセスがアイドル状態になるまでタスクを保持する。 プロセスがアイドル状態になったら次のタスク(UI更新やjsの実行)をキューから取り出して逐次的に実行していくものである。 これをもとにアニメーションがいかに描画されているのかをみてみる。 今回はこんな感じのアニメーションについて。 【demo】 http://jsfiddle.net/nazomikan/7RJWU/ (function (win, doc) { var run = doc.getElementById('run'), //
![アニメーションとUIスレッド - ぶれすとつーる](https://cdn-ak-scissors.b.st-hatena.com/image/square/a72a4d4a650825e766958c90891ad522e6580cb9/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnazomikan%2F20120109%2F20120109205457.png)