Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply easing animation function on view in Android

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?

like image 962
Adham Avatar asked Apr 06 '14 16:04

Adham


People also ask

How do you animate a view?

Create ImageView in the activity_main. xml along with buttons that will add animation to the view. Navigate to the app > res > layout > activity_main. xml.

What are the two different types of view animation?

There are two types of animations that you can do with the view animation framework: Tween animation: Creates an animation by performing a series of transformations on a single image with an Animation. Frame animation: or creates an animation by showing a sequence of images in order with an AnimationDrawable .


2 Answers

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.

like image 194
amalBit Avatar answered Sep 19 '22 04:09

amalBit


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

like image 30
Francois Dermu Avatar answered Sep 20 '22 04:09

Francois Dermu