Graphic explanation of four Android views

Graphic explanation of four Android views

Android animations include View Animation, Property Animation, and Drawable Animation.

Android supports View animation in its original version. As the name suggests, View animation is an animation applied to View. The core class of view animation is android/view/Animation/animation, which is an abstract class and has five sub-classes: AlphaAnimation, TranslateAnimation, RotateAnimation, ScaleAnimation, and AnimationSet. AlphaAnimation allows the View to implement a transparency gradient effect, while TranslateAnimation allows the View to implement a translation animation effect. RotateAnimation allows the View to implement a rotation animation effect, and ScaleAnimation allows the View to implement a scaling animation effect, the AnimationSet allows you to combine multiple View animations and apply them to a View to achieve complex animation effects. Animation can be implemented by code or an XML file.

The following sample code is used to operate a TextView. The corresponding layout file is as follows:

Note: The following sections cover various coordinate systems. Here we will first provide a basic knowledge. The coordinate systems mentioned below are the horizontal right of the X axis and the vertical downward of the Y axis.

AlphaAnimation

AlphaAnimation allows the View to achieve a gradient of transparency. The usage is as follows:

// 1.0 indicates full opacity, and 0.0 indicates full transparency float fromAlpha = 1.0f; float toAlpha = 0.0f; // 1.0 => 0.0 indicates that the View changes from completely opaque to completely transparent Animation animation = new AlphaAnimation (fromAlpha, toAlpha); // sets the animation duration to 3000 milliseconds. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

The above code is explained below:

The signature of the AlphaAnimation constructor method is <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwcmUgY2xhc3M9 "brush: java;"> public AlphaAnimation (float fromAlpha, float toAlpha)

FromAlpha indicates the transparency alpha value of the View at the animation start, and toAlpha indicates the transparency alpha value of the View at the animation end. In the above Code, we set fromAlpha to 1.0, indicating that the TextView is completely opaque at the start of the animation, that is, completely visible; Set toAlpha to 0.0, indicating that the TextView is completely transparent at the end of the animation, that is, it is completely invisible. This achieves the gradient effect of transparency from full visibility to completely invisible in TextView.

We also use the setDuration method of Animation to set the Animation duration, in milliseconds. In the above Code, we set the Animation duration to 3000 milliseconds, that is, three seconds.

Finally, we call the startAnimation method of View to bind the animation to TextView and start the animation effect immediately.

From this we can see that the use of view animation is actually relatively simple, the basic process is:

Create an instance of a subclass of Animation. Set the Animation duration using the setDuration method of Animation and start the Animation using the startAnimation method of View.

When using other view animations, the process is basically the same as above, but the parameters passed in by the constructors of the first animation are different.

As mentioned above, in addition to code creation, you can also use XML files to define animations. We can use the following XML file to define the above animations:

The XML file defining the view animation is placed in the res/anim folder. Here, I set the animation file name to alpha. xml, as shown in:

Then, we can use the AnimationUtils. loadAnimation () method to obtain an Animation object based on the XML resource file, as shown below:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);textView.startAnimation(animation);

When we need to change the animation effect parameters, we only need to update the animation XML file without changing the code, therefore, defining an animation with an XML file is easier to maintain than generating an animation object with code. However, in some cases, the animation creation parameters may be dynamically determined at runtime, so we cannot define the animation using XML, and we can only use code to create the animation object. In the subsequent articles, most animations provide corresponding XML file definitions.

TranslateAnimation

TranslateAnimation allows the View to implement the pan animation effect.
TranslateAnimation has two common constructors:

