Home › Tutorials ›

Android animation basics

Wed, 12/07/2011 - 08:40 | by gabor

SDK Version: 
M3

In android there are 4 basic types of animations:

  • AlphaAnimation
  • RotateAnimation
  • ScaleAnimation
  • TranslateAnimation

This animations can be highly customized and combined, for example we can set the speed, delay, acceleration, duration of animations, then group them together in an AnimationSet.

Animations can be applyed as Layout animations to ViewGroups, to be triggered when the ViewGroup is created/displayed or applied to any view and be triggered by us any time.

The animations can be definex in XMl or by code. Defining in xml is mutch more clear, but you can not set animation parameters dinamically.

The animation XML files should be created in the res/anim folder and can be accessed using the R class, like R.anim.animation_name.

An animation defined in hyperspace_jump.xml can look like this:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.         <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4.                 android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0"
  5.                 android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%"
  6.                 android:fillAfter="false" android:duration="700" />
  7.         <scale android:fromXScale="1.4" android:toXScale="0.8"
  8.                 android:fromYScale="1.4" android:toYScale="0.8" android:pivotX="50%"
  9.                 android:pivotY="50%" android:startOffset="700" android:duration="400"
  10.                 android:fillBefore="false" />
  11. </set>

The set tag can contain one or more animation definitions that will be applied at the same time, so if you want to play them after each other you can set a startOffset value for the second one.

This animation can be played on any view with a code like this:

  1. final Button button3 = (Button) findViewById(R.id.button3);
  2. button3.startAnimation(AnimationUtils.loadAnimation(Main.this, R.anim.hyperspace_jump));

The exapmle below shows the creation of an animation without an XML file:

  1. //parameters set to do a full circle around its center
  2. RotateAnimation rotateAnimation = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  3. rotateAnimation.setDuration(500);
  4. rotateAnimation.setRepeatCount(2);
  5. //you can set many other parameters here
  6. final Button button1 = (Button) findViewById(R.id.button1);
  7. button1.startAnimation(rotateAnimation);

Creating complex animation sets are mutch more clean in XML, the example below creates an animation set from 3 animations by code:

  1. AnimationSet animationSet = new AnimationSet(true);
  2.                                
  3. RotateAnimation rotateAnimation = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  4. rotateAnimation.setDuration(500);
  5. rotateAnimation.setRepeatCount(2);
  6.                                
  7. animationSet.addAnimation(rotateAnimation);
  8.                                
  9. TranslateAnimation translateAnimation = new TranslateAnimation(0, 400, 0, 0);
  10.                                
  11. //setting offset and duration to start after first rotation completed, and end at the same time with the last roration
  12. translateAnimation.setStartOffset(500);
  13. translateAnimation.setDuration(1000);
  14.                                
  15. animationSet.addAnimation(translateAnimation);
  16.                                
  17. AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
  18. alphaAnimation.setStartOffset(500);
  19. alphaAnimation.setDuration(1000);
  20.                                
  21. animationSet.addAnimation(alphaAnimation);
  22.  
  23. final Button button2 = (Button) findViewById(R.id.button2);
  24. button2.startAnimation(animationSet);

If we want do apply the animation already defined in hyperspace_jump.xml as a layout animation, to play on all element in the group we need one more XML file in the res/anim folder to define this animation as a layout animation. Lets name this file as main_layout_animation.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:animation="@anim/hyperspace_jump&quot; />

After this we can apply this animation to a viewGrop, for example to a LinearLayout:

  1. LinearLayout mainContainer = (LinearLayout) findViewById(R.id.mainContainer);
  2. LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(this, R.anim.main_layout_animation);
  3. mainContainer.setLayoutAnimation(controller);

You can download and try out a working example, with the code fragments above here.

Bookmark/Search this post with

arcus motion analyzer

GetBugzi

New tutorials from Helloandroid

More...

Android on Twitter

Join the conversation

Poll

What Version of Android do you have?: