Wednesday, 12 August 2009

More on Android Animations

In a post I wrote a while back, Android transitions- slide in and slide out, I gave an example of defining some translate animations in Java. I metioned at the time that it was also possible to define these in XML. So here's a little more on that..

First of all lets just take a look at the kind of animations that we are dealing with here. Google has two main types of animations
frame by frame which use drawable objects, and tweening animations, that act on views and view groups. The animations that i used in the previous post acted on view groups and view and were of the tweening type, so thats' what i'm going to talk about in this post.

Let's take another look at one of the original translate animations that we created:
private Animation inFromRightAnimation() {

Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromRight.setDuration(500);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
Here you can see that we have defined a translate animation. There are four main types of animations defined for tweening animations they are Rotate, Alpha (controls transparency) , Scale (for size control), and translate which controls movement of the views and view groups. It is of course possible to define you own animations, but we'll keep that for another post...

So back to the translate animation. This animation is use to take a view from right of the visible screen and move it to the left until it appears on the screen. We create a new transaltion called infromRight using the TranslateAnimation constructor. Eight arguments are passed into the constructor, and they controll the X from and to positions, and the Y from and to position. Four of the Translate animation construtor arguments specify how the to and from positions should be interpreted in our case we specified
Animation.RELATIVE_TO_PARENT,which means that our from and to float values will be multiplied by the height or width of the parent of the object being animated. With these arguments we specify that we want out animation to start from a X position one width times the parent and end at a X position zero times the parent. We don't specify any numbers for the Y to and from since we do not want to move our view in that direction.

Once we have created our animation we then set the duration of the animation and the Interpolator algorithm to use, i.e. do we want the animation to happen at a constant speed or accelerate etc...

Ok, so that's our translate animation in Java now lets have a look at what it looks like in XML:



<translate android="http://schemas.android.com/apk/res/android"
fromxdelta="100%p" toxdelta="0%p" duration="500"
interpolator="@android:anim/accelerate_interpolator">

Here we define our from x position as 100%p , the p stands for relative to parent. We also set the duration and the interpolator. I saved this file in a res/anim folder in my android project and called it in_from_right.xml. To use it in our original Slide.java activity all we have to do is replace:

flipper.setInAnimation(inFromRightAnimation());
with:
flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.in_from_right));
Of course we also need to define and pass in a context.

You can also define Android Rotate , Alpha and Scale animations in XML, once you understand the basics it's quite straight forward. Have fun with the animations... :)

1 comment:

  1. How to define and pass the "context" ?

    ReplyDelete