The blogger in the previous section introduced the use of AlphaAnimation and fade-in animation, which is actually just one of the four complementary animations.So in order to further understand the other interpolation animations, I would like to say that the use of Rotate Animation, which happens to work in a similar application scenario, is just described.Like there are many pictures in our life that swing from left to right, such as the pendulum of an old-fashioned pendulum swinging around a vertical axis, or people in the park swinging around on a swing, so think, well, this swing animation is really close to life.


If we think of a pendulum or swing as a line segment, with the end point above it as the center, we first rotate to the left from a vertical downward angle; turn to an angle, then rotate to the right, and rotate to the same height to the left; then rotate to the left, and wait until the segment swings to a vertical downward direction, a cycle of swinging is completed.In this way, the swing animation seems to have something to do with the rotation animation. Think carefully, this swing animation is actually connected by three rotating animations. First rotate 60 degrees to the left, then rotate 120 degrees to the right, and finally rotate 60 degrees to the left.So see if you can find ideas from the RotateAnimation source.


Analyzing the source code of RotateAnimation, we see that RotateAnimation inherits from Animation, and apart from several constructors and initializers, the applyTransformation function plays a major role.

1. protected void applyTransformation(float interpolatedTime, Transformation t) {  
2.     float degrees = mFromDegrees + ((mToDegrees - mFromDegrees) * interpolatedTime);  
3.     float scale = getScaleFactor();  
4.       
5.     if (mPivotX == 0.0f && mPivotY == 0.0f) {  
6.         t.getMatrix().setRotate(degrees);  
7.     } else {  
8.         t.getMatrix().setRotate(degrees, mPivotX * scale, mPivotY * scale);  
9.     }  
10. }  

The input parameter to the function, interpolatedTime, represents the interpolation time (percentage), and the degrees inside the code represent the degrees of the position at the interpolation time, regardless of scale default 1.mFromDegrees denotes the starting degree of the animation, and mToDegrees denotes the ending degree of the animation, which are parameters passed in at initialization.The mPivotX and mPivotY in the latter code are the first X-coordinate representing the center of rotation, and the second Y-coordinate representing the center of rotation. By default, the top left vertex of the graphic is the center (mPivotX=0.0f, mPivotY=0.0f).If it is not the default center, rotate it using the specified coordinates as the center.


From this point of view, there are several places to adjust the swing animation:
1. There are only two degrees when the rotation animation is initialized: the starting degree and the ending degree.The swing animation takes three parameters: the middle degree (both start and end), the degree to the left, and the degree to the right.
2. Estimating the current degree based on the interpolation time, the rocking animation needs to make three branch judgments (corresponding to the previously mentioned rocking animation is made up of three rotating animations).If the whole animation lasts for 4 seconds, then the animation is rotated to the left between 0-1 seconds, with the starting degree being intermediate and the ending degree being degrees to the left; the animation is rotated to the right between 1-3 seconds, with the starting degree being degrees to the left and the ending degree being degrees to the right; the animation is rotated to the left between 3-4 seconds, with the starting degree being degrees to the right and the ending degree being degrees.Number is in the middle.


Finished analysis, Paste Modified rocking animation code

