Chapter 7 cool effects-images and animations (5) and Chapter 7 cool effects

Chapter 7 cool effects-images and animations (5) and Chapter 7 cool effects
7.7 gradient Animation-Introduction to Tween Animation7.7.1Tween Animation

A Tween animation performs a series of simple conversions (location, size, rotation, transparency) on the content of the view object ). If you have a text view object, you can move it, rotate it, and make it larger or smaller. If there is a background image under the text, the background image will also be converted with the file.

You can use XML to define Tween Animation. First, add the XML file of the animation to the res/anim directory in the project. The 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.

7.7.2Tween Animation attributes

The following describes the common node attributes of Tween Animation.

L android: duration [long]-The animation duration is measured in milliseconds.

L android: fillAfter [boolean]-when it is set to true, the animation will be applied after the animation ends.

L android: fillBefore [boolean-when set to true, the animation is applied before the animation starts.

L android: interpolator-specifies an animation plug-in that has some common plug-ins.

N accelerate_decelerate_interpolator-accelerator-Deceleration animation inserter.

N accelerate_interpolator-acceleration-animation insertor.

N decelerate_interpolator-Deceleration-animation insertor.

L android: repeatCount [int]-Number of animation repetitions. -1 indicates an infinite loop

L android: RepeatMode [int]-Defines repeated behavior, 1: RepeatMode 2: plays backward.

L android: startOffset [long]-interval between animations, starting from the time when the last animation was stopped.

L android: zAdjustment [int]-change the Z Order of the animation to 0: Keep the Z Order unchanged, 1: Keep it at the top, and-1: Keep it at the bottom.

7.7.3 fade-AlphaAnimation

AlphaAnimation is an animated effect achieved by modifying the image transparency, as shown in 7-6.

Figure 7-6 AlphaAnimation animation effect

 

Next we will parse the XML document of AlphaAnimation's structure:

<? Xml version = "1.0" encoding = "UTF-8"?> <Set xmlns: android = "http://schemas.android.com/apk/res/android"> <Alpha Android: fromalphi = "0.1" Android: toAlpha = "1.0" Android: duration= "3000" /> <! -- Transparency controls the animation effect alpha Floating point value: The fromAlpha attribute is the transparency when the animation starts. The toAlpha attribute is the transparency when the animation ends. Note: 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. --> </Set>

 

In the code, AlphaAnimation:

// Initialization function: // AlphaAnimation (float fromAlpha, float toAlpha) // The first parameter fromAlpha is the transparency when the animation starts. It corresponds to the fromAlpha attribute in XML. // The second parameter toAlpha is the transparency at the animation end, corresponding to the toAlpha attribute in XML AlphaAnimation mAlphaAnimation = new AlphaAnimation (0.1f, 1.0f ); // Set the duration to 5000 milliseconds MAlphaAnimation. setDuration (5000 );

7.7.4 sudden increase or decrease-ScaleAnimation

ScaleAnimation is an animated effect by modifying the image size, as shown in 7-7.

Figure 7-7 ScaleAnimation animation effect

 

The following describes the structure XML document of ScaleAnimation:

<? Xml version = "1.0" encoding = "UTF-8"?> <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.4" Android: fromYScale = "0.0" Android: toYScale = "1.4" Android: Required Tx = "50%" Android: Ty = "50%" Android: fillAfter = "false" Android: duration = "700"/> </Set> <! -Scale the animation effect Attribute: interpolator specifies an animation plug-in. Floating point value: The fromXScale attribute is the scaling size on the X coordinate when the animation starts. The toXScale attribute is the scaling size on the X coordinate when the animation ends. The fromYScale attribute is the scaling size on the Y coordinate at the start of the animation. The toYScale attribute is the scaling size on the Y coordinate when the animation ends. (For the preceding four attribute values, 0.0 indicates that the value is reduced to none, and 1.0 indicates that the value is normal and no scaling is performed. If the value is less than 1.0, it indicates contraction. If the value is greater than 1.0, it indicates amplification) The ready TX attribute is the starting position of the animation relative to the X coordinate of the object. The ready ty attribute is the starting position of the animation relative to the Y coordinate of the object. (The preceding two attribute values are from 0% to 100%, 50% indicates the point position on the X or Y coordinate of the object) -->

 

In the code, ScaleAnimation:

// Initialization function: // ScaleAnimation (float fromX, float toX, float fromY, float toY, // Int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue) // The first parameter fromX is the scaling size on the X coordinate when the animation starts. // The second toX parameter is the scaling size on the X coordinate at the animation end. // The third parameter fromY is the scaling size on the Y coordinate when the animation starts. // The fourth toY parameter is the scaling size on the Y coordinate at the animation end. // The Fifth parameter "animation txtype" indicates the animation position type on the X axis relative to the object. // The sixth parameter, txvalue, is the starting position of the animation relative to the X coordinate of the object. // The Seventh parameter "animation txtype" is the animation position type on the Y axis relative to the object. // The eighth parameter polictyvalue is the starting position of the animation relative to the Y coordinate of the object. ScaleAnimation mScaleAnimation = new ScaleAnimation (0.0f, 1.4f, 0.0f, 1.4f, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f ); // Set the duration to 700 milliseconds MScaleAnimation. setDuration (700 );

7.7.5 translation-TranslateAnimation

TranslateAnimation is an animated effect by modifying the image position, as shown in 7-8:

Figure 7-8 TranslateAnimation animation effect

 

Next we will parse the XML document of the TranslateAnimation structure:

<? Xml version = "1.0" encoding = "UTF-8"?> <Set xmlns: android = "http://schemas.android.com/apk/res/android"> <Translate Android: fromXDelta = "30" Android: toXDelta = "-80" Android: fromYDelta = "30" Android: toYDelta = "300" Android: duration= "2000" /> <! -- Translate position transfer animation effect Integer value: The fromXDelta attribute is the position on the X coordinate when the animation starts. The toXDelta attribute is the position on the X coordinate when the animation ends. The fromYDelta attribute is the position on the Y coordinate when the animation starts. The toYDelta attribute is the position on the Y coordinate when the animation ends. --> </Set>

 

In the code, TranslateAnimation:

// Initialization function: // TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) // The first parameter fromXDelta is the moving position on the X coordinate when the animation starts. // The second parameter toXDelta is the moving position on the X coordinate when the animation ends. // The third parameter fromYDelta is the moving position on the Y coordinate when the animation starts. // The fourth parameter toYDelta is the moving position of the Y coordinate at the animation end. TranslateAnimation mTranslateAnimation = TranslateAnimation (0f, 100f, 0f, 100f ); // Set the duration to 700 milliseconds MTranslateAnimation. setDuration (700 );

7.7.6 Rotating-RotateAnimation

RotateAnimation is the animation effect for rotating an image, as shown in 7-9:

Figure 7-9 RotateAnimation animation effect

 

The following describes the structure XML document of RotateAnimation:

<? 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 = "0" Android: toDegrees = "+ 350" Android: Required Tx = "50%" Android: Ty = "50%" Android: duration = "3000"/> <! -- Rotate rotation animation effect Attribute: interpolator specifies an animation plug-in. Floating point value: The fromDegrees attribute is the object angle when the animation starts. The toDegrees attribute indicates that the Rotation Angle of an object can be greater than 360 degrees when the animation ends. (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 ))   The ready TX attribute is the starting position of the animation relative to the X coordinate of the object. The ready ty attribute is the starting position of the animation relative to the Y coordinate of the object. (The preceding two attribute values are from 0% to 100%. 50% indicates the point position on the X or Y coordinate of the object) --> </Set>

 

