Have you ever wondered how Facebook managed to implement certain animations on its Android apps? What makes Cover Feeds work? How easy was it to get Chat Heads to animate as it does? It turns out it wasn’t as simple as you might think — there were technical limitations with the existing animation frameworks. Thus, the social networking company (once again) developed its own means, called Rebound and, like in the spirit of Silicon Valley, has open sourced it for others to use.
Today, Facebook software engineer Will Bailey shed some light on the background behind Rebound and its impact to date.
F**k it, we'll do it live!
Our biggest ever edition of TNW Conference is fast approaching! Join 10,000 tech leaders this May in Amsterdam.
Prior to its announcement in October at Facebook’s Mobile@Scale conference, designers at the company resigned themselves to using several tools to help them get apps and features to look how they wanted. One of them was Quartz Composer, a node-based visual programming language that emerged from the Xcode development environment in Mac OS X. Facebook sought to apply as much physics as possible to make its animations work as fluidly as possible. And while Quartz Composer allowed that to happen in the prototyping phase, the real challenge was when it moved to production.
Bailey says the Facebook engineering team looked at existing capabilities within the Android SDK, but were limited in scope:
Since the animations mocked-up in Quartz Composer were developed on a physics simulation, we decided that we should explore using a similar technique to implement these animations in Android. With a physics simulation we believed integrating velocity, friction, and spring forces to govern the movement of Chat Heads or Cover Feed pages would be much simpler and cleaner.
The company embarked on a quest to find something “simple, lightweight, and well-suited to the task” of animating these elements based on physics rules and spring forces. The result became the creation of Rebound.
Photo credit: Justin Sullivan/Getty Images