Search this blog

How to add animation resources in android


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=”http://schemas.android.com/apk/res/android”
android:shareInterpolator=”false”>
<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:

<?xml version=”1.0” encoding=”utf-8” ?>
<set
xmlns:android=”http://schemas.android.com/apk/res/android”
android:shareInterpolator=”false”>
<rotate
android:fromDegrees=”0”
android:toDegrees=”360”
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”2000” />
<alpha
android:fromAlpha=”0.0”
android:toAlpha=”1.0”
android:duration=”2000”>
</alpha>
<scale
android:pivotX=”50%”
android:pivotY=”50%”
android:fromXScale=”.1”
android:fromYScale=”.1”
android:toXScale=”1.0”
android:toYScale=”1.0”
android:duration=”2000” />
</set>

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 comments:

Post a Comment