Android animation (frame animation, tween animation, attribute animation) explanation

Android animation (frame animation, tween animation, attribute animation) explanation

First, let's take a look at what frame animation, tweening animation, and property animation are.

introduce:

Frame animation : It is a common form of animation (Frame By Frame). Its principle is to decompose animation actions in "continuous key frames", that is, to draw different content frame by frame on each frame of the timeline to make it continuous Play as an animation.

Tween animation : When doing FLASH animation, you need to do "tween animation" between two key frames to realize the movement of the picture;

Property animation : Frame animation and tween animation realize the effect of moving, scaling, rotating and fading in and out of View. But it's not enough for android developers, and the effect of moving, scaling, rotating and fading at the same time is no longer just a visual animation effect. So starting from Android 3.0, the system provides us with a new animation mode, property animation.

So today let's take a look at how these animations are implemented.

Frame animation (let's take a look at the effect first)

First, we create the materials we want and import them into the drawable folder, as shown in the figure.

Then create a from.xml file in the drawable file and write the code. The function here can be understood as, we put the picture
into a collection, and we call from directly when we want to use it.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/a" android:duration="120" />
    <item android:drawable="@drawable/b" android:duration="120" />
    <item android:drawable="@drawable/c" android:duration="120" />
    <item android:drawable="@drawable/d" android:duration="120" />
    <item android:drawable="@drawable/e" android:duration="120" />
    <item android:drawable="@drawable/f" android:duration="120" />
    <item android:drawable="@drawable/g" android:duration="120" />
    <item android:drawable="@drawable/h" android:duration="120" />

</animation-list>

Then write in the activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/from">

</RelativeLayout>

Then write the code in the MainActivity.java file

package com.example.a2022324;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
    
    

    private boolean flag;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout relativelayout = findViewById(R.id.tl); //获取activity——main的RelativeLayout 的id
        AnimationDrawable anim = (AnimationDrawable) relativelayout.getBackground();
        // anim作用获取背景，这里我们的被禁就是我们设置的图片集合（from）
        relativelayout.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                if(flag){
    
    //用开关来实现点击动与不动的效果
                    anim.start();
                    flag = false;
                }else{
    
    
                    anim.stop();
                    flag = true;
                }
            }
        });
    }
}

We click Run to complete the effect.

tween animation

alpha : The effect of the picture gradually showing and gradually disappearing.
rotat : the image is centered at a certain point, rotated by xx degrees
scale : the enlargement and reduction of the image
translate : the translation of the image

Then let's take a look at the motion tweens, first of all the effects.

We first create the amin directory in the res file, and then create the alpha, rotate, scale, and tranlslate.xml files respectively.

First look at the alpha.xml and activity.xml files

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="2000"
        android:fromAlpha="0"
        android:toAlpha="1" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingClass">

    <ImageView
        android:id="@+id/iv"
        android:src="@drawable/background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"//说明一下，第一个属性，只要你容器是RelativeLayout的时候才有。此时设置为RelativeLayout里的子控件属性为android:layout_centerInParent=”true“，就是水平垂直都居中。
        android:adjustViewBounds="true"//调整ImageView的边界，使得ImageView和图片有一样的长宽比例。
        android:maxHeight="300dp"
        android:maxWidth="300dp"/>

</RelativeLayout>

The usage of android:adjustViewBounds can be seen here. I am the connection of this little brother (https://www.jianshu.com/p/49f8d5e5965b?utm_campaign=haruki)

Look at the MainActivity.java file again. Here I have added other functions to avoid code redundancy, but commented out, it will not affect the result.

package com.example.a2022324;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
    
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageview = findViewById(R.id.iv);//获取id值

        imageview.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    //通过animation来加载alpha文件，下面的原理同理
                Animation animation = AnimationUtils.loadAnimation(MainActivity.this,
                        R.anim.alpha);

//                Animation animation = AnimationUtils.loadAnimation(MainActivity.this,
//                        R.anim.rotate);

//                Animation animation = AnimationUtils.loadAnimation(MainActivity.this,
//                        R.anim.scale);

//                Animation animation = AnimationUtils.loadAnimation(MainActivity.this,
//                        R.anim.translate);
                imageview.startAnimation(animation);
            }
        });

    }
}

Property animation

Let's take a look at the effect first.

Here we can see that the text fades out, we look directly at the code

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingClass">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="快看我，我要变化了"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Here we useandroidx.constraintlayout.widget.ConstraintLayoutThis shit,
if your package is red, it is because it is useless to import the library. In the dependencies of the app->build.gradle file, write ==implementation 'androidx.constraintlayout:constraintlayout:1.1.3'== this stuff. As shown.

Let's take a look again, the mainactivity code:

package com.example.a2022324;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 1f);//改变float的值，0f是透明的，1f是不透明的
        // ValueAnimator.ofArgb()
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    

            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
    
    
                float value = (float) valueAnimator.getAnimatedValue();
            }
        });
        valueAnimator.start();

        TextView textView = findViewById(R.id.tv);
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "alpha",
                0f, 1f);//objectAnimator 作用是  让我们的textView的透明度从0f到1f
        objectAnimator.setDuration(4000);//从0f到1f要4秒
        objectAnimator.start();//启动

    }
}

For the usage of ValueAnimator, you can see the usage of this big guy. I am a connection
(https://blog.csdn.net/u011043551/article/details/65938908)

The effect is complete. (Seeking attention)