Wednesday 15 August 2012

Implement slide top-down vertical animation

The exercise "Implement slide-in and slide-out animation" implement horizontal animation using build in animation xml android.R.anim.slide_in_left and android.R.anim.slide_out_right. Currently, there are no build-in vertical animation xml supported. To implement vertical animation, create it by ourself.



/res/anim/slidedown_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromYDelta="-50%"
android:toYDelta="0.0"
android:duration="1000" />


/res/anim/slidedown_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromYDelta="0.0"
android:toYDelta="50%"
android:duration="1000" />


Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/image1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher"
android:visibility="invisible"
/>
<ImageView
android:id="@+id/image2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher"
android:visibility="invisible"
/>
<ImageView
android:id="@+id/image3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher"
android:visibility="invisible"
/>
</LinearLayout>


Main code.
package com.exercise.androidanimation;

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

public class MainActivity extends Activity {

ImageView image1, image2, image3;
Animation animationSlideDownIn, animationSlideDownOut;
ImageView curSlidingImage;

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

image1 = (ImageView)findViewById(R.id.image1);
image2 = (ImageView)findViewById(R.id.image2);
image3 = (ImageView)findViewById(R.id.image3);

animationSlideDownIn = AnimationUtils.loadAnimation(this, R.anim.slidedown_in);
animationSlideDownOut = AnimationUtils.loadAnimation(this, R.anim.slidedown_out);

animationSlideDownIn.setAnimationListener(animationSlideInListener);
animationSlideDownOut.setAnimationListener(animationSlideOutListener);

curSlidingImage = image1;
image1.startAnimation(animationSlideDownIn);
image1.setVisibility(View.VISIBLE);
}

@Override
protected void onPause() {
// TODO Auto-generated method stub
super.onPause();
image1.clearAnimation();
image2.clearAnimation();
image3.clearAnimation();
}

AnimationListener animationSlideInListener
= new AnimationListener(){

@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
if(curSlidingImage == image1){
image1.startAnimation(animationSlideDownOut);
}else if(curSlidingImage == image2){
image2.startAnimation(animationSlideDownOut);
}else if(curSlidingImage == image3){
image3.startAnimation(animationSlideDownOut);
}
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub

}

};

AnimationListener animationSlideOutListener
= new AnimationListener(){

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
if(curSlidingImage == image1){
curSlidingImage = image2;
image2.startAnimation(animationSlideDownIn);
image1.setVisibility(View.INVISIBLE);
image2.setVisibility(View.VISIBLE);
image3.setVisibility(View.INVISIBLE);
}else if(curSlidingImage == image2){
curSlidingImage = image3;
image3.startAnimation(animationSlideDownIn);
image1.setVisibility(View.INVISIBLE);
image2.setVisibility(View.INVISIBLE);
image3.setVisibility(View.VISIBLE);
}else if(curSlidingImage == image3){
curSlidingImage = image1;
image1.startAnimation(animationSlideDownIn);
image1.setVisibility(View.VISIBLE);
image2.setVisibility(View.INVISIBLE);
image3.setVisibility(View.INVISIBLE);
}
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub

}

};

}



Download the files.

No comments:

Post a Comment