Frame animation is to simulate the animation effect by continuously playing pictures, and the developer of tween animation only needs to specify the animation start and animation end "key frame", and the "intermediate frame" of animation change is calculated and completed by the system!
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 change speed 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
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 : starting transparency toAlpha : ending 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="透明度渐变" />
<Button
android:id="@+id/btn_scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放渐变" />
<Button
android:id="@+id/btn_tran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="位移渐变" />
<Button
android:id="@+id/btn_rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转渐变" />
<Button
android:id="@+id/btn_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="组合渐变" />
<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 :
It's a bit interesting, don't try it yourself, change something, or freely combine animations to make cool effects.
at last
If you want to become an architect or want to break through the 20-30K salary range, then don't be limited to coding and business, but you must be able to select models, expand, and improve programming thinking. In addition, a good career plan is also very important, and the habit of learning is very important, but the most important thing is to be able to persevere. Any plan that cannot be implemented consistently is empty talk.
If you have no direction, here I would like to share with you a set of "Advanced Notes on the Eight Major Modules of Android" written by the senior architect of Ali, to help you organize the messy, scattered and fragmented knowledge systematically, so that you can systematically and efficiently Master the various knowledge points of Android development.
Compared with the fragmented content we usually read, the knowledge points of this note are more systematic, easier to understand and remember, and are arranged strictly according to the knowledge system.
Full set of video materials:
1. Interview collection
2. Source code analysis collection
3. The collection of open source frameworks
welcomes everyone to support with one click and three links. If you need the information in the article, directly scan the CSDN official certification WeChat card at the end of the article to get it for free↓↓↓
