I'm using Facebook's Rebound library to replicate the bouncy animations seen in their chat heads implementation. The problem is, most of the time the animation stutters. A few pictures will explain this better. Here's the buttery-smooth chat heads animation:
And here's my attempt (notice how the animation for the white View skips nearly all frames):
Once in a while it works smoothly:
Below is the code I'm using currently (the entire project is up on Github if you want to set it up quickly). I'm guessing this has something to do with hardware acceleration not being enabled correctly on my View. There are 2 Springs in my SpringSystem, one for the "bubble" (the Android icon) and another for the content (the white View that is displayed on tapping the bubble). Any help on how to solve this issue would be greatly appreciated. Thanks.
AndroidManifest.xml:
<application android:hardwareAccelerated="true" ...>
...
</application>
AppService.java:
// the following code is in AppService#onCreate()
// AppService extends android.app.Service
// full code at https://github.com/vickychijwani/BubbleNote
mContent.setLayerType(View.LAYER_TYPE_HARDWARE, null);
final Spring bubbleSpring = system.createSpring();
bubbleSpring.setCurrentValue(1.0);
bubbleSpring.addListener(new SpringListener() {
@Override
public void onSpringUpdate(Spring spring) {
float value = (float) spring.getCurrentValue();
params.x = (int) (mPos[0] * value);
params.y = (int) (mPos[1] * value);
mWindowManager.updateViewLayout(mBubble, params);
// fire the second animation when this one is about to end
if (spring.isOvershooting() && contentSpring.isAtRest()) {
contentSpring.setEndValue(1.0);
}
}
// ...
});
final Spring contentSpring = system.createSpring();
contentSpring.setCurrentValue(0.0);
contentSpring.addListener(new SpringListener() {
@Override
public void onSpringUpdate(Spring spring) {
// always prints false?!
Log.d(TAG, "hardware acc = " + mContent.isHardwareAccelerated());
float value = (float) spring.getCurrentValue();
// clamping is required to prevent flicker
float clampedValue = Math.min(Math.max(value, 0.0f), 1.0f);
mContent.setScaleX(value);
mContent.setScaleY(value);
mContent.setAlpha(clampedValue);
}
// ...
});