Adding Animation Resources

For your splash screen, you need to create three custom animations in XML and save them to the / res/anim resource directory: fade_in.xml, fade_in2.xml, and custom_anim.xml.

The first animation, fade_in.xml, simply fades its target from an alpha value of 0 (transparent) to an alpha value of 1 (opaque) over the course of 2500 milliseconds, or 2.5 seconds. There is no built-in animation editor in Eclipse. The XML for the fade_in.xml animation looks like this:

<?xml version="1.0" encoding="utf-8" ?> <set xmlns:android="


<alpha android:fromAlpha="0.0' android:toAlpha="1.0' android:duration="2500"> </alpha> </set>

You can apply this animation to the top TextView control with your title text.

Next, you create the fade_in2.xml animation. This animation does exactly the same thing as the fade_in animation, except that you set the startOffset attribute to 2500 milliseconds. This means that this animation will actually take 5 seconds total: It waits 2.5 seconds and then fades in for 2.5 seconds. Because 5 seconds is long enough to display the splash screen, you should plan to listen for fade_in2 to complete and then transition to the main menu screen.

Finally, you need some fun animation sequence for the TableLayout graphics. In this case, your animation set contains multiple, simultaneous operations: a rotation, some scaling, and an alpha transition. As a result, the target View spins into existence. The custom anim.xml file looks like this:

You can use the built-in animations provided in the android.R.anim class.

<?xml version="i.0" encoding="utf-8" ?> <set xmlns:android="'


<rotate android:fromDegrees="0' android:toDegrees="360' android:pivotX="50%' android:pivotY="50%' android:duration="2000" /> <alpha android:fromAlpha="0.0' android:toAlpha="i.0" android:duration="2000"> </alpha> <scale android:pivotX="50%'






android:duration="2000" />

As you can see, the rotation operation takes 2 seconds to rotate from 0 to 360 degrees, pivoting around the center of the view. The alpha operation should look familiar; it simply fades in over the same 2-second period. Finally, the scale operation scales from 10% to 100% over the same 2-second period. This entire animation takes 2 seconds to complete.

After you have saved all three of your animation files, you can begin to apply the animations to specific views.

0 0

Post a comment