This is a Chinese to English translation, please provide the English translation for this text. Do not provide any explanations or text apart from the translation.

English: ## 8.4.2 Android Animation Collection - Tween Animation

Category Android Basic Tutorial

Introduction to This Section:

>

This section introduces the second of the three types of animations in Android - Tween Animation. Unlike the frame animation we learned earlier, which simulates animation effects by continuously playing images, developers only need to specify the "keyframes" of the start and end of the animation, and the "intermediate frames" of the animation changes are calculated and supplemented by the system! Alright, let's start learning this section~

1. Classification of Tween Animation and Interpolator

The five types of tween animation effects supported by Android, or four types, the fifth is just a combination of the previous ones~

>

-AlphaAnimation: Transparency gradient effect, when creating, specify the start and end transparency, as well as the duration of the animation, the range of transparency changes (0,1), 0 is completely transparent, 1 is completely opaque; corresponding to the <alpha /> tag!

-ScaleAnimation: Scaling gradient effect, when creating, specify the start and end scaling ratio, as well as the scaling reference point, and the duration of the animation; corresponding to the <scale /> tag!

-TranslateAnimation: Translation gradient effect, when creating, specify the start and end positions, 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 rotation axis; corresponding to the <rotate /> tag.

-AnimationSet: Combination of gradients, which is a combination of the above gradients, corresponding to the <set /> tag.

Before we start explaining the usage of various animations, let's first explain something: Interpolator

>

Used to control the speed of animation changes, it can be understood as an animation renderer. Of course, we can also implement the Interpolator interface ourselves to control the speed of the animation changes. Android has already provided us with five implementation classes to choose from:

-LinearInterpolator: The animation changes at a constant speed.

-AccelerateInterpolator: The animation starts with a slower speed and then accelerates.

-AccelerateDecelerateInterpolator: The animation starts and ends with a slower speed, and accelerates in the middle.

-CycleInterpolator: The animation loops a specific number of times, and the change speed changes according to the sine curve: Math.sin(2 * mCycles * Math.PI * input)

-DecelerateInterpolator: The animation starts with a faster speed and then decelerates.

-AnticipateInterpolator: Reverse, first changes in the opposite direction for a while and then accelerates.

-AnticipateOvershootInterpolator: At the beginning, it goes back and then swings forward by a certain value before returning to the final value.

-BounceInterpolator: Bounce, when it's about to reach the target value, the value will bounce, such as if the target value is 100, the following values may be 85, 77, 70, 80, 90, 100 in order.

-OvershootInterpolator: Overshoot, at the end, it exceeds the target value and then slowly changes to the target value.

And this thing, we usually use it when writing animation xml files, the attribute is: android:interpolator, and the above corresponding values are: **@android:anim/linear_interpolator**, which is actually just camel case naming 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 : Starting transparency toAlpha : Ending transparency

2) ScaleAnimation (Scaling Gradient)

anim_scale.xml:

<scale xmlns:android="http://schemas.android.com/apk/res/android"  

```xml
<LinearLayout
    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="Translate Gradient" />

<Button
    android:id="@+id/btn_rotate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rotate Gradient" />

<Button
    android:id="@+id/btn_set"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Composite 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>

Alright, let's move on to our MainActivity.java, which is also very simple. You just need to call AnimationUtils.loadAnimation() to load the animation, and then our View component 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 picture:

Hehe, it's interesting, right? Why not try it yourself, change some things, or freely combine animations to create a cool effect?

4. Listening to the animation state

>

We can monitor the execution state of the animation by calling the animation object's:

• setAnimationListener(new AnimationListener()) method, and override the following three methods:

• onAnimationStart (): Animation starts

• onAnimtaionRepeat (): Animation repeats

• onAnimationEnd (): Animation ends

You can complete the monitoring of the animation execution state.

5. Dynamically setting animation effects for View

>

First, call AnimationUtils.loadAnimation (animation xml file), and then the View component calls startAnimation(anim) to start the animation. This is the static loading method, of course, you can also directly create an animation object, set it with Java code, and then call startAnimation to start the animation.

6. Setting transition animations for Fragment

Here, it's important to note whether the Fragment is using the v4 package or the app package!

We can call the FragmentTransaction object's setTransition(int transit) to specify standard transition animations for Fragments, and the possible values for transit are as follows:

• TRANSIT_NONE: No animation

• TRANSITFRAGMENTOPEN: Animation in the form of opening

• TRANSITFRAGMENTCLOSE: Animation in the form of closing

The above standard process animations can be called by both, and the difference lies in the custom transition animations.

setCustomAnimations () method!

-

Fragment under the app package: **setCustomAnimations(int enter

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 animation, slides up from the bottom of its own position by its own height for a duration of 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 the transition time of the animation
        start_ctrl.postDelayed(new Runnable() {
            @Override
            public void run() {
                start_ctrl.setVisibility(View.VISIBLE);
                start_ctrl.startAnimation(ctrlAnimation);
            }
        }, 2000);
    }
}

The comments are clear, so I won't explain further. If you have any doubts about TranslateAnimation.RELATIVE_TO_SELF, please search it on Google or Baidu yourself. Due to space constraints (I'm lazy), I won't write it here, it's quite simple~

9. Download the code example for this section

AnimationDemo3.zip

AnimationDemo4.zip

Summary of this section:

>

This section has provided a detailed explanation of the second type of animation in Android (tween animation), a detailed explanation of the four types of animations, setting up animation listeners, and how to set animations for Views, Fragments, and Activities. Finally, an example was given of how to pop up login and register buttons from the bottom of the APP after entering. The length may be a bit long, but it is very easy to understand, I believe that everyone can gain a lot after reading! Well, this section is here, thank you~