Introduction to this section:
This section brings the second of the three Android animations - tween animation (Tween), which is different from the frame animation learned earlier. The frame animation simulates the animation effect by continuously playing pictures, and the tween animation developer You only need to specify the animation start and animation end "key frames", and the "intermediate frame" of animation changes will be calculated and filled by the system! Ok, let's start this section of study~
1. Classification of tween animation and Interpolator
The tween animation effects supported by Andoird are the following five, or four, and the fifth is a combination of the previous ones~
- AlphaAnimation: transparency gradient effect, specify the start and end transparency when creating, as well as the duration of the animation, the range of transparency (0,1), 0 is completely transparent, 1 is completely opaque; corresponding to the < alpha /> tag !
- ScaleAnimation : Scale gradient effect. When creating, you need to specify the start and end zoom ratios, as well as the zoom reference point, and the duration of the animation; corresponding to the < scale /> tag!
- TranslateAnimation : Displacement gradient effect, specify the start and end positions when creating, and specify the duration of the animation; corresponding to the < translate /> tag!
- RotateAnimation : Rotation gradient effect, when creating, specify the start and end rotation angles of the animation, as well as the duration of the animation and the axis of rotation; corresponding to the < rotate /> tag
- AnimationSet : Combined gradient, which is the combination of the previous gradients, corresponding to the < set /> tag
Before we start explaining the usage of various animations, we need to explain one thing: Interpolator
It is used to control the change speed of the animation, which can be understood as an animation renderer. Of course, we can also implement the Interpolator interface to control the change speed of the animation by ourselves. Android has provided us with five optional implementation classes:
- LinearInterpolator : the animation changes at a uniform rate
- AccelerateInterpolator : changes slowly at the beginning of the animation, then starts to accelerate
- AccelerateDecelerateInterpolator : The change speed is slower at the beginning and end of the animation, and accelerated in the middle
- CycleInterpolator : The animation loops for a specific number of times, and the speed of change changes according to a sinusoidal curve: Math.sin(2 * mCycles * Math.PI * input)
- DecelerateInterpolator : Changes faster at the beginning of the animation, then starts to slow down
- AnticipateInterpolator : Reverse, first change a section in the opposite direction and then accelerate playback
- AnticipateOvershootInterpolator : At the beginning, throw backwards and forwards a certain value and return the final value
- BounceInterpolator : Jump, the value will jump when it is close to the target value, such as the target value is 100, the following values may be 85, 77, 70, 80, 90, 100 in sequence
- OvershottInterpolator : rebound, finally exceed the target value and then slowly change to the target value
And this stuff, we usually use it when writing animation xml files, the attribute is: android:interpolator , and the corresponding value above is: @android:anim/linear_interpolator , in fact, it is the hump nomenclature changed to underscore AccelerateDecelerateInterpolator corresponds to: @android:anim/accelerate_decelerate_interpolator!
2. Detailed explanation of various animations
The android:duration here is the duration of the animation, in milliseconds~
1) AlphaAnimation (transparency gradient)
anim_alpha.xml：
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="2000"/>
Attribute explanation:
fromAlpha : start transparency
toAlpha : end transparency
The range of transparency is: 0-1, completely transparent - completely opaque
2) ScaleAnimation (scale gradient)
anim_scale.xml：
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="0.2"
android:toXScale="1.5"
android:fromYScale="0.2"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>
Attribute explanation:
- fromXScale / fromYScale : The starting ratio of scaling along the X-axis/Y-axis
- toXScale / toYScale : end scaling along the X-axis/Y-axis
- pivotX / pivotY : X/Y coordinates of the zoomed central axis point, that is, the position from the left edge of itself, for example, 50% is the center of the image as the central axis point
3) TranslateAnimation (displacement gradient)
anim_translate.xml：
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0"
android:toXDelta="320"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="2000"/>
Attribute explanation:
- fromXDelta / fromYDelta : X/Y coordinates of the animation start position
- toXDelta / toYDelta : X/Y coordinates of the animation end position
4) RotateAnimation (rotation gradient)
anim_rotate.xml：
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"/>
Attribute explanation:
- fromDegrees / toDegrees : start/end angle of rotation
- repeatCount : The number of rotations, the default value is 0, which means one time, if it is other values, such as 3, it will rotate 4 times. In addition, when the value is -1 or infinite, it means that the animation will never stop
- repeatMode : Set the repeat mode, the default is restart , but it is only valid when the repeatCount is greater than 0 or infinite or -1. It can also be set to reverse , which means that when the animation is displayed for an even number of times, it will move in the opposite direction!
5) AnimationSet (combined gradient)
It's very simple, it's just a combination of the previous animations~
anim_set.xml：
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true" >
<scale
android:duration="2000"
android:fromXScale="0.2"
android:fromYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<rotate
android:duration="1000"
android:fromDegrees="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360" />
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="320"
android:toYDelta="0" />
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
3. Write an example to experience
Okay, let's write an example with the animation written above, let us experience what a tween animation is: First, a simple layout: activity_main.xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="transparency gradient" />
<Button
android:id="@+id/btn_scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="zoom gradient" />
<Button
android:id="@+id/btn_tran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="displacement gradient" />
<Button
android:id="@+id/btn_rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rotating gradient" />
<Button
android:id="@+id/btn_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="combined gradient" />
<ImageView
android:id="@+id/img_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="48dp"
android:src="@mipmap/img_face" />
</LinearLayout>
Ok, then go to our MainActivity.java , which is also very simple, just call AnimationUtils.loadAnimation() to load the animation, and then our View control calls startAnimation to start the animation~
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Button btn_alpha;
private Button btn_scale;
private Button btn_tran;
private Button btn_rotate;
private Button btn_set;
private ImageView img_show;
private Animation animation = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
}
private void bindViews() {
btn_alpha = (Button) findViewById(R.id.btn_alpha);
btn_scale = (Button) findViewById(R.id.btn_scale);
btn_tran = (Button) findViewById(R.id.btn_tran);
btn_rotate = (Button) findViewById(R.id.btn_rotate);
btn_set = (Button) findViewById(R.id.btn_set);
img_show = (ImageView) findViewById(R.id.img_show);
btn_alpha.setOnClickListener(this);
btn_scale.setOnClickListener(this);
btn_tran.setOnClickListener(this);
btn_rotate.setOnClickListener(this);
btn_set.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_alpha:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_alpha);
img_show.startAnimation(animation);
break;
case R.id.btn_scale:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_scale);
img_show.startAnimation(animation);
break;
case R.id.btn_tran:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_translate);
img_show.startAnimation(animation);
break;
case R.id.btn_rotate:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_rotate);
img_show.startAnimation(animation);
break;
case R.id.btn_set:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_set);
img_show.startAnimation(animation);
break;
}
}
}
Running effect diagram :
Hey, it’s a bit interesting, don’t try it yourself, change something, or freely combine animations to make cool effects~
4. Monitoring of animation status
We can monitor the execution status of the animation and call the animation object:
- setAnimationListener(new AnimationListener()) method, rewrite the following three methods:
- onAnimationStart (): animation starts
- onAnimtaionRepeat (): animation repeats
- onAnimationEnd (): animation ends
The monitoring of the animation execution state can be completed~
5. Dynamically set animation effects for View
First call AnimationUtils.loadAnimation (animation xml file), and then the View control calls startAnimation(anim) to start animation~ This is the way of static loading. Of course, you can also directly create an animation object, complete the settings with Java code, and then call startAnimation to start the animation ~
6. Set transition animation for Fragment
One thing to note here is whether the Fragment is using the v4 package or the Fragment under the app package ! We can call the setTransition(int transit) of the FragmentTransaction object to specify a standard cutscene animation for the Fragment. The optional values of the transition are as follows:
- TRANSIT_NONE : no animation
- TRANSIT_FRAGMENT_OPEN : animation for opening form
- TRANSIT_FRAGMENT_CLOSE : close form animation
Both of the above standard process animations can be called, but the difference lies in custom transition animations
setCustomAnimations () method!
-
Fragment under the app package : setCustomAnimations(int enter, int exit, int popEnter, int popExit) are animations for adding, removing, stacking, and stacking respectively! Another thing to note is that the corresponding animation type is: property animation (Property), that is, if the root tag of the animation file is: < objectAnimator >, < valueAnimator > or the former two are placed in a < set >;
-
Fragment under the v4 package : The v4 package supports two kinds of setCustomAnimations()
Another thing to note is that the corresponding animation type is: tween animation (Tween), which is the same as the View above~
Maybe you will have doubts, how do you know the corresponding animation type, in fact, as long as you go to the Fragment source code to find:
A return value of the onCreateAnimation() method is known:
v4 package :
app package :
7. Set cutscenes for Activity
Activty setting cutscene animation is very simple, the calling method is: overridePendingTransition (int enterAnim, int exitAnim)
The usage is very simple: add after startActivity(intent) or finish()
The parameters are in order: the animation when the new Activity enters the scene , and the animation when the old Activity exits
Here are a few relatively simple and commonly used cutscenes for your use~
Download Portal: Common Transition Animations for Activity.zip
8. Write an example of an animation effect that pops up from the bottom of the login registration button after entering the APP:
Running effect diagram :
Code implementation :
First up is our layout file: activity_main.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DDE2E3"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/start_ctrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:visibility="gone">
<Button
android:id="@+id/start_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F26968"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="login"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<Button
android:id="@+id/start_register"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#323339"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="register"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
Next is MainActivity.java :
public class MainActivity extends AppCompatActivity {
private LinearLayout start_ctrl;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
start_ctrl = (LinearLayout) findViewById(R.id.start_ctrl);
//Set the animation, slide up from the bottom of its own position to its own height, and the duration is 500ms
final TranslateAnimation ctrlAnimation = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0,
TranslateAnimation.RELATIVE_TO_SELF, 1, TranslateAnimation.RELATIVE_TO_SELF, 0);
ctrlAnimation.setDuration(500l); //Set animation transition time
start_ctrl.postDelayed(new Runnable() {
@Override
public void run() {
start_ctrl.setVisibility(View.VISIBLE);
start_ctrl.startAnimation(ctrlAnimation);
}
}, 2000);
}
}
The comment is very clear, so I won’t explain it here. If you have doubts about TranslateAnimation.RELATIVE_TO_SELF, please Google or Baidu. Due to space limitations, I won’t write it here.