In the last post I introduced the Android’s simple View Animation system and implemented a basic animation. In this post I will tell you what properties you can animate with  the View Animation systems and how to combine multiple animations. I will also talk about how to customise the animation using different interpolators.

Animation Types

Scale

In the previous post we have already encountered the scale animation. The XML file for scaling a View from 0 to 100% looked like this.

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

Note how the origin, or so called pivot, of the scaling was at the top left corner of the screen. This might not generally be what we want. In order to change the pivot we can add the pivotX and pivotY attributes to the scale element.

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:pivotX="50%"
  android:pivotY="50%"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

This will set the pivot point to the centre of the animated view. Note how the pivot point coordinates are specified in percent. There are three different ways to specify the pivot point.
50%   is the centre of the animated view (relative to view).
50%p   is the centre of the view’s parent (relative to parent).
50   is 50 pixels from the top/left of the animated view (absolute).
When specifying the absolute value of the pivot you may not use units, such as dp, sp, pt or mm. If you want to use those units then you have to specify the pivot programmatically. This is dealt with in another tutorial.

Translate

Instead of scaling a view, we might also want to translate the view from one location of the screen to another. This can be achieved with the translate animation.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromXDelta="10"
  android:fromYDelta="0"
  android:toXDelta="100%"
  android:toyDelta="100%" />

The values of fromXDelta and fromYDelta specify the position of the view at the start of the animation, whereas toXDelta and toYDelta specify the position of the view at the end of the animation.

As with the pivot of the scale animation the start and end locations of the view can be specified in pixels, in percent of the width and height of the animated view by appending % or in percent of the width and height of the parent view by appending %p.

Rotate

The rotate element lets you rotate a view around a pivot point. The rotation is in the plane of the screen only. The View Animation system does not allow 3d rotations. These can only be done using the Property Animation system which will be the topic of a future tutorial.

An example of a 2d rotation follows below.

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromDegrees="0"
  android:toDegrees="360"
  android:pivotX="25%"
  android:pivotY="25%" />

The values of fromDegrees and toDegrees specify the rotation angle at the start and end of the animation. The specifications say that you can specify the angle as a floating point number. In most cases,however, the angles you specify here will be integers.

The pivotX and pivotY attributes specify the centre of the rotation. You can specify the values exaclty in the same way as the pivotX and pivotY of the scale animation.

Alpha

The alpha value animation lets you fade in or fade out a view by changing its transparency over time. This is achieved with the alpha element.

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="1000"
  android:fillAfter="false"
  android:fromAlpha="1.0"
  android:toAlpha="0.0" />

In this example a view is faded out as the alpha value changes from 1.0 (opaque) to 0.0 (transparent). The two attributes to set in the alpha element are fromAlpha and toAlpha. The values accepted by the attributed are floating point values from 0.0 to 1.0.

Combining Animation Types

Each of the animation types above have good uses on their own but the real power of animations lies in combining multiple animations into one. The set XML element lets you create animations that are made from multiple effects, either simultaneously or one after the other. The set element allows to combine the other animation types into groups. Let’s have a look at an example.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_interpolator"
  android:shareInterpolator="true"
  android:duration="1000"
  android:fillAfter="false" >
  <alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />
  <rotate
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%" />
  <scale
    android:fillAfter="true"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.0"
    android:toYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%" />
</set>

This animation combines an alpha, a rotate and a scale animation into a single animation. The combined animation makes the view rotate, scale down to a point and fade out at the same time.

Note that we have specified the interpolator of the animation set and also set the shareInterpolator attribute to true. This means that all the elements that are inside the animation set use the same interpolator. It is also possible to specify the interpolator of each individual animation within the set separately. We will talk about interpolators in the next post.

Playing a Sequence of Animations

We can also combine animations to produce a sequence of different effects. Maybe we want to first scale vertically and then horizontally. The following XML code uses the startOffset attribute and does exactly that.

<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false"
  android:fillAfter="false" >
  <scale
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="500"
    android:fillAfter="true"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.05"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%" />
  <scale
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="500"
    android:startOffset="500"
    android:fillAfter="true"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="1.0"
    android:toYScale="0.05"
    android:pivotX="50%"
    android:pivotY="50%" />
</set>

The startOffset attribute specifies after which time, from the start of the complete animation, the specific animation should be played. In the example above the first scale animation the duration has been set to 500ms. After the first scale animation has finished we want to start the second scale animation. This second animation should, therefore, have a startOffset of 500. It also plays for 500ms after which the complete animation has finished.

There are several things to note about the example above. First of all, when playing animations in sequence, you should always set shareInterpolator to false and not set a duration in the surrounding animation set. Instead you should specify each interpolator and duration separately. The View Animation system will automatically figure out the total duration of the animation for you.

Also note the scale values in the two scale animations. To understand how these values are chosen we must understand that Android always applies all the transformations to the View before displaying it. After the first scale animation has finished, the horizontal scale is 5% which makes the view tall and narrow. The second scale animation has fromXScale and toXScale set to 1.0. This is because the first transformation has already been applied and the width of the view is already only 5% of it’s original value. Any scaling in the second transformation less that 1.0 would be applied on top of the first transformation, making the view even narrower.

Summary

The View Animation system gives you a choice of transformations that you can apply to a view. You can scale, translate and rotate the view and also change its transparency. The set element lets you combine different transformations either in parallel of in succession.

I hope you enjoyed this instalment of my Android Animations Tutorial. Next time I will be talking about interpolators and other attributes common to all animation types. These let you customise your animation even further. In a future post I will then be talking about how to programmatically create animations which will give you even more freedom.

Follow the author

Tagged with:
 

4 Responses to Android Animations Tutorial 2: View Animations Overview

  1. vivek says:

    use full website

  2. Shivam says:

    Great explanation ,very useful tutorial for animation :) thanx a lot :)

  3. Peter says:

    Thanks for explaning the single attributes. That’s exactly what I needed to understand Android animations.

    Also I like your cookie accept window :P, keep on ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>