How to apply easing animation function on view in Android

Question

I want to apply a translate animation on an Android view (button) using a custom interpolator where the easing function is:

public static float easeOut(float t,float b , float c, float d) {
    if ((t/=d) < (1/2.75f)) {
       return c*(7.5625f*t*t) + b;
    } else if (t < (2/2.75f)) {
       return c*(7.5625f*(t-=(1.5f/2.75f))*t + .75f) + b;
    } else if (t < (2.5/2.75)) {
       return c*(7.5625f*(t-=(2.25f/2.75f))*t + .9375f) + b;
    } else {
       return c*(7.5625f*(t-=(2.625f/2.75f))*t + .984375f) + b;
    }
}

I have an example that uses the custom interpolator like this:

The interpolator is:

public class HesitateInterpolator implements Interpolator {
    public HesitateInterpolator() {
    }

    public float getInterpolation(float t) {
        float x = 2.0f * t - 1.0f;
        return 0.5f * (x * x * x + 1.0f);
    }
}

and is used like this:

ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
anim.setInterpolator(new HesitateInterpolator());

My question is: What are these values b, c, d for?

Solution 1

FYI: for people who just want an ease interpolator you can just use myAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

Solution 2

I made a library which can solve this problem. AndroidEasingFunctions

Solution 3

1,2,3 go

1. Create a custom cubic bezier curve using this awesome site. And get the control points for the curve. Between 0,0 and 1,1
2. Interpolator customInterpolator = PathInterpolatorCompat.create(cpX1,cpX2,cpY1,cpY2)
3. Add this customInterpolator to any of your animation.

Added a gist. Some more here.

Solution 4

According to Robert Penner's Easing Functions, as stated here:

t: current time, b: begInnIng value, c: change In value, d: duration

If you want to implement your custom Interpolator, you have to make something like this:

(this would be the implementation for the easeInOutQuint)

public class MVAccelerateDecelerateInterpolator implements Interpolator {

    // easeInOutQuint
    public float getInterpolation(float t) {
        float x;
        if (t<0.5f)
        { 
            x = t*2.0f;
            return 0.5f*x*x*x*x*x;
        }
        x = (t-0.5f)*2-1;
        return 0.5f*x*x*x*x*x+1;
    }
}

Edit: to implement the easing function you need some math knowledge, considering that the getInterpolation method gets only the t parameter, from 0.0 to 1.0.

So basically you need to develop a y(t) function, with t from 0 to 1, and with y values from 0 to 1, as shown below:

What you change is the curve to get from 0 to 1 (in the image the green line is the linear one, for example). You need to 'normalize' the easing functions to remain in the (0, 1) x (0, 1) square, as you can see in my easeInOutQuint implementation.

View more solutions

Comments

[Adham]

Thank you for your great answer, but how did you get this functions you mentioned in your answer?.. How to convert the functions that Robert wrote to java functions in factor of t only ?

[Adham]

Thank you very much for you clarification, can you provide me with reference to learn how to normalize function to function from 0-1 function ?

[ʞᴉɯ]

Sorry but is matter of math knownledge... i've made it by me. You can use a visual plot tool to simplify the job, such as rechneronline.de/function-graphs

[Adham]

Sorry for many questions I ask :(, If I have equation like this: easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, .. How can I make the equation only have only one variable,, y = f(x) .. what do you use for the constants

[ʞᴉɯ]

The functions for easeInOutQuad are: (x*2)^2/2 for t<0.5 -((x-1)^2)*2+1 for t>0.5

[marienke]

Great library! I do feel it's necessary to note that you should not import Android's ObjectAnimator and AnimatorSet, but com.nineoldandroids's, so it's also necessary to compile 'com.nineoldandroids:library:2.4.0'

[marienke]

Thanks for the library though! :) Just add some documentation on the usage or what to look out for.

[felippe]

Or: myAnimation.setInterpolator(mContext, android.R.interpolator.accelerate_decelerate);

[Rik van Velzen]

gist link not working.. Is EasingsConstants a custom class?

[Erik B]

@RikvanVelzen sorry about that, the link was removed from another answer so I deleted the gist. It is a custom class with a bunch of constants defining values from easings.net like so: public static final Interpolator easeInOutQuad = PathInterpolatorCompat.create(0.455f, 0.03f, 0.515f, 0.955f);