What kind of animation is used for this?

Question

Anyone familiar with the emulator will know that during the loading phase the 'screen' of the AVD shows the word 'android' as in the image below...

The highlight (on the letters DRO in the image) 'scans' from left to right to act as an indeterminate progress indicator.

I don't do much graphics work so I'm not familiar with different animation techniques. Is that type of animation a common one and if so, what is it's name?

I'd like to implement something similar in my main activity's title bar. When opened, it would do a single highlight 'scan' of the activity name. No real purpose other than to add a bit of 'glitz' to the UX.

Answer 1

That is most likely a bitmap animation (sprite animation) or two images where one is the effect layer put on top.

A sprite animation is simply put a prerendered imageset where the frames are just switched at a specified rate.

The other alternative is a partly transparent mask that is animated over the background image from left to right.

To illustrate the second point:

1. First you have the background image:

2. Then you have the mask. Note that white and transparent on white doesn't show that well. Here's a link to the image as well: http://i.imgur.com/bOcD4.png

3. When combined with an offset of the mask you get something like

So you simply draw the mask over the background image and alpha blending will take care of the rest. The simplest way is probably to animate an imageview from a position that is 0-mask.width to a position that is background.width+mask.width.

If you want the mask to be more dynamic you will probably want to generate and render it for example in a custom view where you draw in onDraw to a canvas. You could make the effect a bit cooler if you combine it with a rotation using an AnimationSet (or Animator depending on Android target).