Showing posts with label View. Show all posts
Showing posts with label View. Show all posts

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