Wednesday, June 29, 2011

Android Animations - Tutorial


Lars Vogel

Version 0.4
10.03.2011
Revision History
Revision 0.105.01.2011Lars Vogel
Created
Revision 0.2 - 0.408.02.2011 - 10.03.2011Lars Vogel
bug fixes and enhancements
Android Animations
This tutorial describes how to use Animations in Android. The tutorial is based on Eclipse 3.6, Java 1.6 and Android 2.3 (Gingerbread).

1. Android Animations

1.1. Overview

Android supports two types of animations: Frame-by-frame animations and Tweened Animations. Frame-by-frame animations shows different drawables in a View. Tweened animations are applied to Views and transform them in size, position or opacity. Both animations are limited to the original size of the view.

1.2. Tweened Animations

Tweened animations are descripted via resource files and are relatively unexpensive operations. You can use AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation.
You can group animations in "AnimationSet" in which you define the start time, duration and offsets of each animation.
You apply the animation to a view via view.startAnimation() passing the AnimationSet as a parameter. Per default a AnimationSet will run once, unless you use setRepeatModel() and setRepeastCount().
Register an "AnimationListener" to react to the animation. This listener is notified when an animation starts or ends.
Animations can be defined via XMl resource files in the directory "res/anim" or via code. You can load the resource file via AnimationUtils.loadAnimiation(this,R.anim.Animation).

1.3. Android Basics

The following assumes that you have already basic knowledge in Android development . Please check the Android development tutorial to learn the basics.

2. Example

We will create a simple example which rotates a TextView. We will also add an "AnimationListener" which listeners to the animations events. Create a new Android project "de.vogella.android.animation" with the activity "AnimationExample". Change "main.xml" to the following.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Animate" android:onClick="startAnimation"></Button>
<TextView android:id="@+id/textview" android:layout_width="fill_parent"
 android:layout_height="wrap_content" android:text="@string/hello" />
</LinearLayout>

  

Create a new resource file "myanimation.xml" of type animation.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="true">
 <rotate android:fromDegrees="0" android:toDegrees="360"
  android:duration="4000" android:pivotX="50%" android:pivotY="50%"
  android:startOffset="0">
 </rotate>
</set>


  

Change your activity to the following.

package de.vogella.android.animation;

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

public class AnimationExample extends Activity implements AnimationListener {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

 }

 public void startAnimation(View view) {
  Animation animation = AnimationUtils.loadAnimation(this,
    R.anim.myanimation);
  animation.setAnimationListener(this);
  View animatedView = findViewById(R.id.textview);

  animatedView.startAnimation(animation);

 }

 @Override
 public void onAnimationStart(Animation animation) {
  Toast.makeText(this, "Animation started", Toast.LENGTH_SHORT).show();
 }

 @Override
 public void onAnimationEnd(Animation animation) {
  Toast.makeText(this, "Animation ended", Toast.LENGTH_SHORT).show();
 }

 @Override
 public void onAnimationRepeat(Animation animation) {
  Toast.makeText(this, "Animation rep", Toast.LENGTH_SHORT).show();
 }
}
  

If you run this example and press the button, the animation should start.

3. Thank you

No comments:

Post a Comment