Android animation effects: translate, scale, alpha, and rotate

Source: Internet
Author: User

2011.10.28 Note: If you need to stop the widget at the position after the animation, you need to set the android: fillAfter attribute to true on the set node. By default, after the animation ends, the system returns to the position before the animation. After setting android: fillAfter, we can see that the control remains behind the animation. In fact, we only see that the actual position is still in front of the original animation, you will find that the Button cannot be clicked, which is the reason. So we can manually move the control to the position after the animation ends. In this case, the root node is AbsoluteLayout, because LinearLayout cannot be located through the x or y coordinates. Specific Method: change the layout to AbsoluteLayout and use the setAnimationListener of Animation to set the Animation playback event. In the onAnimationEnd method, use the setLayoutParams method of the control to set the Animation position.
May 15 Note: overridePendingTransition only supports android 2.0 and later versions
Android has two types of animation effects: tweened animation and frame by frame animation. Generally, we use the first one. The animation can be further divided into AlphaAnimation, RotateAnimation for transparency conversion, ScaleAnimation for rotation conversion, and TranslateAnimation for Zoom conversion ).
The animation effect is defined in the xml file under the anim directory. in the program, use AnimationUtils. loadAnimation (Context context, int ResourcesId) is loaded into an Animation object. When you need to display the Animation effect, execute the startAnimation method of the View to be animated and pass in the Animation. You can also apply the animation effect after switching Activity. After the startActivity method, execute the overridePendingTransition method. The two parameters are the animation effect before switching, and the animation effect after switching, in the following example, two alpha animations are input to implement fade-in and fade-out effects when switching Activity.
The following code is provided:
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: id = "@ + id/ll"
Android: background = "@ drawable/white"
>
<TextView android: id = "@ + id/TV"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "translate animation effect"
/>
<TextView android: id = "@ + id/tv2"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "scale animation effect"
/>
<TextView android: id = "@ + id/tv3"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "alpha animation effect"
/>
<TextView android: id = "@ + id/tv4"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "rotate animation effect"
/>
<Button android: id = "@ + id/bt3"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "animation demo"
/>
<Button android: id = "@ + id/bt"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "Switch"
/>
</LinearLayout>
Activity2.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: id = "@ + id/ll2"
>
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "Activity2"
/>
<Button android: id = "@ + id/bt2"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "Return main"
/>
</LinearLayout>
XML file of animation effects, all stored in the anim directory:
A1.xml fade-out effect
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Alpha
Android: fromalphi = "1.0"
Android: toAlpha = "0.0"
Android: duration= "500"
/>
</Set>
<! --
FromAlpha: transparency at the beginning
ToAlpha: transparency at end
Duration: animation duration
-->
A2.xml fade-in effect:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Alpha
Android: fromalphi = "0.0"
Android: toAlpha = "1.0"
Android: duration= "500"
/>
</Set>
Rotate. xml rotation effect:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Rotate
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromDegrees = "300"
Android: toDegrees = "-360"
Android: Required Tx = "10%"
Android: Ty = "100%"
Android: duration = "10000"/>
</Set>
<! --
FromDegrees start angle
ToDegrees animation end angle
Very Tx, very ty is not clear, the effect should be defined as the center of the rotation
-->
Scale. xml Scaling:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Scale
Android: interpolator = "@ android: anim/decelerate_interpolator"
Android: fromXScale = "0.0"
Android: toXScale = "1.5"
Android: fromYScale = "0.0"
Android: toYScale = "1.5"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: startOffset = "0"
Android: duration= "10000"
Android: repeatCount = "1"
Android: repeatMode = "reverse"
/>
</Set>
<! --
Interpolator specifies the animation insertor. Common examples include the accelerator insertor accelerate_decelerate_interpolator, the accelerator insertor accelerate_interpolator, And the decelerate_interpolator.
FromXScale and fromYScale: Scale X and Y before the animation starts. If 0.0 is not displayed, 1.0 is normal.
ToXScale, toYScale, the final scaling multiple of the animation, 1.0 is the normal size, greater than 1.0 to zoom in
Starting position of the animated TX or Ty animation, both of which are 50% relative to the screen percentage, indicates that the animation starts from the center of the screen.
StartOffset: Specifies the interval between multiple animation executions. If an animation is executed only once, the animation is paused before execution, in milliseconds.
Duration: the time consumed by an animation effect, in milliseconds. The smaller the value, the faster the animation speed.
RepeatCount: Repeated animation count. The animation will execute this value + 1 time.
RepeatMode: Specifies the animation repetition mode. The reverse indicates the reverse direction. When the animation is executed for the first time, the animation is in the opposite direction. Restart indicates re-execution, and the direction remains unchanged.
-->
Translate. xml:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate
Android: fromxdel= "320"
Android: toXDelta = "0"
Android: fromYDelta = "480"
Android: toYDelta = "0"
Android: duration = "10000"/>
</Set>
<! --
FromXDelta, fromYDelta start with X, Y coordinates, the coordinates in the lower right corner of the screen are X: 320, Y: 480
Coordinates of X and Y at the end of toXDelta and toYDelta Animation
-->
The following is the program code, main. java:
Package com. pocketdigi. animation;
 
