Interpolator Animation Android

This example will show you how to use different interpolators provided by android. This example, will show you both the way to use interpolator via XML or java.

An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, overshoot, cycle, bounce, etc.

Main code:- (Using XML)

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:interpolator="@android:anim/bounce_interpolator"> // set Interpolator

<translate
android:fromXDelta="0%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="80%p"
/>

</set>

Interpolator Animation using java:- 


1) Create an animation file.  

up_to_down_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="1500">  

<translate
android:fromXDelta="0%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="80%p"/>

</set>

2) Activity_main.xml for layout.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout>

<ImageView
android:id="@+id/imageView_anim"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="@android:drawable/sym_def_app_icon"/>

<Button
android:id="@+id/linear_button"
android:text="Linear Animation"/>

<Button
android:id="@+id/bounce_button"
android:text="Bounce Animation"/>

<Button
android:id="@+id/overshoot_button"
android:text="Overshoot Animation"/>

<Button
android:id="@+id/accelerate_button"
android:text="Accelerate Animation"/>

<Button
android:id="@+id/deaccelerate_button"
android:text="Deaccelerate Animation"/>

<Button
android:id="@+id/cycle_button"
android:text="Cycle Animation"/>

</RelativeLayout>


3) Create a java file for handling button click and perform the animation.
Main.java

public class MainActivity extends AppCompatActivity {

    ImageView image_anim;
    Button linear_button_anim,btn_bounce,btn_overshoot,btn_acc,btn_deacc,btn_cycle;
    Animation animation;

@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

image_anim = (ImageView) findViewById(R.id.imageView_anim);
linear_button_anim = (Button) findViewById(R.id.linear_button);
btn_bounce = (Button) findViewById(R.id.bounce_button);
btn_overshoot = (Button) findViewById(R.id.overshoot_button);
btn_acc = (Button) findViewById(R.id.accelerate_button);
btn_deacc = (Button) findViewById(R.id.deaccelerate_button);
btn_cycle = (Button) findViewById(R.id.cycle_button);

animation = AnimationUtils.loadAnimation(this,R.anim.up_to_down_animation);


linear_button_anim.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new LinearInterpolator()); //set interpolator
image_anim.startAnimation(animation);
            }
        });

btn_bounce.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new BounceInterpolator()); //set interpolator
image_anim.startAnimation(animation);
            }
        });

btn_overshoot.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new OvershootInterpolator()); //set interpolator
image_anim.startAnimation(animation);
            }
        });

btn_acc.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new AccelerateInterpolator()); //set interpolator
image_anim.startAnimation(animation);
            }
        });

btn_deacc.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new DecelerateInterpolator()); //set interpolator
image_anim.startAnimation(animation);
            }
        });


btn_cycle.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
animation.setInterpolator(new CycleInterpolator(20f)); //set interpolator
image_anim.startAnimation(animation);
            }
        });

    }
}

Output