Android: Quick intro to property animations

Inbetweener animation or tweened animation from digital point of view is the process of generating ‘inbetween’ frames between two images so that the observer gets the impression that the first image is transforming its state from the initial to the ending position. In this sense, there are frames which are known as inbetweens which basically are the key frames that exist between the initial and the final frame/image. So when we are talking about tweening animation on Android, we consider that these inbetween frames are calculated by the animation itself. The developer should only define the description of the linear transformation that should take place over the View. This means that if we want to perform translation of the coordinates, we need to define the starting and ending point and the duration of the animation. Thus, if we want to move point x(0,0) to point x1(10,10), in 3 seconds, we’ll have FromX attribute with value of 0, FromY attribute with value of 0, then ToX attribute with value of 10 and ToY attribute with value of 10. The duration attribute for the animation would be 3000, in milliseconds.

Using the old animation API (which is still being used and not obsolete by this time), we’ll either have to define XML animation description or define this parameters for the animation programmatically. But this isn’t what the user always expects it is. Often, the user wants to move/translate the View from point 0,0 to point 10,10 and when the animation ends, the View to be anchored to the new position. This, with the old animation API, is not possible without some sort of a workaround. Since the animation in Android from the beginning meant “changing the way the pixels of the View are drawn only during the animation”, the animation would not affect the position of the View. Thus, when the animation ends, the View would “reset” its position (return to its initial position). Of course the user can set AnimationListener and modify the margins or padding of the View when the animation ends or even override the View’s onAnimationEnd() and perform whatever is needed. This meant writing lots of workaround code which even then was not enough to create efficient, fancy and smooth animations on Android.

When Android 3.0 (Honeycomb) was released, Google introduced the new Animation system that implemented property animations and introduced the Animator class, which is the base of the new animation API. When it comes to property animations, it’s always about changing something over a period of time. Meaning, by using property animation the developer can actually move the View from point x to point x1 (and not just “mimicking” the movement), fade it in, fade it out, scale it or even perform transformations to specific parts that “live” within the View, which at some case is a drawable or the transparency of the background color. The transformation is real. In this tutorial we'll explain how new Android animation system works and then continue in part 2 on how to create a property animation that would make leaf-falling-like effect for an ImageView in which we’ll, apparently put images of leaves. What is ValueAnimator and how it integrates with the older animation concepts?

ValueAnimator

ValueAnimator is one of the direct classes extended from the Animator class. It was introduced in Android Honeycomb (API Level: 11). ValueAnimator is class that lets the developer animate specific View property value. We can use this class to change the value of the x or y axis, the alpha, scale etc. We use ofFloat(), ofInt() or ofObject() as factory methods that would create ValueAnimator object for animation between float, integer or Object values. You can think of ValueAnimator this way:

This means that the value of ‘something’ will be evaluated, from 0 to 10 in 10 seconds. That would make 1 change per second. If the ‘animator’ object was created like, let’s say ValueAnimator.ofFloat(0, 30), with duration of 30000, then the updates would be performed from 0 to 30 in 30 seconds, which is basically the same. The animation system “knows” its math. It knows how much to increment the values so that it reaches from 0 to 30 in 30 seconds. So if we want to move view from x:0 to x:10, we’ll just use those (first) 10 steps that take 10 seconds to be performed. In the first second the x is translated from 0 to 1, the from 2 to 2 etc. But how do we handle the incrementation and what do we do with it? Again, the new API offers AnimatorUpdateListener - interface that would receive all callbacks from the execution of the animation, reaching to every animation frame. So, we need to set implementation of this interface as updateListener to the ‘animator’ object:

We don’t have to assign the animated value to the ‘value’ variable, but we do it to make the code cleaner and the point closer. As you can see, the value variable is initialized from the ‘animation’ object which is ValueAnimator object. ‘View’ since API Level 11 has these convenient methods like setTranslation, setRotation,setPivotX/setPivotY, etc. You can put all these in onAnimationUpdate.

In the following tutorial we'll give practical example on how to use property animation.

http://www.2dwarfs.com/tutorials/android-quick-intro-to-property-animations#.UneVkPlPQ2Y