View Animations On Android
The Android framework provides two animation systems:
- Property animation (introduced in Android 3.0)
- View animation
While property animation system is more flexible, offers more features and generally has better performance, the view animation system takes less time to setup and requires less code to write. If it accomplishes everything you need to do, there is no need to use the property animation system.
In this post, we’re going to focus on the basics of the latter one.
The view animation system is used to perform tweened animation on views. Tween stands for in-between and refers to the creation of successive frames of animation between the first and the last frame.
It can perform a series of simple transformations on a
View object, changing:
The system lives in the
android.view.animation package, with
Interpolator being the juicy parts.
Animation class is responsible for a single animation. If our animation should change e.g. position and transparency, we’d have to use the
AnimationSet class, since it represents a group of animations that should be played together.
Interpolator defines the rate of change of an animation. We can specify, for example, how fast something is going to fade out or if the animation should be accelerating, decelerating, etc.
Animation is simple:
Remember the simple transformations we’re able to do: position, size, rotation and transparency? Android provides an implementation for each one, respectively:
In our example, we’re using
AlphaAnimation which is used for transparency transformations. The arguments,
0, simply mean we wish the opacity to go from 100% to 0% - we want the view to fade out.
The second line of our example sets the
Interpolator. Again, to make things easier for us, the package includes several subclasses specifying various speed curves. We’ve randomly chosen
AccelerateInterpolator, which tells a transformation to start slow, then speed up. By default, every Animation uses a
LinearInterpolator. Lastly, we set the millisecond duration for our animation to run.
Animations can be defined by either code or XML. Android designates a special folder where XML files should live:
res/anim. Let’s create a file called
To use it,
AnimationUtils class provides a method that constructs the
Suppose we wish - besides fading out - to shrink our view. Recall that in order to execute two or more animations at the same time, we have to use
AnimationSet. This is as simple as creating an
Animation and adding it to the
If you do not wish to run all animations in the set at the same time, you can specifying the start offset.
fade will run 1000 milliseconds. In order for
shrink to be executed afterwards, it needs to wait 1000 millis:
Converting everything to XML yields:
To conclude this rudimentary introduction to view animation, an interface is worth mentioning:
AnimationListener. Suppose we wish to hide our view after an animation completes or just listen to animation events. All we have to do is:
If you wish to spice things up by browsing through some actual code, I’ve created a simple app showing random View animations. You can find it here.