In the code, RotateAnimation:

// Initialization function: // RotateAnimation (float fromDegrees, float toDegrees, // Int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue) // The first parameter fromDegrees is the rotation angle at the start of the animation. // The second parameter toDegrees indicates the animation rotation angle. // The third parameter "animation txtype" indicates the animation position type on the X axis relative to the object. // The fourth argument txvalue is the starting position of the animation relative to the X coordinate of the object. // The Fifth parameter "effectxtype" indicates the animation position type on the Y axis relative to the object. // The sixth parameter polictyvalue is the starting position of the animation relative to the Y coordinate of the object. RotateAnimation mRotateAnimation = new RotateAnimation (0.0f, + 3500000f, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f ); // Set the duration to 700 milliseconds MRotateAnimation. setDuration (700 );

7.7.7 implement your own TweenAnimation

Next we will combine the above knowledge to implement our own TweenAnimation.

1) construct a TweenAnimation file in the res/anim directory of the project, as shown in the following figure:

<Set android: Required 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>

 

2) load and execute animations in java code:

// Import omitted Public class myAnimation extends Activity implements OnClickListener {   Private Button mButton; Private Animation mAnimation;   @ Override Public void onCreate (Bundle savedInstanceState ){ Super. onCreate (savedInstanceState ); SetContentView (R. layout. main ); MButton = (Button) findViewById (R. id. button_id ); MButton. setOnClickListener (this ); } Public void onClick (View button ){ Switch (button. getId ()){ Case R. id. button_id :{ MAnimation = AnimationUtils. loadAnimation (this, R. anim. animation_1 ); MButton. startAnimation (mAnimation ); } Break; } } }

 

Experience Sharing: Unlike AnimationDrawable, If you execute animation. start (); In onCreate (), you can play the animation. At the same time, we also found through the animation_1.xml file that multiple TweenAnimation can be written together, and they will implement animation in order.