How to apply easing animation function on view in Android

23,564

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)`

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.

Share:
23,564
Author by

Mobile Engineer

Updated on July 09, 2022

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?

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 ?
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 ?
• ʞᴉɯ over 8 years
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