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

2022-08-09 324

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 帧动画：是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。补间动画：指的是做FLASH动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；属性动画：帧动画与补间动画实现了对View进行移动、缩放、旋转和淡入淡出的效果。但对于android开发师来说是不够的，同时移动、缩放、旋转和淡入淡出的效果也不再只是一种视觉上的动画效果了。所以从Android 3.0版本开始，系统给我们提供了一种全新的动画模式，属性动画(property animation)。

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

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

介绍：

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

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

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

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

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

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

然后在drawable文件新建from.xml文件，写入代码，这里的作用可以理解为，我们把图片

放到一个集合里面去了，要用的时候我们直接调用from。

然后在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的用法这里可以看看这位小哥哥的[我是连接]

再看看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的用法可以看看这位大佬的用法[我是连接]

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

介绍：

热门文章

最新文章

相关课程

相关电子书