Property Animation

Property Animation

You can define an animation to change any object property over time, regardless of whether id draws to the screen or not. A property animation changes a property's (a field in an object) value over a specified length of time.

The property animation system lets you define the following characteristics of an animation:

a> Duration: the duration of an animation. The default length is 300 ms.

b> Time interpolation: how the values for the property are calculated as a function of the animation's current elapsed time.

c> Repeat count and behavior: whether or not to have an animation repeat when is reaches the end of a duration and how many times to repeat the animation. Also, you can specify whether the animation to play back in reverse.

d> Frame refresh delay: how often to refresh frames of your animation. The default is set to refresh every 10 ms.

How Property Animation Works

The ValueAnimator object keeps track of your animation's timing, such as how long the animation has been running, and the current value of the property that it is animating.

The ValueAnimator encapsulates a TimeInterpolator, which defines animation interpolation, and a TypeEvaluator, which defines how to calculate values for the property being animated.

To start an animation, create a ValueAnimator and give it the starting and ending values for the property that you want to animate, along with the duration of the animation. When you call start() the animation begins. During the whole animation, the ValueAnimator calculates an elapsed fraction between 0 and 1, based on the duration of the animation and how much time has elapses. The elapsed fraction represents the percentage of time that the animation has completed.

When the ValueAnimator is done calculating an elapsed fraction, it calls the TimeInterpolator that is currently set, to calculator an interpolated fraction. An interpolated fraction maps the elapsed fraction to a new fraction that takes into account the time interpolation that is set.

When the interpolated fraction is calculated, ValueAnimator calls the appropriate TypeEvaluator, to calculate the value of the property that you are animating, based on the interpolated fraction, the starting value, and the ending value of the animation.

How Property Animation Differs from View Animation

The view animation system provides the capability to only animate View objects, so if you wanted to animate non-view objects, you have to implement your own code to do so. The view animation system is also constrained in the fact that it only exposes a few aspects of a View object to animate, such as the scaling and rotating of a view but not the background color, for instance.

Another disadvantage of the view animation system is that it only modified where the View was drawn, and not the actual View itself.

The view animation system, however, takes less time to setup and requires less code to write. If view animation accomplishes everything you need to do, or if your existing code already works the way you want, there is no need to use the property animation system.

API Overview

a> animators

The animators provides the basic structure for creating animations.

b> evaluators

Evaluators tell the property animation system how to calculate values for a given property.

c> time interpolators

A time interpolator defines how specific values in an animation are calculated as a function of time.

Animating with ValueAnimator

The ValueAnimator class lets you animate values of some type for the duration of an animation by specifying a set of int, float, or color values to animate through.

The ValueAnimator does not operate on objects or properties directly. The most likely thing that you want to do is modify the objects that you want to animate with these calculated values. You need to implement the ValueAnimator.AnimatorUpdateListener, with which you can obtain the calculated value for that specific frame refresh by calling getAnimatedValued().

Animating with ObjectAnimator

The ObjectAnimator is a subclass of the ValueAnimator and combines the timing engine and value computation of ValueAnimator with the ability to animate a named property of a target object.

To have the ObjectAnimator update properties correctly, you must do the following:

a> The object property that you are animating must have a setter function in the form of set<propertyName>().

b> If you specify only one value for the values... parameter in one of the ObjectAnimator factory methods, it is assumed to be the ending value of the animation. Therefore, the object property that you are animating must have a getter function that is used to obtain the starting value of the animation. The getter function must be in the form of get<propertyName>().

c> The getter(if needed) and setter methods of the property that you are animating must operate on the same type as the starting and ending values that you specify to ObjectAnimator.

d> Depending on what property to object you are animating, you might need to call the invalidate() method on a view to force the screen to redraw itself with the updated animated values. You do this in the onAnimationUpdate() callback.

Choreographing Multiple Animations with AnimatorSet

In many cases, you want to play an animation that depends on when another animation starts or finished. The Android system lets you bundle animations together into an AnimatorSet, so that you can specify whether to start animations simultaneously, sequentially, or after a specified delay.

Animation Listeners

Animator.AnimatorListener

a> onAnimationStart()

b> onAnimationEnd()

c> onAnimationRepeat()

d>onAnimationCancel()

Called when the animation is canceled. A cancelled animation also calls onAnimationEnd(), regardless of how they were ended.

ValueAnimator.AnimatorUpdatedListener

a> onAnimationUpdate()

Called on every frame of the animation. To use the value, query the ValueAnimator object passed into the event to get the current animated value with the getAnimatedValue() method.

Depending on what property or object you are animating, you might need to call invalidate() on a View to force that area of the screen to redraw itself with the new animated values.

Animating Layout Changed to ViewGroups

The property animation system provides the capability to animate changes to view group objects as well as provide an easy way to animate view objects themselves.

You can animate layout changes within a view group with the LayoutTransition class.

Using a TypeEvaluator

If you want to animate a type that is unknown to the Android system, you can create your own evaluator by implementing the TypeEvaluator interface. The types that are known by the Android System are int, float, or a color, which are supported by the IntEvaluator, FloatEvaluator, and ArgbEvaluator type evaluators.

There is only one method to implement in the TypedEvaluator interface, the evaluate() method.

When ValueAnimator (or ObjectAnimator) runs, it calculates a current elapsed fraction of the animation and then calculates an interpolated version of that depending on what interpolator that you are using. The interpolated fraction is what your TypedEvaluator receives through the fraction parameter, so you do not have to take into account the interpolator when calculating animated values.

Using Interpolators

An interpolator define how specific values in an animation are calculated as a function of time.

Interpolators in the animation system receive a fraction from Animators that represent the elapsed time of the animation. The Android system provides a set of common interpolators. If none of these suit your needs, you can implement the TimeInterpolator interface and create your own.

Specifying Keyframes

A Keyframe object consists of a time/value pair that lets you define a specific state at a specific time of an animation. Each keyframe can also have its own interpolator to control the behavior of the animation in the interval between the previous keyframe's time and the time of this keyframe.

Animating Views

The view animation system transformed View objects by changing the way that they were drawn. This resulted in the view being animated, but caused no change in the view object itself. This led to behavior such as an object still existing in its original location, even though it was drawn on a different location on the screen.

In Android 3.0, new properties and the corresponding getter and setter methods were added to eliminate this drawback.

The property animation system can animate Views on the screen by changing the actual properties in the view objects. In addition, views also automatically call the invalidate() method refresh the screen whenever its properties are changed. The new properties in the View class that facilitate property animations are: 

a> translationX and translationY

b> rotation, rotationX, and rotationY

c> scaleX and scaleY

d> pivotX and pivotY

e> x and y

f> alpha

Animating with ViewPropertyAnimator

The ViewPropertyAnimator provides a simple way to animate several properties of a View in parallel, using a single underlying Animator object. It behaves much like an ObjectAnimator, because it modifies the actual values of the view's properties, but is more efficient when animating many properties at once. In addition, the code for using the ViewPropertyAnimator is much more concise and easier to read.

Declaring Animations in XML

To distinguish animation files that use the new property animation APIs from those that are the legacy view animation framework, starting with Android 3.1, you should save the XML files for property animations in the res/animator/ directory (instead of res/anim/).