Android动画（帧动画、补间动画、属性动画）讲解

Android动画（帧动画、补间动画、属性动画）讲解

首先我们来看看啥是帧动画、补间动画、属性动画。

介绍：

帧动画：是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

补间动画：指的是做FLASH动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；

属性动画：帧动画与补间动画实现了对View进行移动、缩放、旋转和淡入淡出的效果。但对于android开发师来说是不够的，同时移动、缩放、旋转和淡入淡出的效果也不再只是一种视觉上的动画效果了。所以从Android 3.0版本开始，系统给我们提供了一种全新的动画模式，属性动画(property animation)。

所以今天我们来看看，这些动画是怎样实现的。

帧动画（我们先来看看效果）

首先我们创建我们要的素材，把他们导入到drawable文件夹下，如图。

然后在drawable文件新建from.xml文件，写入代码，这里的作用可以理解为，我们把图片
放到一个集合里面去了，要用的时候我们直接调用from。

<?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>

然后在activity_main.xml文件里写入

<?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>

然后在MainActivity.java文件写入代码

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;
                }
            }
        });
    }
}

我们点击运行完成了效果。

补间动画

alpha：图片渐渐地显示，渐渐地消失的效果。
rotat：图片的以某一点为中心，旋转xx度
scale：图片的放大与缩小
translate：图片的平移

然后我们来看看补间动画，首先来看看效果。

我们在res文件先创建amin目录在分别创建alpha、rotate、scale、tranlslate.xml文件。

先看看alpha.xml和activity.xml文件

<?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>

android:adjustViewBounds的用法这里可以看看这位小哥哥的我是连接（https://www.jianshu.com/p/49f8d5e5965b?utm_campaign=haruki）

再看看MainActivity.java文件，这里我把其他功能也加了上去，避免代码冗余，不过注释掉了，不会影响结果。

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);
            }
        });

    }
}

属性动画

我们先来看看效果。

这里我们可以看出，文字渐隐出现，我们直接看代码

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>

这里我们用到了androidx.constraintlayout.widget.ConstraintLayout这一坨玩意，
如果你的包红了，那是因为没用引入库。在app->的build.gradle文件的dependencies写入==implementation ‘androidx.constraintlayout:constraintlayout:1.1.3’==这一坨玩意。如图。

我们再来看看，mainactivity代码：

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();//启动

    }
}

ValueAnimator的用法可以看看这位大佬的用法我是连接
（https://blog.csdn.net/u011043551/article/details/65938908）

效果完成。（求关注）