Android 4.1 Jelly Bean View Animation Tutorial


Android 4.1 Jelly Beans released last week and there are lots of exciting new features.. I will try and give an over view of all the features.

To start with let us have a look at new Animations APIs introduced in Android Honeycomb and enhanced in Jelly Beans.

ViewPropertyAnimator introduced in API lvl 12 provides lots of methods which makes simple view animation lot easier than it used to be before.

ViewPropertyAnimator also supports Animator.AnimatorListener (Since API lvl 11) which allows us to handle animation events.

Here is a quick code snippets to demonstrate rotation animation.

		view.animate().rotationY((float) 180.0).setDuration(1000)
				.setListener(new AnimatorListener() {

					public void onAnimationStart(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationRepeat(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationEnd(Animator animation) {
						view.animate().rotationY((float) 360.0)
								.setDuration(1000);

					}

					public void onAnimationCancel(Animator animation) {
						// TODO Auto-generated method stub

					}
				});

 
Similarly there are other methods to perform Scaling, Fading & translation.
 
Scale Animation
 

view.animate().scaleX((float)2.0).setDuration(1000)
				.setListener(new AnimatorListener() {

					public void onAnimationStart(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationRepeat(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationEnd(Animator animation) {
						view.animate().scaleX((float) 1.0)
								.setDuration(1000);

					}

					public void onAnimationCancel(Animator animation) {
						// TODO Auto-generated method stub

					}
				});

 
Translate Animation
 

view.animate().translationX((float)100.0).setDuration(1000)
				.setListener(new AnimatorListener() {

					public void onAnimationStart(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationRepeat(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationEnd(Animator animation) {
						view.animate().translationX((float) 0.0)
								.setDuration(1000);

					}

					public void onAnimationCancel(Animator animation) {
						// TODO Auto-generated method stub

					}
				});

 
Fade-out/Fade-in animation

view.animate().alpha((float)0.0).setDuration(1000)
				.setListener(new AnimatorListener() {

					public void onAnimationStart(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationRepeat(Animator animation) {
						// TODO Auto-generated method stub

					}

					public void onAnimationEnd(Animator animation) {
						view.animate().alpha((float) 1.0)
								.setDuration(1000);

					}

					public void onAnimationCancel(Animator animation) {
						// TODO Auto-generated method stub

					}
				});
Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s