Animation is the process of making the illusion of motion and the illusion of change by means of the rapid succession of sequential images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon and beta movement, but the exact causes are still unclear.
Animators are artists who specialize in the creation of animation. Animation can be recorded with either analogue media, a flip book, motion picture film, video tape, digital media, including formats with animated GIF, Flash animation, and digital video. To display animation, a digital camera, computer, or projector are used along with new technologies that are produced.
In Android We can implement this Animation effect to any Views present in our project by two Process first is from xml code OR second is from java code.
And here in this example we are animating views through Xml code.
To get this from java you only have to call some override methods and start implementing that
Below is the output of our project
In Your Android Structure Locate the res folder and Right Click on that »» New »» Android resource directory »» Directory name:-anim, Resource type:- anim »» OK.
ii. Create a file name as blink.xml to give blinking effect and Add below code in it.
v. Create a file name as move.xml and Add below code in it.
Animators are artists who specialize in the creation of animation. Animation can be recorded with either analogue media, a flip book, motion picture film, video tape, digital media, including formats with animated GIF, Flash animation, and digital video. To display animation, a digital camera, computer, or projector are used along with new technologies that are produced.
In Android We can implement this Animation effect to any Views present in our project by two Process first is from xml code OR second is from java code.
And here in this example we are animating views through Xml code.
To get this from java you only have to call some override methods and start implementing that
Below is the output of our project
1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as MainActivity.
2. Once the project is created open your activity_main.xml file and Add Below Code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.targetandroid.info.animations.MainActivity">
<Button
android:id="@+id/bt_blink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blink"/>
<Button
android:id="@+id/bt_clockwise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/bt_blink"
android:text="clockwise"/>
<Button
android:id="@+id/bt_zoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/bt_clockwise"
android:text="Zoom"/>
<Button
android:id="@+id/bt_slide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/bt_zoom"
android:text="slide"/>
<ImageView
android:id="@+id/iv_sun"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/bt_fade"
android:src="@drawable/sun"
/>
</RelativeLayout>
3. After this Create a new Android Resource Directory(folder) and named it as anim
i. To create this directory follow below procedure:-
now you can see a new directory named as anim
in this we will add all our customized animation file and call it whenever we need.
ii. Create a file name as blink.xml to give blinking effect and Add below code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="1000"
android:repeatMode="restart"
android:repeatCount="2"/>
</set>
iii. Create a file name as clockwise.xml and Add below code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- <rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000" >
</rotate>-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="0"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/linear_interpolator"
android:duration="3000" >
</rotate>
iv. Create a file name as fade.xml and Add below code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
>
<alpha
android:startOffset="2000"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="3000"/>
<!-- <alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="2000" >
</alpha>-->
<alpha
android:startOffset="2000"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="3000" >
</alpha>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
<!--<translate
android:fromXDelta="50%p"
android:toXDelta="100%p"
android:duration="2000" />-->
<translate android:duration="5000"
android:repeatCount="0"
android:fromYDelta="-250.0"
android:toYDelta="750.0" />
<!-- <translate
android:startOffset="3000"
android:duration="3000"
android:repeatCount="1"
android:fromYDelta="-174.0"
android:toYDelta="0.0" />
-->
</set>
vi. Create a file name as moveopposite.xml and Add below code in it.
<?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="50%p"
android:duration="800" />
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="800"
android:fromDegrees="360"
android:toDegrees="0"
android:pivotX="100%"
android:pivotY="0%"
android:duration="5000" >
</rotate>
</set>
vii. Create a file name as zoom.xml and Add below code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.5"
android:toXScale="3.0"
android:fromYScale="0.5"
android:toYScale="3.0"
android:duration="5000"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="5000"
android:fromXScale="3.0"
android:toXScale="0.5"
android:fromYScale="3.0"
android:toYScale="0.5"
android:duration="5000"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
</set>
viii. Create a file name as slide.xml and Add below code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.5"
android:toXScale="3.0"
android:fromYScale="0.5"
android:toYScale="3.0"
android:duration="5000"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="5000"
android:fromXScale="3.0"
android:toXScale="0.5"
android:fromYScale="3.0"
android:toYScale="0.5"
android:duration="5000"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
</set>
4. Now Open Your MainActivity.java Add Below Code In That
package com.targetandroid.info.animations;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//creating global variable
private Button bt_blink,bt_clockwise,bt_zoom,bt_slide;
private ImageView iv_sun;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//call this at top of every code
init();
}
//initializing all views
public void init(){
iv_sun=(ImageView)findViewById(R.id.iv_sun);
bt_blink=(Button)findViewById(R.id.bt_blink);
bt_clockwise=(Button)findViewById(R.id.bt_clockwise);
bt_zoom=(Button)findViewById(R.id.bt_zoom);
bt_slide=(Button)findViewById(R.id.bt_slide);
bt_blink.setOnClickListener(this);
bt_clockwise.setOnClickListener(this);
bt_zoom.setOnClickListener(this);
bt_slide.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (view==bt_blink){
//Calling animations file and applying on our Imageview
Animation animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.blink);
iv_sun.startAnimation(animation);
}
else if (view==bt_clockwise){
Animation animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.clockwise);
iv_sun.startAnimation(animation);
}
else if (view==bt_slide){
Animation animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide);
iv_sun.startAnimation(animation);
}
else if (view==bt_zoom){
Animation animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.myanimation);
iv_sun.startAnimation(animation);
}
}
}
4. Now finally run Your Project
You Will See A Below Output
 |
| Final Output |
For More Tutorial Share And Subscribe to my Blog So you will get all the updates on your mail ,We Never Spam.
Thank You
2 comments
Great one.Basically am doing a course on multimedia and animation. Presently am learning css. Go an idea about how xml is used in animation
Thanks for appreciation.we are continually doing effort to improve our content.
EmoticonEmoticon