public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)public TranslateAnimation (int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

We will study the two constructors respectively.

Public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
The constructor is used as follows:

Int fromXDelta = 0; int toXDelta = getResources (). getDisplayMetrics (). widthPixels/2; int fromYDelta = 0; int toYDelta = 0; // enables the Animation to translate toXDelta pixels on the X axis at the horizontal position. animation Animation = new TranslateAnimation (fromXDelta, toXDelta, fromYDelta, toYDelta); // sets the animation duration to 3000 milliseconds. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:
Seo8L3A + Environment + tq + Environment/K1xMar0sbX + Environment + tq + 7rb + Environment/K1xMar0sbX + Environment/ytcTGq9LG1/environment/K/cDvw + Environment/gttTX LHqxqvSxrfWwb + jrNXiwO/L + release/release + HU2lnW4be9z/release + release/K/cC0y7W4/release/Cy/release = "brush: java; ">// Set fromXint fromXType = Animation. ABSOLUTE; float fromXValue = textView. getX (); // set toXint toXType = Animation. RELATIVE_TO_PARENT; float toXValue = 0.5f; // you can specify fromYint fromYType = Animation. ABSOLUTE; float fromYValue = textView. getY (); // set toYint toYType = Animation. RELATIVE_TO_SELF; float toYValue = 3.0f; // create an Animation animation Animation = new TranslateAnimation (fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue ); // set the animation duration to 3000 Ms animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

The above code is described below:

The constructor has eight parameters, which can be divided into four groups. (fromXType and fromXValue) determine the X coordinates of the View at the beginning of the animation, (toXType and toXValue) determines the X coordinate of the View when the animation ends, (fromYType, fromYValue) determines the Y coordinate of the View when the animation starts, (toYType, toYValue) determines the Y coordinate of the View when the animation ends. These four sets of parameters completely define the coordinates of the View at the beginning and end of the translation animation.

Since the values of these four sets of parameters are similar, we mainly study one of them. We use fromXType and fromXValue to describe it. The value type of fromXType determines how to set the value of fromXValue. FromXType has three values: ABSOLUTE, RELATIVE_TO_PARENT, and RELATIVE_TO_SELF.

ABSOLUTE
When fromXType is set to ABSOLUTE, it indicates that the fromXValue value is the ABSOLUTE value of the coordinate system of the parent control of the View. For example, if fromXValue is 200, it indicates that the animation starts, the distance from the left side of the View to the left side of its parent control is 200 pixels.

RELATIVE_TO_PARENT
When fromXType is set to RELATIVE_TO_PARENT, it indicates that the fromXValue value is the percentage of its size relative to its parent control. For example, if fromXValue is 0, it indicates that the left side of the View is close to the left side of the parent control when the animation starts. If fromXValue is 0.5, it indicates that the animation starts, the left-side position of the View is in the middle of the horizontal direction of the parent control. If fromXValue is 1, the left-side position of the View completely overlaps with the right-side position of the parent control when the animation starts.

RELATIVE_TO_SELF
When fromXType is set to RELATIVE_TO_SELF, it indicates that the value of fromXValue is relative to its own size. For example, if fromXValue is 0, it indicates that the X coordinate of the View is the same as the X coordinate of the initial position when the animation starts. If fromXValue is 0.5, it indicates that the animation starts, the left position of the View is in the middle of the horizontal direction in the initial View State, that is, half of the View width is shifted to the right. When fromXValue is 1, it indicates that when the animation starts, the left position of the View exactly matches the right position in the initial View State, that is, the right offset is the distance of the View width.

With the above theoretical basis, let's take a look at our above code.

Set fromX

int fromXType = Animation.ABSOLUTE;float fromXValue = textView.getX();

We set fromXType to ABSOLUTE, and then set the value of fromXValue to textView. getX () indicates that at the beginning of the animation, the X coordinate of TextView is the same as that of TextView in the initial state.

Set toX

int toXType = Animation.RELATIVE_TO_PARENT;float toXValue = 0.5f;

We set toXType to RELATIVE_TO_PARENT and toXValue to 0.5, indicating that when the animation ends, the left side of TextView will be in the Horizontal center of its parent control RelativeLayout.

Set fromY

int fromYType = Animation.ABSOLUTE;float fromYValue = textView.getY();

Set fromYType to ABSOLUTE and fromYValue to textView. getY (). This means that at the beginning of the animation, the Y coordinate of TextView is the same as that of TextView in the initial state.

Set toY

int toYType = Animation.RELATIVE_TO_SELF;float toYValue = 3.0f;

We set toYType to RELATIVE_TO_SELF and toYValue to 3, which means that when the animation ends, the Y coordinate of TextView will be three times its height.

The fromX and toX parameters we set will move TextView to the right in the X horizontal direction. fromY and toY parameters will move TextView down in the Y vertical direction, you can take a closer look at the above dynamic diagram.

The XML file corresponding to the above animation is as follows:

The fromXDelta, toXDelta, fromYDelta, and toYDelta parameters in the preceding XML file are float parameters. These parameters can end with % or % p, it can also have no additional ending.

No end
Both fromXDelta and fromYDelta are a simple float value, with no additional ending. This value indicates that the corresponding type of the value is Animation. ABSOLUTE, that is, the ABSOLUTE value, that isandroid:fromXDelta=0It is equivalent to the following code:

int fromXType = Animation.ABSOLUTE; float fromXValue = 0；

End with % p
The toXDelta value is 50% p and ends with % p. Here, p is the abbreviation of Parent, indicating that the value type is Animation. RELATIVE_TO_PARENT, that is, the value represents 50% of the width relative to its Parent control,android:toXDelta=50%pIt is equivalent to the following code:

int toXType = Animation.RELATIVE_TO_PARENT;float toXValue = 0.5f;

End with %
The value of toYDelta is 300% and ends with %. Here, % is relative to the control, that is, the value type is Animation. RELATIVE_TO_SELF,android:toYDelta=300%It is equivalent to the following code:

int toYType = Animation.RELATIVE_TO_SELF;float toYValue = 3.0f;

RotateAnimation

RotateAnimation allows the View to rotate the animation in the XY plane.
RotateAnimation has three common constructors:

public RotateAnimation (float fromDegrees, float toDegrees)public RotateAnimation (float fromDegrees, float toDegrees, float pivotX, float pivotY)public RotateAnimation (float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

Rotating an animation requires two types of parameters: the rotation axis of the animation and the rotation angle of the animation. The main difference between the three constructors of RotateAnimation is that the parameters for determining the animation rotation axis are different. Let's take a look at them.

Public RotateAnimation (float fromDegrees, float toDegrees)
This constructor only needs to input the rotation angle at the beginning of the animation and the rotation angle at the end of the animation. The difference between toDegrees and fromDegrees is the rotation angle, and no additional parameter is required to set the rotation axis. In this case, the rotation axis of the animation is the point in the upper left corner of the View. The constructor is used as follows:

// Create an Animation with a rotation of 60 degrees (0, 60) based on the rotation axis in the upper left corner of the View. // set the animation duration to animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

As we can see, TextView rotates 60 degrees clockwise with the rotation axis in the upper left corner.

The XML file corresponding to the above animation is as follows:

Public RotateAnimation (float fromDegrees, float toDegrees, float between Tx, float between ty)
In many cases, using the upper-left corner of the View as the axis of rotation cannot meet the actual needs, we can use this constructor to input the coordinates of the axis of rotation (except Tx, except ty ). It must be noted that the coordinates (TX, Ty) here refer to the coordinates in the Local Coordinate System of the View itself. The local coordinate system of the View itself is the coordinate system with the top left corner of the View as the coordinate origin. The constructor is used as follows:

// Use the center point of the View as the axis of rotation to create an animation float rotate Tx = textView with 60 degrees of rotation. getWidth ()/2; float interval ty = textView. getHeight ()/2; Animation animation = new RotateAnimation (0, 90, faster Tx, faster ty); // set the animation duration to Animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

In the code above, we use half of the TextView length as the rotate TX of the axis of rotation, and half of the TextView height as the rotate ty of the axis of rotation, in this way, TextView rotates 90 degrees clockwise as its center point.

Assume that the width and height returned by getWidth () and getHeight () of TextView are 200 pixels and 100 pixels respectively, the XML file corresponding to the above animation is as follows:

In this example, the setting rules for the Tx and Ty parameters in the XML file are the same as those for the fromXDelta parameters in the XML file of the Translate animation. In the XML file, the values of TX and ty are simple float, indicating that the value type is Animation. ABSOLUTE. In fact, if we set both the Tx and Ty values to 50%, we can also rotate them at the center of TextView. the type of the value ending with % is Animation. RELATIVE_TO_SELF, 50% indicates the center point relative to TextView itself.

Public RotateAnimation (float fromDegrees, float toDegrees, int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue)

This constructor is the most flexible method. Optional values: ABSOLUTE, RELATIVE_TO_SELF, and RELATIVE_TO_PARENT. The optional values determine the values of the corresponding Optional txvalue and polictyvalue. The value rules of the Axis coordinate in the constructor are exactly the same as those in the last constructor of TranslateAnimation described above. Here is a sample code:

// Use the center point of the parent control of the View as the axis of rotation to create an Animation int degree txtype = Animation. RELATIVE_TO_PARENT; float effectxvalue = 0.5f; int effectytype = Animation. RELATIVE_TO_PARENT; float inclutyvalue = 0.5f; Animation animation = new RotateAnimation (0,360, effectxtype, effectxvalue, effectytype, and effectyvalue); // set the animation duration to Animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

Above, we set the values of both txtype and polictytype to RELATIVE_TO_PARENT, and then set both txvalue and polictyvalue to 0.5, in this way, the rotation animation of TextView rotates 360 degrees as the center point of its parent control RelativeLayout.

The XML file corresponding to the above animation is as follows:

In this example, the setting rules for the Tx and Ty parameters in the XML file are the same as those for the fromXDelta parameters in the XML file of the Translate animation. Both Tx and Ty values end with % p, indicating that the value type is Animation. RELATIVE_TO_PARENT. 50% p indicates the center relative to the parent control.

ScaleAnimation

ScaleAnimation allows a View to be scaled and animated. It has three common constructor functions:

public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY)public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, float pivotX, float pivotY)public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

