In Android applications, using animation effects can give users a better feeling. You can use XML or Android code for animation. This tutorial describes how to use XML for animation. Here, we will introduce basic animations, such as fade-in, fade-out, and rotation. For more information, see
Effect: http://www.56.com/u82/v_OTM4MDk5MTk.html
Step 1: Create an anim folder and place the animated xml file
Create an anim sub-folder under the res folder.
Step 2: load the animation
Create an Animation class in the Activity, and then use the AnimationUtils class to load the Animation xml
Copy codeThe Code is as follows:
Animation animFadein;
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_fadein );
TxtMessage = (TextView) findViewById(R.id.txt Message );
BtnStart = (Button) findViewById (R. id. btnStart );
// Load the animation
AnimFadein = AnimationUtils. loadAnimation (getApplicationContext (),
R. anim. fade_in );
}
Step 3: Set the animation listener
If you want to listen to animation events, such as start and end, you need to implement the AnimationListener listener and override the following methods.
OnAnimationEnd (Animation animation)-called when the Animation ends
OnAnimationRepeat (Animation animation)-called when the Animation is repeated
OnAniamtionStart (Animation animation)-called when the Animation is started
Copy codeThe Code is as follows:
@ Override
Public void onAnimationEnd (Animation animation ){
// Use it after the animation ends
// Check for fade in animation
If (animation = animFadein ){
Toast. makeText (getApplicationContext (), "Animation Stopped ",
Toast. LENGTH_SHORT). show ();
}
}
@ Override
Public void onAnimationRepeat (Animation animation ){
// Used when the animation is repeated
}
@ Override
Public void onAnimationStart (Animation animation ){
// When the animation starts to use
}
Last step: Let the animation work. You can use any UI element to call the startAnimation method.
The following is a Textview element call.
TxtMessage. startAnimation (animFadein );
Complete code:
Copy codeThe Code is as follows:
FadeInActivity (light animation)
? Package com. chaowen. androidanimations;
Import info. androidhive. androidanimations. R;
Import android. app. Activity;
Import android. OS. Bundle;
Import android. view. View;
Import android. view. animation. Animation;
Import android. view. animation. AnimationUtils;
Import android. view. animation. Animation. AnimationListener;
Import android. widget. Button;
Import android. widget. TextView;
Import android. widget. Toast;
/**
*
* @ Author chaowen
*
*/
Public class FadeInActivity extends Activity implements AnimationListener {
TextView txtMessage;
Button btnStart;
Animation animFadein;
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_fadein );
TxtMessage = (TextView) findViewById(R.id.txt Message );
BtnStart = (Button) findViewById (R. id. btnStart );
// Load the animation
AnimFadein = AnimationUtils. loadAnimation (getApplicationContext (),
R. anim. fade_in );
// Set the listener
AnimFadein. setAnimationListener (this );
// Button
BtnStart. setOnClickListener (new View. OnClickListener (){
@ Override
Public void onClick (View v ){
TxtMessage. setVisibility (View. VISIBLE );
// Start the animation
TxtMessage. startAnimation (animFadein );
}
});
}
@ Override
Public void onAnimationEnd (Animation animation ){
// Use it after the animation ends
// Check for fade in animation
If (animation = animFadein ){
Toast. makeText (getApplicationContext (), "Animation Stopped ",
Toast. LENGTH_SHORT). show ();
}
}
@ Override
Public void onAnimationRepeat (Animation animation ){
// Used when the animation is repeated
}
@ Override
Public void onAnimationStart (Animation animation ){
// When the animation starts to use
}
}
Some important XML attributes
Important XML animation attributes
Android: duration animation duration, in milliseconds
Android: interval between startOffset animations, starting from the time when the last animation was stopped
Android: interpolator specifies an animation plug-in.
Android: fillAfter: When set to true, the animation is applied after the animation ends.
Android: repeatMode defines repeated Behaviors
Android: repeatCount animation repetition times
Below are some basic animation XML.
Fade In: Fade In
Alpha is the gradient transparency effect. The value ranges from 0 to 1.
Fade_in.xml
Copy codeThe Code is as follows:
<? 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: fromalphi = "0.0"
Android: interpolator = "@ android: anim/accelerate_interpolator"
Android: toAlpha = "1.0"/>
</Set>
Fade Out: Fade Out
It is the opposite of Fade In. The value ranges from 1 to 0.
Fade_out.xml
Copy codeThe Code is as follows:
<? 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: fromalphi = "1.0"
Android: interpolator = "@ android: anim/accelerate_interpolator"
Android: toAlpha = "0.0"/>
</Set>
Cross Fading: fade in and out of the Cross
Both Fade in and Fade out can achieve crossover effect.
Copy codeThe Code is as follows:
Public class CrossfadeActivity extends Activity implements AnimationListener {
TextView txtMessage1, txtMessage2;
Button btnStart;
Animation animFadeIn, animFadeOut;
@ Override
Protected void onCreate (Bundle savedInstanceState ){
// TODO Auto-generated method stub
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_crossfade );
TxtMessage1 = (TextView) findViewById(R.id.txt Message1 );
TxtMessage2 = (TextView) findViewById(R.id.txt Message2 );
BtnStart = (Button) findViewById (R. id. btnStart );
// Load animations
AnimFadeIn = AnimationUtils. loadAnimation (getApplicationContext (),
R. anim. fade_in );
AnimFadeOut = AnimationUtils. loadAnimation (getApplicationContext (),
R. anim. fade_out );
// Set animation listeners
AnimFadeIn. setAnimationListener (this );
AnimFadeOut. setAnimationListener (this );
// Button click event
BtnStart. setOnClickListener (new View. OnClickListener (){
@ Override
Public void onClick (View v ){
TxtMessage2.setVisibility (View. VISIBLE );
TxtMessage2.startAnimation (animFadeIn );
TxtMessage1.startAnimation (animFadeOut );
}
});
}
@ Override
Public void onAnimationEnd (Animation animation ){
If (animation = animFadeOut ){
TxtMessage1.setVisibility (View. GONE );
}
If (animation = animFadeIn ){
TxtMessage2.setVisibility (View. VISIBLE );
}
}
@ Override
Public void onAnimationRepeat (Animation animation ){
// TODO Auto-generated method stub
}
@ Override
Public void onAnimationStart (Animation animation ){
// TODO Auto-generated method stub
}
}
BLink: Cool
Blink. xml
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
& Lt; alpha android: fromAlpha = "0.0"
Android: toAlpha = "1.0"
Android: interpolator = "@ android: anim/accelerate_interpolator"
Android: duration= "600"
Android: repeatMode = "reverse"
Android: repeatCount = "infinite"/>
</Set>
Zoom In: Zoom In
Zoom_in.xml
Copy codeThe Code is as follows:
<? 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: Required Tx = "50%"
Android: Ty = "50%"
Android: toXScale = "3"
Android: toYScale = "3">
</Scale>
</Set>
Zoom Out: Zoom Out
Zoom_out.xml
Copy codeThe Code is as follows:
<? 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: Required Tx = "50%"
Android: Ty = "50%"
Android: toXScale = "0.5"
Android: toYScale = "0.5">
</Scale>
</Set>
Rotate: Rotate
Rotate. xml
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Rotate android: fromDegrees = "0"
Android: toDegrees = "360"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: duration= "600"
Android: repeatMode = "restart"
Android: repeatCount = "infinite"
Android: interpolator = "@ android: anim/cycle_interpolator"/>
</Set>
There are a few other items that will not be listed. If you are interested, refer to the source code.Click to download
