Figure 7 (click image to enlarge)
Famo.us has a physics engine that can do a lot of game-like simulation, the least of which is to make animations bounce in a realistic-feeling way by using a spring model to guide the transitions. In this lesson, the red square drops from the top, overshoots the final position, and bounces three times in the span of about two seconds. If you adjust the
dampingRatio of the spring transform, the bouncing speed and decay curve change. You can adjust the numbers and immediately see the new animation behavior.
Figure 8 (click image to enlarge)
Famo.us has plans to surface visual controls for animations as part of the platform in the future, so designers can achieve the behavior they want without involving a software engineer in tweaking the simulation parameters. I have seen an unreleased prototype of one example of this running on an iPhone.
Famo.us has an
EventHandler API that allows a user to broadcast, listen for, pipe to, and subscribe from events. Event handlers can broadcast with the
trigger method. Downstream handlers can listen for the event with the
Event handlers can
pipe events to downstream event handlers, and
subscribe to events from upstream event handlers. Pipes can be chained. In general, the best practice is to use a subscription pattern, especially when listening on DOM events. Note that this explicit piping stands in contrast to the implicit event bubbling in the HTML DOM.
View base class, and therefore every derived view and widget, includes both input and output event handlers. The event library comes with convenience modules for conditionally processing events, including event filtering, mapping, and arbitration.
Famo.us does all positioning using transforms, which are basically four-by-four matrices applied to surfaces with absolute positions. As I mentioned earlier, transforms can perform translation and rotation. In addition, they can scale a surface, size it, and set its origin. The matrix multiplications that apply transforms to surfaces are straightforward, which is how the game-like Famo.us engine can render faster than a Web browser would calculate and display all the flow required for deeply nested HTML documents.
When you are admitted to Famo.us University, you can download any of the Famo.us demo and tutorial projects. In order to work with the supplied projects on your own machine and to create new projects, you'll want to install the Famo.us Toolbelt. This is basically a set of Yeoman generator and Grunt scripts to create projects and views, run a local development Web server, and package your project for distribution. You'll need Git, Node.js, Grunt, and Bower. On a Mac, you can install Node.js using Homebrew, and you can install Grunt and Bower from the Node package manager Npm.