Facebook announced at its Mobile@Scale event in October that it would open-source a spring dynamics animation library for Android, Rebound, which allows developers to animate user interface elements based on the rules of physics and spring forces. Software Engineer Will Bailey offered more details on Rebound in a post on the social network’s engineering blog.
Designers at Facebook work with a tool called Quartz Composer to build rich interactive prototypes before engineering work begins. Quartz Composer is a node-based visual programming language provided as part of the Xcode development environment in Mac OS X, and it is used for processing and rendering graphical data. Quartz Composer includes a simple physics system that allows you to create physics-driven animation prototypes. For example, the Chat Heads feature of Facebook Messenger allows the user to drag friends’ profile photos, representing ongoing conversations, around the screen. Flinging a stack of Chat Heads causes the stack to attract toward the edge of the screen and eventually come to rest after expending the energy of the fling. This is achieved by applying a spring force to the Chat Head stack, which pulls it to the target point on the edge of the screen and integrates the velocity imparted by the user’s initial fling gesture.
Other examples of physics-driven animations can be seen in Facebook Home, including flinging through pages in Cover Feed, the bouncing “double-tap-to-like” indicator, or swiping your profile picture to unlock your phone. All of these interactions were initially prototyped in Quartz Composer based on its simple physics engine.
Bailey also wrote about understanding spring forces and evaluating existing animation frameworks, as well as providing a brief guide on how to use Rebound.
Readers: Are you surprised that Facebook open-sourced Rebound?