Reversing the order --
mainContext.add(rotateMod).add(translateMod).add(surface), for example -- would give us a rectangle cut off at the left:
Figure 5 (click image to enlarge)
Famo.us Render Tree
As we discussed earlier, Famo.us uses matrix3d WebKit transforms on
<div> elements with absolute positions rather than using a conventional nested DOM tree in which child elements are positioned relative to their parent elements. The table in Figure 6 compares the elements of the Famo.us Render Tree with the standard DOM.
|Famo.us Render Tree||DOM|
|Nodes||Renderables and modifiers||HTML elements|
|Encapsulation||Views and widgets||Shadow DOM|
|Meaning||Structure||Structure and rendering|
|Render cycle||Retain mode||Immediate mode|
<div> elements, creating a flat HTML DOM that doesn't require any flow calculations for a redraw. The HTML
<body> tag corresponds to a Famo.us
Context, more or less. The
Context corresponds to an isolated drawing universe. You need at least one
Context, but you could have many in the same
The Render Tree has two types of nodes: renderables, such as a
Surface, and modifiers, which are responsible for the layout and visibility of the Render Tree below them. Modifiers can be chained, as I mentioned earlier.
In Famo.us, views are encapsulations of groups of renderables and modifiers that you wish to hide from the master Render Tree. Views are typically what a Unix UI developer would call a widget, but implemented as a Famo.us
RenderNode paired with an input
EventHandler and an output
EventHandler. The views in the Famous Example repository as of this writing are
SequentialLayout. The expectation is that you'll subclass views to extend and customize them into your own widgets, or write your own renderable items from more basic components.
The red square in Figure 7 started in the upper-left corner with no text content, slid down the left side over the course of a second, then slid down and to the right and wiggled over the course of 800 milliseconds, and finally showed the text content "finished." This demonstrates the chaining of two easing transforms. There are more than 30 easing curves predefined in the Famo.us library. Easing transitions take a fixed and configurable amount of time.