欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android动画学习之补间动画和逐帧动画

程序员文章站 2022-03-25 14:49:05
...

一、动画介绍

在Android开发中,动画可划分为两种:

  • 补间动画

    主要包括:位置、角度、尺寸、透明度等属性变化。

  • 逐帧动画

    通过多张图片轮流播放来显示。

二、补间动画

1. 透明度渐变动画(AlphaAnimation)

透明度渐变动画是通过改变View组件透明度来实现渐变效果。主要可以通过为动画指定开始时的透明度、结束时的透明度以及动画持续时间来创建动画,在XML文件中定义透明度渐变动画,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:interpolator="@android:anim/linear_interpolator"
        android:repeatMode="reverse"
        android:repeatCount="infinite"
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

上述代码定义了一个让View从完全不透明到透明、持续时间为1s的动画。

属性介绍:

参数 性能 使用
interpolator 控制动画的变化速度 @android:anim/linear_interpolator(匀速改变)、@android:anim/accelerate_interpolator(开始慢,后来加速)等
repeatMode 指定动画重复的方式 reverse(反向)、restart(重新开始)、默认:restart
repeatCount 指定动画重复次数 正整数、infinite(无限循环)
duration 指定动画播放时长 单位(ms)
fromAlpha 指定动画开始时的透明度 0.0为完全透明,1.0为不透明
toAlpha 指定动画结束时的透明度 0.0为完全透明,1.0为不透明
startOffset 多长时间后开始执行动画 默认:0

2. 旋转动画(RotateAnimation)

旋转动画就是通过为动画指定开始时的旋转角度、结束时的旋转角度以及动画播放时长来创建动画,在XML文件中定义旋转动画,具体代码如下:

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

上述代码定义了一个让View从0°旋转到360°持续时间为1s的旋转动画。

属性介绍:

参数 性能 使用
fromDegrees 指定动画开始时的角度 [0,360]
toDegrees 指定动画结束时的角度 [0,360]
pivotX 指定轴心的X坐标 %
pivotY 指定轴心的Y坐标 %

3. 缩放动画(ScaleAnimation)

缩放动画就是通过为动画指定开始时的缩放系数、结束时的缩放系数以及动画持续时长来创建动画,在XML文件中定义缩放动画,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:repeatMode="reverse"
        android:repeatCount="infinite"
        android:duration="3000"
        android:fillAfter="true"
        android:fillBefore="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="2.0"
        android:toYScale="2.0"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

上述代码定义了一个让View在X轴上放大一半、Y轴上放大一半的缩放动画。

属性介绍:

参数 性能 使用
fromXScale 指定动画开始时X轴上的缩放系数 值为1.0表示不再变化
fromYScale 指定动画开始时Y轴上的缩放系数 值为1.0表示不再变化
toXScale 指定动画结束时X轴上的缩放系数 小于1表示缩小,大于1表示放大,等于1表示没有缩放
toYScale 指定动画结束时Y轴上的缩放系数 小于1表示缩小,大于1表示放大,等于1表示没有缩放
fillAfter 动画执行结束之后是否停留在最后一帧,优先存在于fillBefore 默认:false
fillBefore 动画播放完毕后,是否会恢复原始状态 默认:true
fillEnabled 是否应用与fillBefore的值 默认:true

4. 平移动画(TranslateAnimation)

平移动画是通过为动画指定开始位置、结束位置以及动画持续时长来创建动画,在XML文件中定义平移动画,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0.0"
        android:fromYDelta="0.0"
        android:toXDelta="100"
        android:toYDelta="0.0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:duration="4000"/>
</set>

上述代码定义了一个让View从起始x(0.0)位置平移到结束x(100)位置,持续时间为4s的平移动画。
注意:这里的坐标不是指屏幕像素的坐标,而是指相对于View的所在位置的坐标。
例如:开始位置0.0表示在View最开始的地方平移(即布局文件定义View所在的位置)。

三、补间动画实战

1. 创建工程,设计用户交互界面

布局文件activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="5dp">

    <ImageView
        android:id="@+id/iv_bean"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="false"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="145dp"
        android:layout_marginRight="145dp"
        android:layout_marginBottom="320dp"
        android:src="@drawable/icon" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
    <Button
        android:id="@+id/btn_one"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/btn_1"/>
    <Button
        android:id="@+id/btn_two"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/btn_2"/>
    <Button
        android:id="@+id/btn_three"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/btn_3"/>
    <Button
        android:id="@+id/btn_four"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/btn_4"/>
    </LinearLayout>
</RelativeLayout>

其中,按钮名称在(res/values/strings.xml)文件中说明,方便程序管理:

<resources>
    <string name="app_name">Animation</string>
    <string name="btn_1">渐变</string>
    <string name="btn_2">旋转</string>
    <string name="btn_3">缩放</string>
    <string name="btn_4">移动</string>
</resources>

2. 创建相应的补间动画

在res目录下创建一个anim文件夹,并新建4个XML文件,分别命名为:

  • “alpha_animation.xml”(透明度渐变动画)
  • “rotate_animation.xml” (旋转动画)
  • “scale_animation.xml” (缩放动画)
  • “translate_animation.xml”(平移动画)。
    分别将前面讲解的四个动画的XML代码放入创建的四个文件中。

3. 编写界面交互代码

在XML文件中定义好补间动画资源后,需要将动画资源设置到控件上。要实现该功能,需要在MainActivity中调用AnimationUtils类的loadAnimation()方法加载动画资源,并为图片(@drawable/icon)设置指定动画,具体代码如下:
文件MainActivity.java编写逻辑代码:

package com.example.animation;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView ivBean;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化组件并添加点击事件
        Button buttonOne = findViewById(R.id.btn_one);
        Button buttonTwo = findViewById(R.id.btn_two);
        Button buttonThree = findViewById(R.id.btn_three);
        Button buttonFour = findViewById(R.id.btn_four);
        ivBean = findViewById(R.id.iv_bean);
        buttonOne.setOnClickListener(this);
        buttonTwo.setOnClickListener(this);
        buttonThree.setOnClickListener(this);
        buttonFour.setOnClickListener(this);
    }
    public void onClick(View v){
        switch(v.getId()){
            case R.id.btn_one:
                //调用AnimationUtils的loadAnimation()方法加载动画
                //单击按钮使用图片渐变
                Animation alpha = AnimationUtils.loadAnimation(this,R.anim.alpha_animation);
                ivBean.startAnimation(alpha);
                break;
            case R.id.btn_two:
                //单击按钮使图片旋转
                Animation rotate = AnimationUtils.loadAnimation(this,R.anim.rotate_animation);
                ivBean.startAnimation(rotate);
                break;
            case R.id.btn_three:
                //单击按钮使图像缩放
                Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale_animation);
                ivBean.startAnimation(scale);
                break;
            case R.id.btn_four:
                //单击按钮使图片移动
                Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate_animation);
                ivBean.startAnimation(translate);
                break;
        }
    }
}

可以看出,XML中定义的动画是通过AnimationUtils.loadAnimation()方法加载的,最后通过startAnimation()方法将动画设置到ImageView中。

4. 运行程序

video1.mp4

四、逐帧动画

  • 逐帧动画(Frame Animation)是按照事先准备好的静态图像顺序播放的,利用人眼的“视觉暂留”原理,给用户造成动画的错觉。逐帧动画的原理与放胶片看电影的原理是一样的,它们都是一张一张地播放事先准备好的静态图像。
  • 在使用逐帧动画时,需要在res/drawable目录下创建好帧动画的XML文件,并在< animation-list >节点的< item >子节点中,指定图片帧出现的顺序以及每帧的持续时间。

五、逐帧动画实战

1. 创建工程,设计用户交互界面

布局文件activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/iv_flower"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="false"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="145dp"
        android:layout_marginRight="145dp"
        android:layout_marginBottom="320dp"
        android:background="@drawable/frame" />
    <Button
        android:id="@+id/btn_play"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:background="@android:drawable/ic_media_play"/>
</RelativeLayout>

注意:ImageView的背景是Frame动画资源。

2. 创建动画资源

将需要制作为动画的图片统一存入drawable目录下,同时在drawable目录下创建Frame动画资源文件frame.xml,具体代码如下。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/rose_one"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_two"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_three"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_four"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_five"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_six"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_seven"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_eight"
        android:duration="200" />
    <item
        android:drawable="@drawable/rose_nine"
        android:duration="200" />
</animation-list>

上述代码是定义Frame动画的基本语法格式,< animation-list >为帧动画的根节点,其中属性drawable表示当前帧要播放的图片,duration表示当前帧的播放时长,单位为ms,和前面补间动画中的属性介绍一致。

3. 编写界面交互代码

在MainActivity.java中编写逻辑代码播放Frame动画,具体代码如下:

package com.example.animation;

import android.graphics.drawable.AnimationDrawable;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView iv_flower;
    private Button btn_start;
    private AnimationDrawable animation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_flower = findViewById(R.id.iv_flower);
        btn_start = findViewById(R.id.btn_play);
        btn_start.setOnClickListener(this);
        //获取AnimationDrawable对象
        animation = (AnimationDrawable)iv_flower.getBackground();
    }
    public void onClick(View v){
        //判断动画是否在播放
        if (!animation.isRunning()) {
            //动画没有在播放状态,则播放
            animation.start();
            btn_start.setBackgroundResource(android.R.drawable.ic_media_pause);
        }else{
            //动画在播放状态,则停止
            animation.stop();
            btn_start.setBackgroundResource(android.R.drawable.ic_media_play);
        }
    }
}

上述代码首先获取到ImageView的背景图片,并将该图片背景转为AnimationDrawable类型,然后使用AnimationDrawable类的start()方法播放动画。

4. 运行程序

video2.mp4

【参考书籍】
《Android移动开发基础案例教程》黑马程序员/编著

作者:刘菱
原文链接:https://blog.csdn.net/teacoffeetea/article/details/106688579

相关标签: Android android