ScaleAnimation requires two types of parameters: zooming the animation center and zooming the XY in both directions. View scales according to the specified scaling ratio based on the animation's scaling center. The main difference between the three constructors of ScaleAnimation is to determine the scaling center of an animation.

Public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY)

This constructor only needs to pass in the scaling ratio of the animation start and end on the X and Y axes of the View. fromXScale and toScaleX indicate the scaling ratio of the X axis at the animation start and end, respectively, fromYScale and toScaleY indicate the scale ratio of the Y axis at the animation start and end. You do not need to input parameters to set the scaling center of the animation. In this case, the zoom center of the animation is the top left corner of the View. The constructor is used as follows:

// Use the upper left corner of the View as the zoom center. The horizontal direction is doubled, and the vertical direction is reduced to half of the original float fromXScale = 1.0f; float toScaleX = 2.0f; float fromYScale = 1.0f; float toScaleY = 0.5f; Animation animation = new ScaleAnimation (fromXScale, toScaleX, fromYScale, toScaleY); // sets the animation duration. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

As shown in, TextView uses the top-left vertex as the zoom center. It doubles in the X axis and reduces in the Y axis to half of the original size.

The XML file corresponding to the above animation is as follows:

Public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, float between Tx, float between ty)

In many cases, using the upper-left corner of the View as the zoom center cannot meet the actual needs, we can use this constructor to input the coordinates of the animation zoom Center (pivotX, pivotY ). It must be noted that the coordinates (TX, Ty) here refer to the coordinates in the Local Coordinate System of the View itself. The local coordinate system of the View itself is the coordinate system with the top left corner of the View as the coordinate origin. The constructor is used as follows:

