Hatena::ブログ(Diary)

最速チュパカブラ研究会

 | 

2007年3月27日

GeckoのReflowをアニメーションにする 23:19

reflow animation

MDCの記事用にGeckoのReflow(レイアウトを組み立てる処理)の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。

まず、みんなの好きなGoogle。あんまり面白くないです

D

続いてWikipediaスクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。

D

最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。

D

作り方は大体以下のような感じです

  1. 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードMozillaに仕込む
  2. Rubyスクリプトでログを舐めて、frame treeを再構成する
  3. もう一度最初からログを舐めて、各frameの時系列変化を再現する(ここでRuby/SDLで描画してbmpに吐き出す)
  4. GIMPTMPGEncなどで後処理

IamBarIamBar 2007/03/28 00:35 MDC
http://www.mdc.ac.jp/
のどこらへんに寄稿されたのでしょうか。

gyuquegyuque 2007/03/28 13:20 MDC違い…
http://developer.mozilla.org/ja/

 |