preface
I wanted to write Android animation for a long time before, and recently I had time to talk about Android animation.
- Android Custom View directory
I’m used to dividing animation into: tween animation (transparency, rotation, displacement, zoom), frame animation, and property animation. In this article, we first talk about tween animation. The word “tween animation” comes from Flash. It is required to do “tween animation” between two key frames (which can be understood as the beginning and end of animation) to realize the motion of the picture. The interpolation frame between two key frames after inserting tween animation is obtained by computer automatic operation.
In fact, Android tween animation is also defined by us to start animation, animation end two key points, the middle part of the animation completed by the system
Coordinate system
If the screen is 1080*1980, then the top left corner is (0,0), the top right corner is (1080,0), the bottom left corner is (0,1980), and the bottom right corner is (1080,1980).
Public attribute
All animations have the following common properties, which are annotated in more detail and will not be detailed here
// Animation duration
scaleAnimation.setDuration(2000);
// If set to true, control animation ends in the same state as when the animation ended
scaleAnimation.setFillAfter(true);
// If set to true, the control is restored to the state before the animation began when the animation ends
scaleAnimation.setFillBefore(false);
// Number of repetitions
scaleAnimation.setRepeatCount(2);
// Repeat type, both reverse and restart values. Reverse indicates reverse playback, and restart indicates repeatCount
scaleAnimation.setRepeatMode(Animation.RESTART);
Copy the codeScaleAnimation
There are three constructors of ScaleAnimation
public ScaleAnimation(float fromX, float toX, float fromY, float toY) {}public ScaleAnimation(float fromX, float toX, float fromY, float toY,
float pivotX, float pivotY) {}public ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {}Copy the codeLet’s look at the first one, which starts at 0 and has a zoom of 1.4, or 1.4 times
//fromXScale specifies the initial X scale relative to itself. Floating point values, such as 1.0, 0.5, and 2.0, indicate that it has not changed, 0.5, and 2.0 respectively.
// The X scale of the toXScale end relative to itself, floating point;
//fromYScale is the Y scale relative to itself, a floating point value
//toYScale ends with the Y scale relative to itself, a floating point value
scaleAnimation = new ScaleAnimation(0.1.4 f.0.1.4 f);
// Animation duration
scaleAnimation.setDuration(2000);
tvDemo.startAnimation(scaleAnimation);
Copy the codeThe effect is as follows:
// PivotX,pivotY animation starting position +100
scaleAnimation = new ScaleAnimation(0.1.4 f.0.1.4 f.100.100);
scaleAnimation.setDuration(2000);
tvDemo.startAnimation(scaleAnimation);
Copy the codeThe effect is as follows:
Third, pivotXType and pivotYType have two modes: RELATIVE_TO_SELF (relative to itself) and RELATIVE_TO_PARENT (relative to the parent layout). If this is set, the pivotX,pivotY values should be 0-1 floating-point values. This corresponds to % (itself) and %p (parent layout) in XML, respectively
- 1. Set it to RELATIVE_TO_SELF
// If it is 50% (code 0.5), add 50% of your width to the upper left corner of the current control as the starting point
scaleAnimation = new ScaleAnimation(0.1.4 f.0.1.4 f, ScaleAnimation.RELATIVE_TO_SELF,
0.5 f, ScaleAnimation.RELATIVE_TO_SELF, 0.5 f);
scaleAnimation.setDuration(2000);
tvDemo.startAnimation(scaleAnimation);
Copy the code
- 2. Set it to RELATIVE_TO_PARENT
// If it is 50%p (code 0.5), it means that the starting x-coordinate is 50% of the width of the parent control in the upper left corner.
scaleAnimation = new ScaleAnimation(0.1.4 f.0.1.4 f, ScaleAnimation.RELATIVE_TO_PARENT,
0.5 f, ScaleAnimation.RELATIVE_TO_PARENT, 0.5 f);
scaleAnimation.setDuration(2000);
tvDemo.startAnimation(scaleAnimation);
Copy the code
TranslateAnimation
TranslateAnimation has two constructors, similar to ScaleAnimation
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) {}Copy the code- 1. FromXDelta is the X-axis coordinates of the starting point; FromYDelta is the starting point Y axis slave; ToXDelta is the X-axis coordinates of the end point; ToYDelta is the Y-axis coordinates of the end point
//fromXDelta starting point X coordinates, can be numeric, percentage, percentage p three styles, the same scale
// The fromYDelta starting point on the Y axis can be a number, percentage, or percentage P
//toXDelta end point X coordinates
//toYDelta end point Y coordinates
translateAnimation = new TranslateAnimation(0.100.0.100);
translateAnimation.setDuration(2000);
tvDemo.startAnimation(translateAnimation);
Copy the codeThe effect is as follows:
- FromYType and toYType are the same as ScaleAnimation. Look at RELATIVE_TO_SELF
translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5 f,
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5 f);
translateAnimation.setDuration(2000);
tvDemo.startAnimation(translateAnimation);
Copy the codeThe effect is as follows:
translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5 f,
TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5 f);
translateAnimation.setDuration(2000);
tvDemo.startAnimation(translateAnimation);
Copy the codeThe effect is as follows:
RotateAnimation
RotateAnimation can be constructed in three ways
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) {}Copy the code- 1. FromDegrees is the starting rotation Angle, positive value represents the clockwise rotation degree, negative value indicates the counterclockwise rotation degree, toDegrees is the end rotation Angle, the same as fromDegrees
720 degrees clockwise
rotateAnimation = new RotateAnimation(0.720.0.0);
rotateAnimation.setDuration(2000);
tvDemo.startAnimation(rotateAnimation);
Copy the codeThe effect is as follows:
Counterclockwise 720 degrees
rotateAnimation = new RotateAnimation(0, -720.0.0);
rotateAnimation.setDuration(2000);
tvDemo.startAnimation(rotateAnimation);
Copy the codeThe effect is as follows:
- 2. PivotXType, pivotYType, and ScaleAnimation. Look at RELATIVE_TO_SELF
rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5 f,
RotateAnimation.RELATIVE_TO_SELF, 0.5 f);
rotateAnimation.setDuration(2000);
tvDemo.startAnimation(rotateAnimation);
Copy the codeThe effect is as follows:
rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_PARENT, 0.5 f,
RotateAnimation.RELATIVE_TO_PARENT, 0.5 f);
rotateAnimation.setDuration(2000);
tvDemo.startAnimation(rotateAnimation);
Copy the codeThe effect is as follows:
What the hell is this?? How did it get out of the screen? When we set it to RELATIVE_TO_PARENT, the x direction should be the margin from the space to the left + the width of the parent layout /2, and the y direction should be the same. The red Textview in our layout is centered, so the rotation center is in the bottom right corner of the screen. Let’s look at an example to modify the layout as follows:
<TextView
android:id="@+id/tv_demo"
android:layout_width="10dp"
android:layout_height="160dp"
android:layout_marginLeft="100dp"
app:layout_constraintLeft_toLeftOf="parent"
android:background="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginLeft="100dp"
android:background="@color/colorAccent"
app:layout_constraintLeft_toLeftOf="parent" />
Copy the code rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_PARENT, 0f,
RotateAnimation.RELATIVE_TO_PARENT, 0.5 f);
rotateAnimation.setDuration(2000);
tvDemo.startAnimation(rotateAnimation);
Copy the codeThe effect is as follows:
AlphaAnimation
AlphaAnimation has only one constructor
public AlphaAnimation(float fromAlpha, float toAlpha) {}Copy the codeWhere fromAlpha is the transparency at the beginning of animation; ToAlpha is the transparency at the end of the animation
FromAlpha animation starts with transparency ranging from 0.0 to 1.0, with 0.0 being fully transparent and 1.0 being completely opaque
// The opacity at the end of the toAlpha animation also ranges from 0.0 to 1.0, with 0.0 being fully transparent and 1.0 being completely opaque
alphaAnimation = new AlphaAnimation(0.1);
alphaAnimation.setDuration(2000);
tvDemo.startAnimation(alphaAnimation);
Copy the codeThe effect is as follows:
alphaAnimation = new AlphaAnimation(1.0);
alphaAnimation.setDuration(2000);
tvDemo.startAnimation(alphaAnimation);
Copy the codeThe effect is as follows:
AnimationSet
An AnimationSet is a collection of animations that can be played in the order they are added. Let’s look at an example of a rotating fade in animation by combining animations
rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5 f,
RotateAnimation.RELATIVE_TO_SELF, 0.5 f);
rotateAnimation.setDuration(2000);
translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5 f,
TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5 f);
translateAnimation.setDuration(2000);
scaleAnimation = new ScaleAnimation(0.1.4 f.0.1.4 f, ScaleAnimation.RELATIVE_TO_SELF,
0.5 f, ScaleAnimation.RELATIVE_TO_SELF, 0.5 f);
scaleAnimation.setDuration(2000);
alphaAnimation = new AlphaAnimation(0.1);
alphaAnimation.setDuration(2000);
animationSet = new AnimationSet(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(4000);
animationSet.setFillAfter(true);
tvDemo.startAnimation(animationSet);
Copy the codeThe effect is as follows:
conclusion
This concludes the introduction of tween animation
Finally, present the source codegithub
Resources: Animation in the Custom controls trilogy