Animation takes some parameters such as start value , end value, size , time duration , rotation angle e.t.c and perform the required animation on that object. It can be applied to any type of object. So in order to use this , android has provided us a class called Animation.
In order to perform animation in android , we are going to call a static function loadAnimation() of the class AnimationUtils. We are going to receive the result in an instance of Animation Object. Its syntax is as follows:
1 |
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation); |
Note the second parameter. It is the name of the our animation xml file. You have to create a new folder called anim under res directory and make an xml file under anim folder.
This animation class has many useful functions which are listed below:
Method | Description |
---|---|
start() | This method starts the animation. |
setDuration(long duration) | This method sets the duration of an animation. |
getDuration() | This method gets the duration which is set by above method. |
end() | This method ends the animation. |
cancel() | This method cancels the animation. |
In order to apply this animation to an object , we will just call the startAnimation() method of the object. Its syntax is:
1 2 |
ImageView image= (ImageView)findViewById(R.id.img); image.startAnimation(animation); |
In this example i will show how to use make different Animation and to use that Animations.
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken many Buttons to perform different Animations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="5dp" > <Button android:id="@+id/blink" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Blink" /> <Button android:id="@+id/bounce" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Bounce" /> <Button android:id="@+id/move" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Move" /> <Button android:id="@+id/rotate" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Rotate" /> <Button android:id="@+id/fadein" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Fade In" /> <Button android:id="@+id/fadeout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Fade Out" /> <Button android:id="@+id/bottomup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Bottom Up" /> <Button android:id="@+id/bottomdown" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Bottom Down" /> <Button android:id="@+id/topin" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="In from Top" /> <Button android:id="@+id/topout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Out from Top" /> <Button android:id="@+id/slide_in_right" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Slide in Right" /> <Button android:id="@+id/slide_out_right" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Slide out Right" /> <Button android:id="@+id/slide_in_left" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Slide in Left" /> <Button android:id="@+id/slide_out_left" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Slide out Left" /> <Button android:id="@+id/zoomin" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Zoom In" /> <Button android:id="@+id/zoomout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Zoom Out" /> <Button android:id="@+id/together" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Together" /> <Button android:id="@+id/sequential" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Sequential" /> </LinearLayout> </ScrollView> |
3. Now, create a new folder under res directory naming anim for creating animation xml files as told above. Here you are going to create all the animation files that you are going to need in code. I had made several different animation xml files.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:interpolator="@android:anim/bounce_interpolator"> <scale android:duration="500" android:fromXScale="1.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:duration="600" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:repeatCount="5" android:repeatMode="reverse" android:toAlpha="1.0" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <alpha android:duration="1000" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="1.0" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <alpha android:duration="1000" android:fromAlpha="1.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="0.0" /> </set> |
1 2 3 4 5 6 7 |
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="-100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="300" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:fillAfter="true"> <translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="2000" /> </set> |
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="300" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="300" android:fromXDelta="0" android:toXDelta="100%p" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <rotate android:duration="600" android:fromDegrees="0" android:interpolator="@android:anim/cycle_interpolator" android:pivotX="50%" android:pivotY="50%" android:repeatCount="5" android:repeatMode="restart" android:toDegrees="360" /> </set> |
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="300" android:fromYDelta="-100%" android:toYDelta="0%" /> </set> |
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="200" android:fromYDelta="0%" android:toYDelta="-100%" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale android:duration="500" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/linear_interpolator" android:toXScale="1.0" android:toYScale="0.0" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale android:duration="500" android:fromXScale="1.0" android:fromYScale="0.0" android:interpolator="@android:anim/linear_interpolator" android:toXScale="1.0" android:toYScale="1.0" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXScale="1" android:fromYScale="1" android:pivotX="50%" android:pivotY="50%" android:toXScale="3" android:toYScale="3" > </scale> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="0.5" android:toYScale="0.5" > </scale> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:interpolator="@android:anim/linear_interpolator" > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="4000" android:fromXScale="1" android:fromYScale="1" android:pivotX="50%" android:pivotY="50%" android:toXScale="4" android:toYScale="4" > </scale> <!-- Rotate 180 degrees --> <rotate android:duration="500" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:repeatCount="5" android:repeatMode="restart" android:toDegrees="360" /> </set> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:interpolator="@android:anim/linear_interpolator" > <!-- Use startOffset to give delay between animations --> <!-- Move --> <translate android:duration="800" android:fillAfter="true" android:fromXDelta="0%p" android:startOffset="300" android:toXDelta="75%p" /> <translate android:duration="800" android:fillAfter="true" android:fromYDelta="0%p" android:startOffset="1100" android:toYDelta="70%p" /> <translate android:duration="800" android:fillAfter="true" android:fromXDelta="0%p" android:startOffset="1900" android:toXDelta="-75%p" /> <translate android:duration="800" android:fillAfter="true" android:fromYDelta="0%p" android:startOffset="2700" android:toYDelta="-70%p" /> <!-- Rotate 360 degrees --> <rotate android:duration="1000" android:fromDegrees="0" android:interpolator="@android:anim/cycle_interpolator" android:pivotX="50%" android:pivotY="50%" android:repeatCount="10" android:repeatMode="restart" android:startOffset="3800" android:toDegrees="360" /> </set> |
4. Now, add the following code to MainActivity.java , in this activity i am going to show how to load the different animations and set them to views and use them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
package com.android_animation_demo; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; public class MainActivity extends ActionBarActivity implements OnClickListener { // Making instance of all Animations that are going to be used private static Animation blink_animtion, bounce_animation, move_animation, rotate_animtion, fadein_animation, fadeout_animation, bottomup_animtion, bottomdown_animation, topin_animation, topout_animtion, rightin_animation, rightout_animation, leftin_animtion, leftout_animation, zoomin_animation, zoomout_animtion, sequential_animation, together_animation; private static Button blink, bounce, move, rotate, fadein, fadeout, bottomup, bottomdown, topin, topout, rightin, rightout, leftin, leftout, zoomin, zoomout, together, sequential; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); setListeners(); loadAnimations(); } // Initializing all buttons void init() { blink = (Button) findViewById(R.id.blink); bounce = (Button) findViewById(R.id.bounce); move = (Button) findViewById(R.id.move); rotate = (Button) findViewById(R.id.rotate); fadein = (Button) findViewById(R.id.fadein); fadeout = (Button) findViewById(R.id.fadeout); bottomup = (Button) findViewById(R.id.bottomup); bottomdown = (Button) findViewById(R.id.bottomdown); topin = (Button) findViewById(R.id.topin); topout = (Button) findViewById(R.id.topout); rightin = (Button) findViewById(R.id.slide_in_right); rightout = (Button) findViewById(R.id.slide_out_right); leftin = (Button) findViewById(R.id.slide_in_left); leftout = (Button) findViewById(R.id.slide_out_left); zoomin = (Button) findViewById(R.id.zoomin); zoomout = (Button) findViewById(R.id.zoomout); together = (Button) findViewById(R.id.together); sequential = (Button) findViewById(R.id.sequential); } // Setting listeners to all buttons void setListeners() { blink.setOnClickListener(this); bounce.setOnClickListener(this); move.setOnClickListener(this); rotate.setOnClickListener(this); fadein.setOnClickListener(this); fadeout.setOnClickListener(this); bottomup.setOnClickListener(this); bottomdown.setOnClickListener(this); topin.setOnClickListener(this); topout.setOnClickListener(this); rightin.setOnClickListener(this); rightout.setOnClickListener(this); leftin.setOnClickListener(this); leftout.setOnClickListener(this); zoomin.setOnClickListener(this); zoomout.setOnClickListener(this); together.setOnClickListener(this); sequential.setOnClickListener(this); } // Loading animations from "anim" folder void loadAnimations() { blink_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.blink); bounce_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bounce); move_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.move); rotate_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); fadein_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_in); fadeout_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out); bottomup_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_up); bottomdown_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_down); topin_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_top); topout_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_top); rightin_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.right_enter); rightout_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.right_out); leftin_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.in_from_left); leftout_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.left_out); zoomin_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.zoom_in); zoomout_animtion = AnimationUtils.loadAnimation(MainActivity.this, R.anim.zoom_out); sequential_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.sequential); together_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.together); } // Implementing click listeners to all buttons and starting animations @Override public void onClick(View v) { switch (v.getId()) { case R.id.blink: blink.startAnimation(blink_animtion); break; case R.id.bounce: bounce.startAnimation(bounce_animation); break; case R.id.move: move.startAnimation(move_animation); break; case R.id.rotate: rotate.startAnimation(rotate_animtion); break; case R.id.fadein: fadein.startAnimation(fadein_animation); break; case R.id.fadeout: fadeout.startAnimation(fadeout_animation); break; case R.id.bottomup: bottomup.startAnimation(bottomup_animtion); break; case R.id.bottomdown: bottomdown.startAnimation(bottomdown_animation); break; case R.id.topin: topin.startAnimation(topin_animation); break; case R.id.topout: topout.startAnimation(topout_animtion); break; case R.id.slide_in_right: rightin.startAnimation(rightin_animation); break; case R.id.slide_out_right: rightout.startAnimation(rightout_animation); break; case R.id.slide_in_left: leftin.startAnimation(leftin_animtion); break; case R.id.slide_out_left: leftout.startAnimation(leftout_animation); break; case R.id.zoomin: zoomin.startAnimation(zoomin_animation); break; case R.id.zoomout: zoomout.startAnimation(zoomout_animtion); break; case R.id.sequential: sequential.startAnimation(sequential_animation); break; case R.id.together: together.startAnimation(together_animation); break; } } } |
5. Finally, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.