Import android. app. Activity;
Import android. content. Intent;
Import android. OS. Bundle;
Import android. view. View;
Import android. view. View. OnClickListener;
Import android. view. animation. Animation;
Import android. view. animation. AnimationUtils;
Import android. widget. Button;
Import android. widget. TextView;
 
Public class main extends Activity {
/** Called when the activity is first created .*/
TextView TV, tv2, tv3, tv4;
Button bt3;
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
Button bt = (Button) findViewById (R. id. bt );
TV = (TextView) findViewById (R. id. TV );
Tv2 = (TextView) findViewById (R. id. tv2 );
Tv3 = (TextView) findViewById (R. id. tv3 );
Tv4 = (TextView) findViewById (R. id. tv4 );
 
 
Bt3 = (Button) findViewById (R. id. bt3 );
Bt. setOnClickListener (new OnClickListener (){
 
@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
Intent intent = new Intent (main. this, activity2.class );
StartActivity (intent );
OverridePendingTransition (R. anim. a2, R. anim. a1 );
// Fade out the animation effect
}
 
});
Bt3.setOnClickListener (new OnClickListener (){
 
@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
Animation translate = AnimationUtils. loadAnimation (main. this, R. anim. translate );
Animation scale = AnimationUtils. loadAnimation (main. this, R. anim. scale );
Animation rotate = AnimationUtils. loadAnimation (main. this, R. anim. rotate );
Animation alpha = AnimationUtils. loadAnimation (main. this, R. anim. a1 );
// Load the XML file into an Animation object
TV. startAnimation (translate );
Tv2.startAnimation (scale );
Tv3.startAnimation (alpha );
Tv4.startAnimation (rotate );
// Apply Animation
 
}});
}
}
Activity2.java:
Package com. pocketdigi. animation;
 
Import android. app. Activity;
Import android. content. Intent;
Import android. OS. Bundle;
Import android. view. View;
Import android. view. View. OnClickListener;
Import android. widget. Button;
 
Public class activity2 extends Activity {
Button bt2;
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity2 );
Bt2 = (Button) findViewById (R. id. bt2 );
Bt2.setOnClickListener (new OnClickListener (){
 
@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
Intent intent = new Intent (activity2.this, main. class );
StartActivity (intent );
OverridePendingTransition (R. anim. a2, R. anim. a1 );
}
 
});
}
}
Note: The animation switching Activity is valid only when the Activity is started. If the Activity has been started and FLAG_ACTIVITY_REORDER_TO_FRONT is added to the intent, no new Activity will be started and no animation effect will be available.

Excerpt from advancing with the times

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.