レンダリングプロセス

要素

タイムラインに配置されるもので、 上の要素から順番に評価されます。

要素は評価されると、ソース操作を介して描画オブジェクトを作成したり、 その描画オブジェクトを変換したりします。

作成された描画オブジェクトは、アニメーションを適用したあと、描画レイヤーに渡されます。

描画オブジェクト

楕円形、矩形、角丸四角形、動画などがあります。

プロパティには

  • トランスフォーム (移動、回転、スケールなど)
  • ペン
  • 塗りつぶし
  • エフェクト があります。

ソース操作

流れてきた描画オブジェクトをまったく別のオブジェクトに変更したり、 プロパティを変更したりします。

描画シーン / 描画レイヤー

時間軸を意識しないシーン、レイヤーです。 描画レイヤーには複数の描画オブジェクトを持つことができ、 描画シーンも同様に複数の描画レイヤーを持つことができます。

要素から描画オブジェクトを受け取ると描画レイヤーは 以下のような描画ノードを作成します。

描画レイヤーは描画オブジェクトの変更を追跡し、 変更された場合は再度、描画ノードを作成します。

1. 描画ノード
2. └ トランスフォームノード
3.   └ エフェクトノード
4.     └ 図形ノード

この描画ノードは1番から順番に実行されます。

この構造は描画内容をキャッシュする上で非常に便利です。 例えば、重いエフェクトを適用したオブジェクトに 画面外から登場するようなアニメーションをつけると、 毎フレームで重いエフェクトがかけられることになりますが、

エフェクトが適用されたあとのオブジェクトをキャッシュすると、 エフェクトの適用は数回で済みます。

1. 描画ノード
2. └ トランスフォームノード
3.   └ キャッシュした画像を描画する
GitHub LogoGitHubで表示この記事のソースはGitHubにあります。<br />改善点があればIssueやPull requestを開いてください。