Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

masquetteのscheduleRenderについて

masquetteでアニメーションする場合の処理は

1. The projector waits until its scheduleRender() function gets called one or more times.
2. The projector waits until the browser signals it is ready to paint the next frame (using requestAnimationFrame).
3. The projector calls the renderMaquette function to render the virtual DOM.
4. The projector determines the differences between this virtual DOM and the previous one.
5. The differences are applied to the real DOM, applying animations if specified.

といった感じの処理フローをとります。
renderMaquetteで使ったような関数なら、virtualDOMが登録されています。
この場合scheduleRenderを内部的に読んでくれるので意識する必要はありません。
ところが、jQuery等でアクションを起こそうとした場合、自力で呼び出す必要がでてきます

実際のところ

var projector = maquette.createProjector();
var x = 0;

function test() {
  var moment = (new Date().getTime() - startDate)/1000;
  x = Math.round(150 * Math.sin(moment));
  projector.scheduleRender();
  requestAnimationFrame(test);
}

function renderMaquette() {
 //略
}

// Initializes the projector 
document.addEventListener('DOMContentLoaded', function () {
  projector.append(document.body, renderMaquette);
  test();
});