Working with Animation - Android

The Android platform supports three types of graphics animation:

  • Animated GIF images
  • Frame-by-frame animation
  • Tweened animation

A yellow star.

A yellow star.
A yellow star using the stroke style of Paint.

A yellow star using the stroke style of Paint.

Animated GIFs store the animation frames within the image, and you simply include these GIFs like any other graphic drawable resource. For frame-by-frame animation, the developer must provide all graphics frames of the animation. However, with tweened animation, only a single graphic is needed, upon which transforms can be programmatically applied.

Working with Frame-by-Frame Animation

You can think of frame-by-frame animation as a digital flipbook in which a series of similar images display on the screen in a sequence, each subtly different from the last. When you display these images quickly, they give the illusion of movement. This technique is called frame-by-frame animation and is often used on the Web in the form of animated GIF images.

Frame-by-frame animation is best used for complicated graphics transformations that are not easily implemented programmatically.

For example, we can create the illusion of a genie juggling gifts using a sequence of three images, as shown in Figure.
Three frames for an animation of a genie juggling.

Three frames for an animation of a genie juggling.

In each frame, the genie remains fixed, but the gifts are repositioned slightly. The smoothness of the animation is controlled by providing an adequate number of frames and choosing the appropriate speed on which to swap them.

The following code demonstrates how to load three Bitmap resources (our three genie frames) and create an AnimationDrawable. We then set the AnimationDrawable as the background resource of an ImageView and start the animation:

To name the animation loop continuously,we can call the setOneShot() method:

To begin the animation,we call the start() method:

We can end our animation at any time using the stop() method:

Although we used an ImageView background in this example, you can use a variety of different View widgets for animations. For example, you can instead use the Image Switcher view and change the displayed Drawable resource using a timer. This sort of operation is best done on a separate thread. The resulting animation might look something like Figure—you just have to imagine it moving.

Working with Tweened Animations

With tweened animation, you can provide a single Drawable resource—it is a Bitmap graphic, a ShapeDrawable, a TextView, or any other type of View object—and the intermediate frames of the animation are rendered by the system.Android provides tweening support for several common image transformations, including alpha, rotate, scale, and translate animations. You can apply tweened animation transformations to any View, whether it is an ImageView with a Bitmap or shape Drawable, or a layout such as a TableLayout.

Defining Tweening Transformations

You can define tweening transformations as XML resource files or programmatically. All tweened animations share some common properties, including when to start, how long to animate, and whether to return to the starting state upon completion.

The genie animation in the Android emulator.

The genie animation in the Android emulator

Rotating a green rectangle shape drawable (left) and a TableLayout (right).

Rotating a green rectangle shape drawable (left) and a TableLayout (right)

Defining Tweened Animations as XML Resources

In Chapter, we showed you how to store animation sequences as specially formatted XML files within the /res/anim/ resource directory. For example, the following resource file called /res/anim/spin.xml describes a simple five-second rotation:

Defining Tweened Animations Programmatically

You can programmatically define these animations. The different types of transformations are available as classes within the android.view.animation package. For example, you can define the aforementioned rotation animation as follows:

Defining Simultaneous and Sequential Tweened Animations

Animation transformations can happen simultaneously or sequentially when you set the startOffset and duration properties, which control when and for how long an animation takes to complete. You can combine animations into the <set> tag (programmatically, using AnimationSet) to share properties.

For example, the following animation resource file /res/anim/grow.xml includes a set of two scale animations: First, we take 2.5 seconds to double in size, and then at 2.5 seconds, we start a second animation to shrink back to our starting size:

Loading Animations

Loading animations is made simple by using the AnimationUtils helper class. The following code loads an animation XML resource file called /res/anim/grow.xml and applies it to an ImageView whose source resource is a green rectangle shape drawable:

We can listen for Animation events, including the animation start, end, and repeat events, by implementing an AnimationListener class, such as the MyListener class shown here:

Exploring the Four Different Tweening Transformations

