Search code examples
androidandroid-animationandroid-5.0-lollipop

Android material L image transition interpolator


This is more of a mathematics question rather than programming.

Well, I would like to ask id you know what is the interpolator described in Material design:

enter image description here

It looks to be an AccelerateDecelerateInterpolator but the deceleration effect decays slower.

My best hatch is :

public class MaterialInterpolator implements Interpolator {

    @Override
    public float getInterpolation(float input) {
        if(input<1./3f)
            return new AccelerateInterpolator().getInterpolation(input);
        else
            return new DecelerateInterpolator().getInterpolation(input);
    }

}

Which creates a gap between the values:

Time / Value
...
0.3,0.09
0.317,0.100489
0.333,0.110889  <-- gap
0.35,0.57750005
0.367,0.599311
0.383,0.61931103
0.4,0.64
...

Decelerating the AccelerateDecelerateInterpolator:

output = accelerateDecelerateInterpolator(decelerateInterpolator(input));

private float accelerateDecelerateInterpolator(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

private float decelerateInterpolator(float input) {
    //  return 1.0f - (1.0f - input) * (1.0f - input);
    return  (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));  // default factor =1.f
}

Gives rates similar to:

enter image description here

And value/time curve:

enter image description here

not sure if at the beginning is an output error or the actual behavior should be an output error


Source: http://www.google.com/design/spec/patterns/imagery-treatment.html


Solution

  • The support library now has interpolators for pre-Lollipop devices: FastOutLinearInInterpolator, FastOutSlowInInterpolator, LinearOutSlowInInterpolator, and PathInterpolatorCompat.

    Docs: http://developer.android.com/reference/android/support/v4/view/animation/package-summary.html

    Source: https://github.com/android/platform_frameworks_support/tree/master/v4/java/android/support/v4/view/animation