Saturday 29 September 2012

Animation Prior to Android 3.0

Before Android 3.0, we have View Animation which covers:

1. Tween Animation

Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation.

A sequence of animation instructions defines the tween animation, defined by either XML or Android code. As with defining a layout, an XML file is recommended because it's more readable, reusable, and swappable than hard-coding the animation.


The animation XML file belongs in the res/anim/ directory of your Android project. The file must have a single root element: this will be either a single <alpha><scale><translate><rotate>, interpolator element, or<set> element that holds groups of these elements (which may include another <set>).


Note:

Be sure to use the proper format for what you want ("50" for 50% relative to the parent, or "50%" for 50% relative to itself).

Using translate animation we can do animation like slide left, slide right, slide up, slide down, shake etc.


slide_left.xml




<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="-100%"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="2000" />


slide_right.xml


<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="2000" />

slide_up.xml



<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%"
    android:toYDelta="-100%"
    android:duration="2000"
    android:interpolator="@android:anim/linear_interpolator" />


slide_down.xml


<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%"
    android:toYDelta="100%"
    android:duration="2000"
    android:interpolator="@android:anim/linear_interpolator" />

shake.xml




<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100"
    android:duration="1000"
    android:interpolator="@android:anim/cycle_interpolator"
    android:repeatCount="50"
    android:repeatMode="reverse" />


Note:

To implement shake behaviour we need to use cycle interpolator and repeatCount attribute. 



Using rotate animation we can do rotation with different angles and points.


rotate_360.xml


<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="2000" />

Note:




android:pivotX
Float. The X coordinate to remain fixed when the object is scaled.
android:pivotY
Float. The Y coordinate to remain fixed when the object is scaled.


Using alpha animation we can do fade in/ fade out animation.

fade_in.xml




<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="2000" />


fade_out.xml



<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="1"
    android:interpolator="@android:anim/linear_interpolator"
    android:toAlpha="0" />


Loading View Animation:


Animation animation = AnimationUtils.loadAnimation(this, R.anim.yourAnim);
animation.startAnimation(animation);

2. Frame by Frame Animation

Drawable animation lets you load a series of Drawable resources one after another to create an animation.

frame_animation.xml



<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/active" android:duration="500" />
    <item android:drawable="@drawable/deactive" android:duration="500" />
</animation-list>


Note:
By setting the android:oneshot attribute of the list to true, it will cycle just once then stop and hold on the last frame.

Loading Frame Animation:



@Override
public void onWindowFocusChanged(boolean hasFocus) {
  // TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);
((AnimationDrawable)view.getBackground()).start();
}



profile for Vineet Shukla at Stack Overflow, Q&A for professional and enthusiast programmers

No comments:

Post a Comment