Now let’s look at each of the four types of tweening transformations individually. These types are

  • Transparency changes (Alpha)
  • Rotations (Rotate)
  • Scaling (Scale)
  • Movement (Translate)

Working with Alpha Transparency Transformations

Transparency is controlled using Alpha transformations. Alpha transformations can be used to fade objects in and out of view or to layer them on the screen. Alpha values range from 0.0 (fully transparent or invisible) to 1.0 (fully opaque or visible).

Alpha animations involve a starting transparency (fromAlpha) and an ending transparency (toAlpha).

The following XML resource file excerpt defines a transparency-change animation, taking five seconds to fade in from fully transparent to fully opaque:

Programmatically, you can create this same animation using the AlphaAnimation class within the android.view.animation package.

Working with Rotating Transformations

You can use rotation operations to spin objects clockwise or counterclockwise around a pivot point within the object’s boundaries.

Rotations are defined in terms of degrees. For example, you might want an object to make one complete clockwise rotation. To do this, you set the fromDegrees property to 0 and the toDegrees property to 360.To rotate the object counterclockwise instead, you set the toDegrees property to -360.

By default, the object pivots around the (0,0) coordinate, or the top-left corner of the object. This is great for rotations such as those of a clock’s hands, but much of the time, you want to pivot from the center of the object; you can do this easily by setting the pivot point, which can be a fixed coordinate or a percentage. The following XML resource file excerpt defines a rotation animation, taking five seconds to make one full clockwise rotation, pivoting from the center of the object:

Programmatically, you can create this same animation using the RotateAnimation class within the android.view.animation package.

Working with Scaling Transformations

You can use scaling operations to stretch objects vertically and horizontally. Scaling operations are defined as relative scales. Think of the scale value of 1.0 as 100 percent, or fullsize. To scale to half-size, or 50 percent, set the target scale value of 0.5.

You can scale horizontally and vertically on different scales or on the same scale (to preserve aspect ratio).You need to set four values for proper scaling: starting scale (fromXScale, fromYScale) and target scale (toXScale, toYScale).Again, you can use a pivot point to stretch your object from a specific (x,y) coordinate such as the center or another coordinate.

The following XML resource file excerpt defines a scaling animation, taking five seconds to double an object’s size, pivoting from the center of the object:

Programmatically, you can create this same animation using the ScaleAnimation class within the android.view.animation package.

Working with Moving Transformations

You can move objects around using translate operations. Translate operations move an object from one position on the (x,y) coordinate to another coordinate.

To perform a translate operation, you must specify the change, or delta, in the object’s coordinates.You can set four values for translations: starting position (fromXDelta, fromYDelta) and relative target location (toXDelta, toYDelta).

The following XML resource file excerpt defines a translate animation, taking 5 seconds to move an object up (negative) by 100 on the y-axis. We also set the fillAfter 230 Chapter 9 Drawing and Working with Animation property to be true, so the object doesn’t “jump” back to its starting position when the animation finishes:

Programmatically, you can create this same animation using the TranslateAnimation class within the android.view.animation package.

Working with Different Interpolators

The animation interpolator determines the rate at which a transformation happens in time. There are a number of different interpolators provided as part of the Android SDK framework. Some of these interpolators include

  • AccelerateDecelerateInterpolator: Animation starts slowly, speeds up, and ends slowly
  • AccelerateInterpolator: Animation starts slowly and then accelerates
  • AnticipateInterpolator: Animation starts backward, and then flings forward
  • AnticipateOvershootInterpolator: Animation starts backward, flings forward, overshoots its destination, and then settles at the destination
  • BounceInterpolator: Animation “bounces” into place at its destination
  • CycleInterpolator: Animation is repeated a certain number of times smoothly transitioning from one cycle to the next
  • DecelerateInterpolator: Animation begins quickly, and then decelerates
  • LinearInterpolator: Animation speed is constant throughout
  • OvershootInterpolator: Animation overshoots its destination, and then settles at the destination

You can specify the interpolator used by an animation programmatically using the setInterpolator() method or in the animation XML resource using the android: interpolator attribute.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics