AndroidApp开发-动画效果篇

Posted 2023-03-29 KKK3号

在我们玩手机的过程中，如果我们点击某一个页面时，会出现一个页面动画加载或者动画效果的现象。现在我们就来看看App开发中是如何实现动画效果的。

目录

动画的分类

逐帧动画：

补间动画：

---

动画的分类

在常见的app使用的动画中，常见的就是逐帧动画、补间动画和属性动画，这三种动画各有优点，下面我们来看看它们是如何是实现的：

逐帧动画：

逐帧动画，顾名思义就是动画的内容是由一张张图片构成的，所以我们只需要设置这些图片的展现次序以及展现的实现就可以实现逐帧动画的效果。

要想实现逐帧的动画，首先我们得有几张动画，我准备了下面6张图片，我计划让它们像放幻灯片一样每隔一段时间来显示：

准备完了照片，接下来就该创建一个动画的列表来播放这些图片：我们在drawable文件下面新创建一个animation（动画）类型的xml文件用于存储这几张要按动画效果播放的图片，这样这些图片就可以按照逐帧的形式展现了。创建完后我们记得将下面红圈位置改成animation-list，这样才能创造一个animation类型的控件：

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

    <item android:drawable="@drawable/pic2" android:duration="220"/>
    <item android:drawable="@drawable/pic2" android:duration="220"/>
    <item android:drawable="@drawable/pic3" android:duration="220"/>
    <item android:drawable="@drawable/pic4" android:duration="220"/>
    <item android:drawable="@drawable/pic5" android:duration="220"/>
    <item android:drawable="@drawable/pic6" android:duration="220"/>

</animation-list>

准备完了播放的动画，接下来我们就要准备一个Relativelayout图层来容纳这个动画xml文件，这里的xml文件可以近似看成一张图片，只不过是一张会动的图片，所以我们处理它们的时候可以按照类似图片的方式处理。我们设置背景就是这个动画xml文件，这样就可以将这个动画xml文件逐帧在背景上显示了，这里也可以调整出一个区域来设置设置这张“图片”，这样它不是全屏播放。因为下面我们设置放置这张“图片”的位置是Relativelayout的backgrou即背景。既然我们图片可以作为背景，那么图片也可以在一个区域中显示，所以我们也可以划出一个区域来放置：

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/animation"
        android:id="@+id/Relid"
    />

设置完这些我们就可以直接在Main程序里面创建这个图层了，首先我们必须要创建一个Relativelayout的图层，并且将之前我们设置的图层通过findbyid的形式找到并且传递给创建的变量，然后再实例化一个动画类型的变量animation，为了触发这个动画效果，我们还设置调用Relativelayout里面的点击效果函数来设置点击开启动画效果。动画效果的开始就是调用动画类型变量animation里的start方法，结束就是调用stop方法：

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

        RelativeLayout relativeLayout = findViewById(R.id.Relid);
        AnimationDrawable animationDrawable = (AnimationDrawable) relativeLayout.getBackground();
        relativeLayout.setOnClickListener(new View.OnClickListener()

            @Override
            public void onClick(View view) 
                animationDrawable.start();
            
        );
    

补间动画：

在我们看完逐帧动画之后，下面我们就来看一下补间动画。所谓的补间动画就是操作图片进行平移、缩放、旋转和透明度设置的操作。

要对图片进行操作，首先我们要准备一张图片：

    <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:layout_marginStart="54dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="54dp"
        android:src="@drawable/pic5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

准备完了要去操作的图片，进行补间动画的操作我们需要在res文件夹下新创一个文件夹，并且命名为“anim”（一定要叫anim，其它名字没有Animation Resource file的文件），然后再在这个文件夹下面创建出一个Animation Resource file的文件：

下图为改了anim名字后的文件，里面没有Animation Resource file的文件：

这个Animation Resource file文件编写记录的是我们的操作，补间动画对图片有四种操作：Alpha、roatate、translate、scales。分别对应：透明度变化、旋转、平移和放缩。下面我们来看看四种变换的实现方式：

alpha：

alpha表示对图片进行透明度处理，当我们在anim目录下新创一个Animation Resource file后，我们会得到一个set的节点，我们再在节点里面创建一个aplha节点，如下图所示。这个节点就是用来配置图片透明度处理信息的。fromalpha表示开始时图片的透明度，这里选择完全不透明，我想要的效果是图片一开始完全不透明，我点击后它会逐渐变透明，所以toalpha我选择0。这里有一个很重要的设置就是duration，它表示这个图片透明度变化的持续时间，必须要设置。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration = "6000"
        />
</set>

变化效果（变化过程中）：

rotate：

这个表示图片旋转动画，与前面类似，只不过配置方法不同。这里的fromDegrees表示开始时图片的角度，我设置为0度，旋转完成后的角度为toDegrees，我设置为180度，旋转轴为pivotX和pivotY，它们分别表示旋转轴在图片的哪个位置，50%、50%表示在X、Y轴一半处，也就是中心。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "6000"
        />
</set>

旋转效果（变化过程中）：

 translate：

这种变换是平移变换，既然是平移，就需要初始位置和末尾位置，初始位置fromXdelta和fromYDelta就直接设置为0，0。末尾位置就设置为移动量为X是20和Y是300处。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="20"
        android:toYDelta="100"
        android:duration = "6000"

        />
</set>

移动过程：

 

scale：

这个操作表示缩放效果，它也要有一个缩放的中心轴。这里我们就照旧设置为中点。既然缩放，那就免不了有缩放前的比例和缩放后的比例。缩放前的fromXScale和fromYScale我们就设置为1，就是原始状态。而缩放后的toXScale和toYScale就设置为都是0.5即可。这个变换表示将长、宽图片按0.5比例缩小。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="0.5"
        android:toYScale="0.5"
        android:duration = "6000"
        />
</set>

缩放效果（变化过程中）：

了解完四种变化效果，接下来就要将变化效果设置到图片中去了。首先照旧在Main方法里创建出来图片，并且设置点击方法。这里我们要想用到动画效果，就需要将动画效果加载到图片中。首先我们实例化出一个动画效果的对象an。然后将这个对象通过AnimationUtils的loadAnimation方法加载到an里面这个loadAnimation方法两个参数，一个是上下文，另一个是我们之前创建的4中动画效果，要加载哪一种就找到它将它传进去即可。最后就是调用图片控件的startAnimation方法，将动画效果的对象作为参数传递进去即可。

ImageView imageView = findViewById(R.id.img1);
        imageView.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View view) 
                Animation an = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scales);
                imageView.startAnimation(an);
            
        );

​​​​​​​