Various effect of interpolator in Android Animation - Blog Android

Wednesday, 8 February 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.

Borneo08

About Borneo08

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Subscribe to this Blog via Email :

More links

Related Posts Plugin for WordPress, Blogger...