Article Image
read

An easing function describes the value of a property given a percentage of completeness. Thanks to Robert Penner for defining equations which drove animations with ease.


How do we do this android ? First lets see how we do animations with ValueAnimator.

Setting up Activity

app/package.name/MainActivity.java

Button click;
View view;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    view = (View)findViewById(R.id.view);
    click = (Button)findViewById(R.id.button);
    click.setOnClickListener(clickListener);
}
View.OnClickListener clickListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ease();
} };

Our XML layout

<View
    android:id="@+id/view"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@android:color/holo_blue_bright"/>
<Button
    android:id="@+id/button"
    android:text="Click"
    android:layout_width="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_height="60dp"/>

Setup simple Animation

ValueAnimator class provides a simple timing engine for running animations which calculate animated values and set them on target objects . AnimatorSet class plays a set of Animator objects in the specified order. Animations can be set up to play together, in sequence, or after a specified delay.

We will be using these two classes to make our first animation.

app/package.name/MainActivity.java

private void ease() {
    AnimatorSet animatorSet = new AnimatorSet();
    ValueAnimator valueAnimatorX = ValueAnimator.ofFloat(fromX,toX, fromX);
    valueAnimatorX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            view.setTranslationX((float) animation.getAnimatedValue());
        }
    });
    animatorSet.playTogether(valueAnimatorX);
    animatorSet.setDuration(1500);
    animatorSet.start();
}

Linear Animation

This animations seems so boring. We need somthing cool.


Easing to make it awesome

ValueAnimator class accepts an evaluator, which defines on how the value is derived. So we make use of setEvaluator function and put our easing equations there to get the desired animation.

So make a class Easing implementing TypeEvaluator

app/package.name/Easing.java

public class Easing implements TypeEvaluator<Number> {
    @Override
    public Number evaluate(float fraction, Number startValue, Number endValue) {
    }
}

Now we have the evaluate methods which tell the ValueAnimator on how it should evaluate.

app/package.name/Easing.java

/**
* Converts params to calculate easing values
* @param fraction
* @param startValue
* @param endValue
* @return
*/

@Override
public Number evaluate(float fraction, Number startValue, Number endValue) {
    float t = duration * fraction;
    float b = startValue.floatValue();
    float c = endValue.floatValue() - startValue.floatValue();
    float d = duration;
    float result = calculate(t,b,c,d);
    return result;

}

What's the calculate method here? This method decides which easing equation we are going to use. There is a lot mentioned about equations here. You can edit this method based on any of the equations given and get your desired animation.

app/package.name/Easing.java

/**
*
* @param t - Current Time
* @param b - Start Value
* @param c - Change in value
* @param d - Duration
* @return value calculated for cubic ease-in-out
*/

public float calculate(float t, float b, float c, float d){
    t /= d/2;
    if (t < 1) {
        return c/2*t*t*t + b;
    }
    t -= 2;
    return c/2*(t*t*t + 2) + b;
}

Update MainAcvitity

Now we are good with the Easing class and ready to include it in our ValueAnimator.

app/package.name/MainActvity.java

private void ease() {
    Easing easing = new Easing(1500);
    ...
    valueAnimatorX.setEvaluator(easing);
    valueAnimatorX.addUpdateListener(...)
    ...
}

Uh! is that enough ?

Linear Animation
Easing Animation


Find the source code of the entire sample over here, Easing on Android.

AnimationEasingFunctions seems an awesome library to make easing animatons easier and lively.

Blog Logo

Shrikanth


Published

Image

Blog

How did I do

Back to Overview