Protected void applyTransformationfloat interpolatedTime Transformation t

final Matrix matrix = t.getMatrix(); matrix.setScale(interpolatedTime, interpolatedTime);

The initialize method is a callback method that tells us about the dimensions of the view. This is also a place to initialize any animation parameters you might have. In this example, we have set the duration to be 2500 milliseconds (2.5 seconds). We have also specified that we want the animation effect to remain intact after the animation completes by setting FillAfter to true. Plus, we've indicated that the interpolator is a linear interpolator, meaning that the animation changes in a gradual manner from start to finish. All of these properties come from the base android.view.animation.Animation class.

The main part of the animation occurs in the applyTransformation method. The Android framework will call this method again and again to simulate animation. Every time Android calls the method, interpolatedTime has a different value. This parameter changes from 0 to 1 depending on where you are in the 2.5-second duration that you set during initialization. When interpolatedTime is 1, you are at the end of the animation.

Our goal, then, is to change the transformation matrix that is available through the transformation object called t in the applyTransformation method. You will first get the matrix and change something about it. When the view gets painted, the new matrix will take effect. You can find the kinds of methods available on the Matrix object by looking up the API documentation for

In Listing 6-16, here is the code that changes the matrix: matrix.setScale(interpolatedTime, interpolatedTime);

The setScale method takes two parameters: the scaling factor in the x direction and the scaling factor in the y direction. Because the interpolatedTime goes between 0 and 1, you can use that value directly as the scaling factor. So when you start the animation, the scaling factor is 0 in both x and y directions. Halfway through the animation, this value will be 0.5 in both x and y directions. At the end of the animation, the view will be at its full size because the scaling factor will be 1 in both x and y directions. The end result of this animation is that the ListView starts out tiny and grows into full size.

Listing 6-17 shows the complete source code for the ViewAnimationActivity that includes the animation.

Listing 6-17. Code for the View-Animation Activity, Including Animation public class ViewAnimationActivity extends Activity {

^Override public void onCreate(Bundle savedInstanceState)

super.onCreate(savedInstanceState); setContentView(R.layout.list_layout); setupListView(); this.setupButton();

private void setupListView()

String[] listItems = new String[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6",

ArrayAdapter listItemAdapter = new ArrayAdapter(this

,android.R.layout.simple_list_item_1 ,listItems);

ListView lv = (ListView)this.findViewById(;


private void setupButton() {

Button b = (Button)this.findViewById(; b.setOnClickListener(

new Button.OnClickListener(){

public void onClick(View v) {


private void animateListView() {

ListView lv = (ListView)this.findViewById(; lv.startAnimation(new ViewAnimation());

When you run the code in Listing 6-17, you will notice something odd. Instead of uniformly growing larger from the middle of the screen, the ListView grows larger from the top-left corner. The reason is that the origin for the matrix operations is at the top-left corner. To get the desired effect, you first have to move the whole view so that the view's center matches the animation center (top-left). Then you apply the matrix and move the view back to the previous center.

Here's the code for doing this:

final Matrix matrix = t.getMatrix(); matrix.setScale(interpolatedTime, interpolatedTime); matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY);

The preTranslate and postTranslate methods set up a matrix before the scale operation and after the scale operation. This is equivalent to making three matrix transformations in tandem. The code matrix.setScale(interpolatedTime, interpolatedTime); matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY);

is equivalent to move to a different center scale it move to the original center

Here is the code for the transformation method that will give us the desired effect:

protected void applyTransformation(float interpolatedTime, Transformation t) {

final Matrix matrix = t.getMatrix(); matrix.setScale(interpolatedTime, interpolatedTime); matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY);

You will see this pattern of pre and post applied again and again. You can also accomplish this result using other methods on the Matrix class, but this technique is the most common— plus, it's succinct. We will, however, cover these other methods toward the end of this section.

More important, the Matrix class allows you not only to scale a view, but also to move it around through translate methods and change its orientation through rotate methods. You can experiment with these methods and see what the resulting animation looks like. In fact, the animations presented in the preceding "Layout Animation" section are all implemented internally using the methods on this Matrix class.

0 0

Post a comment