Wednesday, July 11, 2012

Playing with Animations in Android

package :android.view.animation
Provides classes that handle tweened animations.
Android provides two mechanisms that you can use to create simple animations:
1.tweened animation
2.frame-by-frame animation


1. Tweened animation, in which you tell Android to perform a series of simple transformations (position, size, rotation, and so on) to the content of a View; 

 Example code:  

you can run these code by just copy paste


package com.tween;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class TweenAnimationActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button buttonRotateCenter = (Button)findViewById(R.id.rotatecenter);
       
        Button buttonRotateCorner = (Button)findViewById(R.id.rotatecorner);
       
        final ImageView floatingImage = (ImageView)findViewById(R.id.floatingimage);
       
        final Animation animationRotateCenter = AnimationUtils.loadAnimation(this, R.anim.rotate_center);
        buttonRotateCenter.setOnClickListener(new Button.OnClickListener(){

            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                floatingImage.startAnimation(animationRotateCenter);
            }});
       
        final Animation animationRotateCorner = AnimationUtils.loadAnimation(this, R.anim.rotate_corner);
        buttonRotateCorner.setOnClickListener(new Button.OnClickListener(){

            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                floatingImage.startAnimation(animationRotateCorner);
            }});
    }
}
in anim folder create xml   falling.xml    
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:duration="2000"/>
</set>
 
 rotate_centet.xml

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

rotate_corner.xml

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


main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
   
    <Button
        android:id="@+id/rotatecenter"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Rotate center"/>

    <Button
        android:id="@+id/rotatecorner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Rotate corner"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/floatingimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
       
    </LinearLayout>   
   

</LinearLayout>



 2. frame-by-frame animation, which loads a series of Drawable resources one after the other. Both animation types can be used in any View object to provide simple rotating timers, activity icons, and other useful UI elements. Tweened animation is handled by this package (android.view.animation); frame-by-frame animation is handled by the AnimationDrawable class. 

 Ex: Running code

package com.frame;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class FrameAnimActivity extends Activity {
    /** Called when the activity is first created. */
   
    ImageView animation;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        animation = (ImageView)findViewById(R.id.imageAnimation);
           
                    animation.setBackgroundResource(R.drawable.animation);
                }
    @Override
        public void onWindowFocusChanged (boolean hasFocus) {
                super.onWindowFocusChanged(hasFocus);
            AnimationDrawable frameAnimation =
               (AnimationDrawable) animation.getBackground();
                if(hasFocus) {
                    frameAnimation.start();
                } else {
                    frameAnimation.stop();
                }
            }
        }
 

drawable 

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/cat_angry0000" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0001" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0002" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0003" android:duration="50" />

    ...

    <item android:drawable="@drawable/cat_angry0004" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0005" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0006" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0007" android:duration="50" />
    <item android:drawable="@drawable/cat_angry0008" android:duration="50" />
   

</animation-list>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E6E6E6">
    <ImageView android:layout_height="wrap_content"
    android:layout_width="wrap_content" android:id="@+id/imageAnimation"
    android:adjustViewBounds="true" />
    </LinearLayout>

0 comments:

Post a Comment