13

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

MrEngineer13
  • 38,642
  • 13
  • 74
  • 93
Diolor
  • 13,181
  • 30
  • 111
  • 179
  • at the end (time == 1) the value is 0? – pskink Aug 23 '14 at 17:37
  • @pskink Nope it's `1.0f` ( `new DecelerateInterpolator().getInterpolation( 1f)` gives 1f). I assume the graph above shows the rate per time (frame@x time minus frame@x-1 time) of the animation and not the values per time of e.g. the saturation – Diolor Aug 23 '14 at 22:22
  • 1
    ok so in pseudocode this should look like: AccelerateDecelerateInterpolator.getInterpolation(DecelerateInterpolator.getInterpolation(input)) – pskink Aug 24 '14 at 06:18
  • @pskink So "decelerate" the A/D interpolator? Tried it, it might not be the answer not the answer but very close. Either way there are no numbers on Google's example to be sure. Added a screenshot with the rates above – Diolor Aug 24 '14 at 15:01
  • yes, extend AccelerateDecelerateInterpolator and in getInterpolation call input = di.getInterpolation(input) then call super, where di is a DecelerateInterpolator object – pskink Aug 24 '14 at 15:09

4 Answers4

5

Those plots look very much like plots of x*(a*x+b)^2. With restrictions on the second root being equal to 1, it's like a*x*(x-1)^2. Integrated it, chose a so that the result is 1 at x=1 and got 3*x^4-8*x^3+6*x^2.

The code would be:

public class MaterialInterpolator implements Interpolator {

    @Override
    public float getInterpolation(float x) {
        return (float) (6 * Math.pow(x, 2) - 8 * Math.pow(x, 3) + 3 * Math.pow(x, 4));
    }
}
Roman Orekhov
  • 330
  • 2
  • 6
4

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

mttmllns
  • 1,740
  • 1
  • 15
  • 13
1

Android 5 now provides interpolators for the three basic curves in the material design specification:

 * @android:interpolator/fast_out_linear_in
 * @android:interpolator/fast_out_slow_in
 * @android:interpolator/linear_out_slow_in

You most likely want the fast_out_slow_in interpolator.

Aditya Vaidyam
  • 6,259
  • 3
  • 24
  • 26
-1

You can find the source for the fast_out_slow_in.xml interpolator here if you want to use them on Android pre 5.0.

<?xml version="1.0" encoding="utf-8"?> <pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.4" android:controlY1="0" android:controlX2="0.2" android:controlY2="1"/>

Sveinung Kval Bakken
  • 3,715
  • 1
  • 24
  • 30