1. import android.view.animation.Animation;  
2. import android.view.animation.Transformation;  
3.   
4. public class SwingAnimation extends Animation {  
5.     private float mMiddleDegrees;  
6.     private float mLeftDegrees;  
7.     private float mRightDegrees;  
8.     private int mPivotXType = ABSOLUTE;  
9.     private int mPivotYType = ABSOLUTE;  
10.     private float mPivotXValue = 0.0f;  
11.     private float mPivotYValue = 0.0f;  
12.     private float mPivotX;  
13.     private float mPivotY;  
14.   
15.     public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees) {  
16.         mMiddleDegrees = middleDegrees;  
17.         mLeftDegrees = leftDegrees;  
18.         mRightDegrees = rightDegrees;  
19.         mPivotX = 0.0f;  
20.         mPivotY = 0.0f;  
21.     }  
22.   
23.     public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees, float pivotX, float pivotY) {  
24.         mMiddleDegrees = middleDegrees;  
25.         mLeftDegrees = leftDegrees;  
26.         mRightDegrees = rightDegrees;  
27.         mPivotXType = ABSOLUTE;  
28.         mPivotYType = ABSOLUTE;  
29.         mPivotXValue = pivotX;  
30.         mPivotYValue = pivotY;  
31.         initializePivotPoint();  
32.     }  
33.   
34.     public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees, int pivotXType, float pivotXValue,  
35.             int pivotYType, float pivotYValue) {  
36.         mMiddleDegrees = middleDegrees;  
37.         mLeftDegrees = leftDegrees;  
38.         mRightDegrees = rightDegrees;  
39.         mPivotXValue = pivotXValue;  
40.         mPivotXType = pivotXType;  
41.         mPivotYValue = pivotYValue;  
42.         mPivotYType = pivotYType;  
43.         initializePivotPoint();  
44.     }  
45.   
46.     private void initializePivotPoint() {  
47.         if (mPivotXType == ABSOLUTE) {  
48.             mPivotX = mPivotXValue;  
49.         }  
50.         if (mPivotYType == ABSOLUTE) {  
51.             mPivotY = mPivotYValue;  
52.         }  
53.     }  
54.   
55.     @Override  
56.     protected void applyTransformation(float interpolatedTime, Transformation t) {  
57.         float degrees;  
58.         float leftPos = (float) (1.0/4.0);  
59.         float rightPos = (float) (3.0/4.0);  
60.         if (interpolatedTime <= leftPos) {  
61.             degrees = mMiddleDegrees + ((mLeftDegrees - mMiddleDegrees) * interpolatedTime * 4);  
62.         } else if (interpolatedTime > leftPos && interpolatedTime < rightPos) {  
63.             degrees = mLeftDegrees + ((mRightDegrees - mLeftDegrees) * (interpolatedTime-leftPos) * 2);  
64.         } else {  
65.             degrees = mRightDegrees + ((mMiddleDegrees - mRightDegrees) * (interpolatedTime-rightPos) * 4);  
66.         }  
67.         System.out.println("degrees="+degrees);  
68.           
69.         float scale = getScaleFactor();  
70.         if (mPivotX == 0.0f && mPivotY == 0.0f) {  
71.             t.getMatrix().setRotate(degrees);  
72.         } else {  
73.             t.getMatrix().setRotate(degrees, mPivotX * scale, mPivotY * scale);  
74.         }  
75.     }  
76.       
77.     @Override  
78.     public void initialize(int width, int height, int parentWidth, int parentHeight) {  
79.         super.initialize(width, height, parentWidth, parentHeight);  
80.         mPivotX = resolveSize(mPivotXType, mPivotXValue, width, parentWidth);  
81.         mPivotY = resolveSize(mPivotYType, mPivotYValue, height, parentHeight);  
82.     }  
83. }  

The code called is as follows

1. import com.example.exmswing.ui.SwingAnimation;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;  
7. import android.view.animation.Animation;  
8. import android.widget.Button;  
9. import android.widget.ImageView;  
10.   
11. public class MainActivity extends Activity implements OnClickListener {  
12.   
13.     private ImageView iv_swing;  
14.     private SwingAnimation swingAnimation;  
15.       
16.     @Override  
17.     protected void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.   
21.         Button btn_play = (Button) findViewById(R.id.btn_play);  
22.         btn_play.setOnClickListener(this);  
23.         iv_swing = (ImageView) findViewById(R.id.iv_swing);  
24.         //Parameter Value Description: Middle Degree, Left Degree, Right Degree, Centroid X Coordinate Type, Centroid X Coordinate Relative Scale, Centroid Y Coordinate Type, Centroid Y Coordinate Relative Scale  
25.         //There are three types of coordinates: ABSOLUTE absolute coordinates, RELATIVE_TO_SELF relative to its own coordinates, RELATIVE_TO_PARENT relative to the coordinates of the parent view  
26.         //Relative ratio of X coordinates, 0 for left vertex, 1 for right vertex, 0.5 for horizontal center point  
27.         //The relative proportion of Y coordinates, where 0 is the top vertex, 1 is the bottom vertex, and 0.5 is the vertical center point  
28.         swingAnimation = new SwingAnimation(  
29.                 0f, 60f, -60f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f);   
30.         swingAnimation.setDuration(4000);     //Animation Duration  
31.         swingAnimation.setRepeatCount(0);     //Number of Animation Replays  
32.         swingAnimation.setFillAfter(false);  //Whether to keep the end animation  
33.         swingAnimation.setStartOffset(500);   //Animation playback delay  
34.     }  
35.   
36.     @Override  
37.     public void onClick(View v) {  
38.         if (v.getId() == R.id.btn_play) {  
39.             iv_swing.startAnimation(swingAnimation);  
40.         }  
41.     }  
42.   
43. }  

Below is the effect of the swing animation

Click to download the swing animation code used in this article

Click here to see the full catalog of Android Development Notes