Wednesday, February 8, 2012

Various effect of interpolator in Android Animation

In the previouse exercises of Animation, we implement animations XML with android:interpolator="@android:anim/linear_interpolator". In this exercise, we try difference effect of various effect of android:interpolator; accelerate_decelerate_interpolator, accelerate_interpolator, anticipate_overshoot_interpolator, anticipate_interpolator, bounce_interpolator, cycle_interpolator, decelerate_interpolator, linear_interpolator and overshoot_interpolator.


Create following XML files under /res/anim/ folder.
accelerate_decelerate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


accelerate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


anticipate_overshoot.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_overshoot_interpolator">
    <translate
        android:fromYDelta="-80%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


anticipate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_interpolator">
    <translate
        android:fromYDelta="-80%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


cycle.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/cycle_interpolator">
    <translate
        android:fromYDelta="-50%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


decelerate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


linear.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


overshoot.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:fromYDelta="-80%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>


Modify main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal">
        <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="fill_parent"
         android:orientation="vertical"
         android:gravity="bottom"
         android:layout_margin="30dp">
         <ImageView
             android:id="@+id/image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:src="@drawable/ic_launcher"/>
        </LinearLayout>
     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical">
         <Button
             android:id="@+id/acceleratedecelerate"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Accelerate_Decelerate"/>
         <Button
             android:id="@+id/accelerate"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Accelerate"/>
         <Button
             android:id="@+id/anticipate"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Anticipate"/>
         <Button
             android:id="@+id/anticipateovershoot"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Anticipate_Overshoot"/>
         <Button
             android:id="@+id/bounce"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Bounce"/>
         <Button
             android:id="@+id/cycle"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Cycle"/>
         <Button
             android:id="@+id/decelerate"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Decelerate"/>
         <Button
             android:id="@+id/linear"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Linear"/>
         <Button
             android:id="@+id/overshoot"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Overshoot"/>
         
        </LinearLayout>
    </LinearLayout>
</LinearLayout>


Main Activity:
package com.exercise.AndroidAnimInterpolator;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidAnimInterpolatorActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final Animation animAccelerateDecelerate = AnimationUtils.loadAnimation(this, R.anim.accelerate_decelerate);
        final Animation animAccelerate = AnimationUtils.loadAnimation(this, R.anim.accelerate);
        final Animation animAnticipate = AnimationUtils.loadAnimation(this, R.anim.anticipate);
        final Animation animAnticipateOvershoot = AnimationUtils.loadAnimation(this, R.anim.anticipate_overshoot);
        final Animation animBounce = AnimationUtils.loadAnimation(this, R.anim.bounce);
        final Animation animCycle = AnimationUtils.loadAnimation(this, R.anim.cycle);
        final Animation animDecelerate = AnimationUtils.loadAnimation(this, R.anim.decelerate);
        final Animation animLinear = AnimationUtils.loadAnimation(this, R.anim.linear);
        final Animation animOvershoot = AnimationUtils.loadAnimation(this, R.anim.overshoot);
        
        final ImageView image = (ImageView)findViewById(R.id.image);
        Button btnAccelerateDecelerate = (Button)findViewById(R.id.acceleratedecelerate);
        Button btnAccelerate = (Button)findViewById(R.id.accelerate);
        Button btnAnticipate = (Button)findViewById(R.id.anticipate);
        Button btnAnticipateOvershoot = (Button)findViewById(R.id.anticipateovershoot);
        Button btnBounce = (Button)findViewById(R.id.bounce);
        Button btnCycle = (Button)findViewById(R.id.cycle);
        Button btnDecelerate = (Button)findViewById(R.id.decelerate);
        Button btnLinear = (Button)findViewById(R.id.linear);
        Button btnOvershoot = (Button)findViewById(R.id.overshoot);

        btnAccelerateDecelerate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animAccelerateDecelerate);
    
   }});
        
        btnAccelerate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animAccelerate);
    
   }});
        
        btnAnticipate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animAnticipate);
    
   }});
        
        btnAnticipateOvershoot.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animAnticipateOvershoot);
    
   }});
        
        btnBounce.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animBounce);
    
   }});
        
        btnCycle.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animCycle);
    
   }});
        
        btnDecelerate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animDecelerate);
    
   }});
        
        btnLinear.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animLinear);
    
   }});
        
        btnOvershoot.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    image.startAnimation(animOvershoot);
    
   }});
        
    }
}

Download the files.

Updated@2015-10-19:
- Interpolator effect on ObjectAnimator


12 comments:

Anonymous said...

Hey dude nice post
Really helped me a lot

Thanks.

Anonymous said...

Great post!!! thankyou it helps me a lot! :D

Unknown said...

wow.. great tutorial!!

Unknown said...

Nice work!really clear and helpful!
thumbs up!

Ankit said...

it's very very great work...
thanks for sharing this one

Freeman Mobile said...

Thank you! Great tutorial!

But why the animation on my phone seem to be lagged.

Anonymous said...

awesome post..cleared everything about interpolator

Anonymous said...

Nice tutorial!.. Helped a lot!

Unknown said...

Really a fun to learn post

v v said...

HI
It helps me a lot, is it possible to scale the image after the animation complected

Anonymous said...


how to move object in curve path by given x,y points
anyone help me
thanks

Anonymous said...

@vv, Did you found a better solution to scale down the image before animation get completed?