// Use the View center as the zoom center. Both the horizontal and vertical directions are reduced to half of the original float fromXScale = 1.0f; float toScaleX = 0.5f; float fromYScale = 1.0f; float toScaleY = 0.5f; float upload Tx = textView. getWidth ()/2; float interval ty = textView. getHeight ()/2; Animation animation = new ScaleAnimation (fromXScale, toScaleX, fromYScale, toScaleY, TX, and Ty); // set the animation duration to Animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The interface is as follows:

In the above Code, we use the center point of TextView as the animation's Zoom center, as shown in. TextView is based on this zoom center, which is halved in both the horizontal and vertical directions.

Assume that the width and height returned by getWidth () and getHeight () of TextView are 200 pixels and 100 pixels respectively, the XML file corresponding to the above animation is as follows:

In this example, the setting rules for the Tx and Ty parameters in the XML file are the same as those for the fromXDelta parameters in the XML file of the Translate animation. In the XML file, the values of TX and ty are simple float, indicating that the value type is Animation. ABSOLUTE. In fact, if you set both the Tx and Ty values to 50%, the TextView center can also be scaled. For details, see the following.

Public ScaleAnimation (float fromXScale, float toScaleX, float fromYScale, float toScaleY, int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue)

This constructor is the most flexible method. Optional values: ABSOLUTE, RELATIVE_TO_SELF, and RELATIVE_TO_PARENT. The optional values determine the values of the corresponding Optional txvalue and polictyvalue. The value rules of the Axis coordinate in the constructor are exactly the same as those in the last constructor of TranslateAnimation described above. Here is a sample code:

// Use the View center as the zoom center. Both the horizontal and vertical directions are reduced to half of the original float fromXScale = 1.0f; float toScaleX = 0.5f; float fromYScale = 1.0f; float toScaleY = 0.5f; int required txtype = Animation. RELATIVE_TO_SELF; float effectxvalue = 0.5f; int effectytype = Animation. gradient; float equaltyvalue = 0.5f; Animation animation = new ScaleAnimation (fromXScale, toScaleX, fromYScale, toScaleY, effectxtype, effectxvalue, effectytype, and effectyvalue); // set the animation duration to Animation. setDuration (3000); // use the startAnimation method of the View to apply the animation to textView on The View immediately. startAnimation (animation );

The effect of the above Code implementation is exactly the same as that of the code implementation provided in the second constructor, except that the optional txtype and the specific tytype are set this time and their values are set to RELATIVE_TO_SELF, both txvalue and tyvalue are set to 0.5. In this way, the center of TextView is set to the zoom center of the animation. For the effect, see in the second constructor.

The XML file corresponding to the above animation is as follows:

The type of the value ending with % is Animation. RELATIVE_TO_SELF. In this example, both Tx and Ty values are 50%, indicating scaling relative to the center of TextView. If it ends with % p, the value type is Animation. RELATIVE_TO_PARENT.