Matthew Wear

What is Facebook Rebound?

A simple to use, open-source spring dynamics animation Library for Android (and Javascript). Created by Will Bailey (and maybe unknown others, but I’ll just give him all the credit for now). The library takes inputs for a spring, then once the spring is accelerating, the library computes a value for that spring with which you can apply to a View for great springy animations.

Twitter: @will_bailey

Demo

Here is the last feature I built while I was at Evernote. The feature was code named ‘Skittles’. Skitch is an awesome screenshotting, image and pdf annotation tool for Mac, Windows, Chrome, iOS and Android. Brian Griffey (@briangriffey) and myself built Skitch 2.0 for Android. The original version had a very large menu near the bottom where the user could choose their tools and colors for annotation. When Skitch for iOS was being redesigned Steve Breen (@steve_breen) and Jesse Guerrero (@UserInterface) decided on a design that would free up more of the annotation canvas for the user’s image and that was easily navigated with a minimal number of taps and gestures, basically, they came up with Skittles. I was tasked with creating the skittles for Android.

Skittles are a fairly complex interaction, users can tap and drag fingers to switch tools, they can tap and tap to switch tools, submenus fly out when a tool supports them, the tools reorder and many other small details. When Steve completed the interaction on iOS I was impressed with how fluid the animations were; it was rare to see a skipped frame which made the UX feel very natural and gave my brain context while navigating the app. I wanted to give the same effect on Android, even on lower end devices.

When I attempted to get the animations feeling as natural with objectanimator/property Android animations I saw too many skipped frames, not to mention the interpolators just didn’t feel natural at the end of the animations with this interaction. I’m not sure why this was as I haven’t dug too deep into the animation source, and I’m positive most of the problem was programmer error. Either way, I hadn’t given up hope to get the interaction right. (Note: You must use standard Android Animations to utilize developer settings on all versions of Android and battery saving mode in L).

Then I came across Facebook Rebound through a Twitter exchange between Jake Wharton and Will Bailey where Jake was criticizing the new library for only building with Buck, Facebook’s build system (You can now build Rebound with gradle). Seems that everyone’s first reaction to something from Facebook is skepticism after their Dalvik patch hack, but personally I’ve always been impressed with their engineering team and even their infamous hack (I just lost any street cred I might have had). I’ve interacted with Will Bailey a few times on Twitter and the Rebound Facebook group (https://www.facebook.com/groups/rebound.lib/) and he’s also great.

Here is the Skittles interaction on Android I was able to achieve with Rebound. I’ve heard from folks on the Google Play beta that Evernote used the SkittlesView I made in their note creation with their next version of their Android client:

Update: Evernote did release v6 and it has the Skittles View (tweaked by Kenny Byun @ikbyun)

This isn’t a post about how I made Skittles but rather how to use Facebook Rebound, but I just wanted to give some context about why I’m familiar with the library.

Understanding Spring Forces (from a guy who had to take Physics twice in college)

It’s not terribly important that you understand the physics behind Rebound, but a quick refresher can’t hurt.

We don’t actually know what Hooke looked like, this is just a guess :P

Hooke’s Law: “…The force F needed to extend or compress a spring by some distance x is proportional to that distance.

That is, F=kx

Where k is a constant factor characteristic of the spring, its stiffness”

Basically, if the tension of a spring (k) is great then the force (F) to compress or extend it will increase as the distance (x) is increased.

Then, if you take the F, you can apply Newton’s 2nd Law (F = ma) to calculate your acceleration at a given point.

Rebound also adds a friction or damper constant to the equation that is used to tell the library how much to bounce at the end.

Rebound

Website: http://facebook.github.io/rebound/

Gradle dependency:

dependencies {
 compile 'com.facebook.rebound:rebound:0.3.4'
}

Animating with Rebound is an easy 5 step process (taken from Website)

1. Create a SpringSystem

// Create a system to run the physics loop for a set of springs.
SpringSystem springSystem = SpringSystem.create();

2. Add a spring to the system

Spring mSpring = springSystem.createSpring();

3. Add a SpringListener to the Spring

mSpring.addListener(this);

//Overrides of SpringListener interface
@Override
public void onSpringUpdate(Spring spring) {
}

@Override
public void onSpringAtRest(Spring spring) {
}

@Override
public void onSpringActivate(Spring spring) {
}

@Override
public void onSpringEndStateChange(Spring spring) {
}

4. Set spring in motion from start value by giving it an end value

mSpring.setEndValue(1);

5. Use the value from the spring as it is updated in the onSpringUpdate callback to set properties on a view

@override
public void onSpringUpdate(Spring spring) {
    float value = (float) spring.getCurrentValue();
    float scale = 1f - (value * 0.5f);

    mImageToAnimate.setScaleX(scale);
    mImageToAnimate.setScaleY(scale);
}

Very simple as you can see.

Here is an example video/gist of a scale animation using

Here is an example video/gist of a translate animation using Rebound

Feel free to clone the source from: https://github.com/parallelcross/GDGReboundExample

Adjusting the DAMPER constant will change the bounce at the end of the animation, the lower the damper the more bounce. Adjusting the TENSION constant will change the speed of the animation; the higher the tension the faster the speed.

Thanks for reading.