Android development-XML Implementation of graphic images and animations (3) Animation Effects

Source: Internet
Author: User
Tags time in milliseconds

Use XML to define Tween Animation
The XML file of the animation is in the res/anim directory of the project. This file must contain a root element, you can set <alpha> <scale> <translate> <rotate> interpolation element or add all the above elements to the <set> element group. By default, therefore, all animation commands occur at the same time. To enable them to occur in sequence, you need to set a special attribute startOffset. Animation commands define what kind of conversions you want to perform. when they happen, how long should they be executed? The conversions can be continuous or at the same time. For example, if you want to move the text content from the left to the right, then rotate the text 180 degrees, or rotate the text content simultaneously during the movement, no conversion requires some special parameters (the size of the start and end sizes, the rotation angle of the start and end, and so on). You can also set some basic parameters (for example, if several conversions occur simultaneously, you can set the same Start Time for them. If the conversion is based on the sequence, the calculation Start Time plus the cycle.
Common node attributes of Tween Animation

Attribute [type] Function Remarks
Duration [long] Attribute is animation duration Time in milliseconds
FillAfter [boolean] If it is set to true, the animation will be applied after the animation ends.
FillBefore [boolean] If this parameter is set to true, the animation is applied before the animation starts.

Interpolator

Specifies an animation insertor. There are some common plug-ins
Accelerate_decelerate_interpolator
Accelerator-slowdown animation inserter
Accelerate_interpolator
Acceleration-animation insertor
Decelerate_interpolator
Slowdown-animation inserter
Other animation Effects
RepeatCount [int] Number of animation repetitions
RepeatMode [int] Define repeated Behaviors 1: Start again 2: plays backward
StartOffset [long] The time interval between the animation, starting from the time when the animation was stopped
ZAdjustment [int] Changing the Z Order of an animation 0: Keep Z Order unchanged
1: Keep at the top
-1: Keep at the bottom layer

Table 2

XML Node Function Description
Alpha Gradient transparency animation effect
<Alpha
Android: fromAlpha = "0.1 ″
Android: toAlpha = "1.0 ″
Android: duration = "3000"/>
FromAlpha

Transparency when attribute is animation start

0.0 indicates completely transparent
1.0 indicates completely opaque
The above value is a float data type number between 0.0 and 1.0.

Duration is the animation duration, in ms.

ToAlpha

The property is the transparency when the animation ends.

Table 3

Scale Gradient scaling animation effect
<Scale
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromXScale = "0.0 ″
Android: toXScale = "1.4 ″
Android: fromYScale = "0.0 ″
Android: toYScale = "1.4 ″
Android: Required Tx = "50%"
Android: Required ty = "50%"
Android: fillAfter = "false"
Android: startOffset = "700"
Android: duration = "700 ″
Android: repeatCount = "10"/>
FromXScale [float] fromYScale [float] It is the scaling size on the X and Y coordinates when the animation starts. 0.0 indicates shrinking to none
1.0 indicates normal scaling-free
A value smaller than 1.0 indicates contraction.
Value greater than 1.0 indicates Amplification
ToXScale [float]
ToYScale [float]
It is the scaling size on the X and Y coordinates when the animation ends.
PivotX [float]
Ty [float]
It is the starting position of the animation relative to the X and Y coordinates of the object. Attribute value description: from 0%-100%, 50% is the midpoint position on the X or Y coordinate of the object.
Table 4
Translate Animation Effect
<Translate
Android: fromXDelta = "30 ″
Android: toXDelta = "-80 ″
Android: fromYDelta = "30 ″
Android: toYDelta = "300 ″
Android: duration = "2000"/>
FromXDelta
ToXDelta
It is the position on the X coordinate at the animation end and start.
FromYDelta
ToYDelta
It is the position on the Y coordinate of the animation and the start point of the animation.
Table 5
Rotate Animation effects of screen transfer and Rotation
<Rotate
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromDegrees = "0 ″
Android: toDegrees = "+ 350 ″
Android: Required Tx = "50%"
Android: Required ty = "50%"
Android: duration = "3000"/>
FromDegrees It is the angle of the object when the animation starts. Description
If the angle is negative, it indicates clockwise rotation.
If the angle is positive, it indicates clockwise rotation.
(Negative from -- to positive: clockwise rotation)
(Negative from -- to negative: counter-clockwise rotation)
(Positive from -- to positive: clockwise rotation)
(Positive from -- to negative: clockwise rotation)
ToDegrees The Rotation Angle of an object can be greater than 360 degrees when the animation ends.
PivotX
Ty
It is the starting position of the animation relative to the X and Y coordinates of the object. Note: The preceding two attribute values are from 0% to 100%.
50% indicates the point position on the X or Y coordinate of the object.

The following is a complete XML definition (provided by the SDK)Copy codeThe Code is as follows: <SPAN style = "FONT-SIZE: 18px"> <set android: Using interpolator = "false" xmlns: android = "http://schemas.android.com/apk/res/android">
<Scale
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromXScale = "1.0"
Android: toXScale = "1.4"
Android: fromYScale = "1.0"
Android: toYScale = "0.6"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: fillAfter = "false"
Android: duration = "700"/>
<Set android: interpolator = "@ android: anim/decelerate_interpolator">
<Scale
Android: fromXScale = "1.4"
Android: toXScale = "0.0"
Android: fromYScale = "0.6"
Android: toYScale = "0.0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: startOffset = "700"
Android: duration= "400"
Android: fillBefore = "false"/>
<Rotate
Android: fromDegrees = "0"
Android: toDegrees = "-45"
Android: toYScale = "0.0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: startOffset = "700"
Android: duration = "400"/>
</Set>
</Set> </SPAN>

The following is an example of implementation:
Pic
The xml file used is as follows:
1. alphaCopy codeThe Code is as follows: <set xmlns: android = "http://schemas.android.com/apk/res/android">
<Alpha
Android: fromalphi = "1.0"
Android: toAlpha = "0.0"
Android: startOffset = "500"
Android: duration= "2000"
/>
</Set>

2. rotateCopy codeThe Code is as follows: <set xmlns: android = "http://schemas.android.com/apk/res/android">
<Rotate
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromDegrees = "0"
Android: toDegrees = "360"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: duration= "2000"
/>
</Set>

3. scaleCopy codeThe Code is as follows: <set xmlns: android = "http://schemas.android.com/apk/res/android">
<Scale
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromXScale = "0.0"
Android: toXScale = "1.0"
Android: fromYScale = "0.0"
Android: toYScale = "1.0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: fillAfter = "false"
Android: duration= "2000"
/>
</Set>

4. translateCopy codeThe Code is as follows: <set xmlns: android = "http://schemas.android.com/apk/res/android">
<Translate
Android: fromXDelta = "10"
Android: toXDelta = "100"
Android: fromYDelta = "10"
Android: toYDelta = "100"
Android: duration= "2000"
/>
</Set>

The specific implementation source code is as follows:Copy codeThe Code is as follows: public class Animation_XML_Activity extends Activity {
Private Button button1;
Private Button button2;
Private Button button3;
Private Button button4;
Private ImageView imageView;
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_animation _ xml _);
Button1 = (Button) findViewById (R. id. button_alpha );
Button2 = (Button) findViewById (R. id. button_rotate );
Button3 = (Button) findViewById (R. id. button_scale );
Button4 = (Button) findViewById (R. id. button_translate );
ImageView = (ImageView) findViewById (R. id. imageview );
Button1.setOnClickListener (new MyButton ());
Button2.setOnClickListener (new MyButton ());
Button3.setOnClickListener (new MyButton ());
Button4.setOnClickListener (new MyButton ());
}
Class MyButton implements OnClickListener {
@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
Switch (v. getId ()){
Case R. id. button_alpha:
Alpha ();
Break;
Case R. id. button_rotate:
Rotate ();
Break;
Case R. id. button_scale:
Scale ();
Break;
Case R. id. button_translate:
Translate ();
Break;
Default:
Break;
}
}

}
Public void Alpha (){
Animation animation = AnimationUtils. loadAnimation (Animation_XML_Activity.this, R. anim. alpha );
ImageView. startAnimation (animation );
}
Public void Rotate (){
Animation animation = AnimationUtils. loadAnimation (Animation_XML_Activity.this, R. anim. rotate );
ImageView. startAnimation (animation );
}
Public void Scale (){
Animation animation = AnimationUtils. loadAnimation (Animation_XML_Activity.this, R. anim. scale );
ImageView. startAnimation (animation );
}
Public void Translate (){
Animation animation = AnimationUtils. loadAnimation (Animation_XML_Activity.this, R. anim. translate );
ImageView. startAnimation (animation );
}
@ Override
Public boolean onCreateOptionsMenu (Menu menu ){
// Inflate the menu; this adds items to the action bar if it is present.
GetMenuInflater (). inflate (R. menu. activity_animation _ xml _, menu );
Return true;
}
}

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.