Background
In this post I am going to show a very simple animation - Bouncing a ball. As much as Animations are very cool to look at, they are tricky and must be handled carefully.
Animation coding Tip : Just a tip here. Animations are generally started in onResume() method and stopped in onPause() method. You should not do it in onCreate() and onDestroy() methods as these methods are not guaranteed to be invoked every time.
Creating the Layouts
Lets create layouts that we will need to create a animated bouncing ball. To start with lets first create our ball.
For this I am going to create an oval shape in android. This will be in ball_shape.xml file under drawable folder. Contents of it are -
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#8c0000" /> <stroke android:width="2dp" android:color="#fff" /> <size android:height="80dp" android:width="80dp" /> </shape>
This is a simple circular shape with red color fill. We will use this as our ball. Now lets go ahead and create our actual layout with a button to animate this ball and of course the ball itself.
Put following content inside animation_layout.xml file under layout folder.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/bounceBallButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Bounce Ball" /> <ImageView android:id="@+id/bounceBallImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@id/bounceBallButton" android:background="@drawable/ball_shape" /> </RelativeLayout>
As you can see we have a button and a ball (essentially ImageView with background set as oval shape) below it. Let's animate this now with our code. Layout will looks as follows -
Animating Bouncing Ball
To animate the ball we fill first set the layout of the Activity with the layout xml we have just created. Then we will get reference to our Button and ball and when user click on the button we will animate the ball so that it appears like bouncing.
Here is the code for it.
package com.osfg.animationdemo;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.BounceInterpolator;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationStarter extends Activity {
private static final String TAG = "AnimationStarter";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animation_layout);
Button bounceBallButton = (Button) findViewById(R.id.bounceBallButton);
final ImageView bounceBallImage = (ImageView) findViewById(R.id.bounceBallImage);
bounceBallButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
bounceBallImage.clearAnimation();
TranslateAnimation transAnim = new TranslateAnimation(0, 0, 0,
getDisplayHeight()/2);
transAnim.setStartOffset(500);
transAnim.setDuration(3000);
transAnim.setFillAfter(true);
transAnim.setInterpolator(new BounceInterpolator());
transAnim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Log.i(TAG, "Starting button dropdown animation");
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
Log.i(TAG,
"Ending button dropdown animation. Clearing animation and setting layout");
bounceBallImage.clearAnimation();
final int left = bounceBallImage.getLeft();
final int top = bounceBallImage.getTop();
final int right = bounceBallImage.getRight();
final int bottom = bounceBallImage.getBottom();
bounceBallImage.layout(left, top, right, bottom);
}
});
bounceBallImage.startAnimation(transAnim);
}
});
}
private int getDisplayHeight() {
return this.getResources().getDisplayMetrics().heightPixels;
}
}
We have simply used Translate Animation with bounce interpolator so that our ball can be viewed as bouncing vertically .You can install and try out this code. You can see the recorded video below -
No comments:
Post a Comment