【Android】View动画—XML动画、帧动画

文章目录

View动画
- 四种基本类型
- 使用方法
- [XML 定义动画](#XML 定义动画)
- 帧动画
- 属性动画

View动画

四种基本类型

View 动画主要有四种基本类型 ，它们都继承自 Animation 类：

动画类型	作用	主要方法
AlphaAnimation	透明度变化	`fromAlpha`（起始透明度），`toAlpha`（目标透明度）
ScaleAnimation	缩放动画	`fromX`、`toX`（X 轴缩放比例），`fromY`、`toY`（Y 轴缩放比例）
TranslateAnimation	平移动画	`fromXDelta`、`toXDelta`（X 轴位移），`fromYDelta`、`toYDelta`（Y 轴位移）
RotateAnimation	旋转动画	`fromDegrees`、`toDegrees`（旋转角度），`pivotX`、`pivotY`（旋转中心）

使用方法

（1）透明度动画（AlphaAnimation）

java 复制代码

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f); // 从完全透明到完全显示
alphaAnimation.setDuration(1000); // 持续时间 1 秒
view.startAnimation(alphaAnimation);

效果：View 从 透明 → 不透明

（2）缩放动画（ScaleAnimation）

java 复制代码

ScaleAnimation scaleAnimation = new ScaleAnimation(
    0.5f, 1.5f, // X 轴从 0.5 倍缩放到 1.5 倍
    0.5f, 1.5f, // Y 轴从 0.5 倍缩放到 1.5 倍
    Animation.RELATIVE_TO_SELF, 0.5f, // X 轴缩放中心点
    Animation.RELATIVE_TO_SELF, 0.5f  // Y 轴缩放中心点
);
scaleAnimation.setDuration(1000);
view.startAnimation(scaleAnimation);

效果：View 放大 / 缩小

（3）平移动画（TranslateAnimation）

java 复制代码

TranslateAnimation translateAnimation = new TranslateAnimation(
    0, 300, // X 轴方向，从 0 移动到 300 像素
    0, 0   // Y 轴不变
);
translateAnimation.setDuration(1000);
view.startAnimation(translateAnimation);

效果：View 向右移动 300px

（4）旋转动画（RotateAnimation）

java 复制代码

RotateAnimation rotateAnimation = new RotateAnimation(
    0, 360, // 从 0 度旋转到 360 度
    Animation.RELATIVE_TO_SELF, 0.5f, // 以自身 X 轴中心旋转
    Animation.RELATIVE_TO_SELF, 0.5f  // 以自身 Y 轴中心旋转
);
rotateAnimation.setDuration(1000);
view.startAnimation(rotateAnimation);

效果：View 旋转 360°

3. 组合动画（AnimationSet）

可以同时应用多个动画：

java 复制代码

AnimationSet animationSet = new AnimationSet(true);
animationSet.setDuration(1000);

// 添加透明度动画
AlphaAnimation alpha = new AlphaAnimation(0.0f, 1.0f);
animationSet.addAnimation(alpha);

// 添加平移动画
TranslateAnimation translate = new TranslateAnimation(0, 200, 0, 0);
animationSet.addAnimation(translate);

view.startAnimation(animationSet);

效果：View 同时淡入 + 移动

XML 定义动画

1. XML 动画的基本结构

每个动画文件都是一个 XML 文件，以 <set>、<alpha>、<scale>、<translate>、<rotate> 之一作为根元素。例如：

xml 复制代码

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

根标签 ：可使用 <set> 组合多个动画，或者单独使用 <alpha>、<scale>、<translate>、<rotate>。
属性：设置动画的起始值、目标值、时间等。

2. 透明度动画（AlphaAnimation）

文件名：res/anim/fade_in.xml

xml 复制代码

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

效果：View 从完全透明到完全显示。

代码加载动画

java 复制代码

Animation fadeIn = AnimationUtils.loadAnimation(context, R.anim.fade_in);
view.startAnimation(fadeIn);

3. 缩放动画（ScaleAnimation）

文件名：res/anim/scale.xml

xml 复制代码

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

fromXScale、toXScale：X 轴缩放比例。
fromYScale、toYScale：Y 轴缩放比例。
pivotX、pivotY ：缩放中心，50% 代表在自身中心点缩放。

效果：View 从 0.5 倍变为 1.5 倍大小。

代码加载动画

java 复制代码

Animation scale = AnimationUtils.loadAnimation(context, R.anim.scale);
view.startAnimation(scale);

4. 平移动画（TranslateAnimation）

文件名：res/anim/translate.xml

xml 复制代码

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

fromXDelta、toXDelta：X 轴上的位移（像素）。
fromYDelta、toYDelta：Y 轴上的位移（像素）。

效果：View 从左向右移动 300px。

代码加载动画

java 复制代码

Animation translate = AnimationUtils.loadAnimation(context, R.anim.translate);
view.startAnimation(translate);

5. 旋转动画（RotateAnimation）

文件名：res/anim/rotate.xml

xml 复制代码

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

fromDegrees、toDegrees：旋转角度。
pivotX、pivotY：旋转中心点。

效果：View 以中心点为轴心旋转 360°。

代码加载动画

java 复制代码

Animation rotate = AnimationUtils.loadAnimation(context, R.anim.rotate);
view.startAnimation(rotate);

6. 组合动画（AnimationSet）

可以组合多个动画，例如同时执行旋转 + 缩放 + 透明度变化。

文件名：res/anim/combined.xml

xml 复制代码

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

    <!-- 透明度动画 -->
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>

    <!-- 缩放动画 -->
    <scale
        android:fromXScale="0.5"
        android:toXScale="1.5"
        android:fromYScale="0.5"
        android:toYScale="1.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>

    <!-- 旋转动画 -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>

</set>

<set> ：用于组合多个动画，android:interpolator 决定动画播放速度变化。

效果：

View 从透明到完全显示
同时放大
同时旋转 360°

代码加载动画

java 复制代码

Animation combined = AnimationUtils.loadAnimation(context, R.anim.combined);
view.startAnimation(combined);

7. LayoutAnimation

xml 复制代码

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/item_slide_in"
    android:animationOrder="normal"
    android:delay="0.1" />

android:animation：子项的动画（这里引用 item_slide_in.xml）。
android:animationOrder：
- normal：按顺序执行动画（默认）。
- reverse：逆序执行。
- random：随机执行。
android:delay：动画延迟比例。

android:interpolator：

在 Android 视图动画（View Animation） 中，android:interpolator 负责控制动画的时间变化速率 ，即动画执行过程中的速度曲线。

它可以让动画：

线性均匀（LinearInterpolator）

逐渐加速（AccelerateInterpolator）

逐渐减速（DecelerateInterpolator）

先加速后减速（AccelerateDecelerateInterpolator）

弹跳效果（BounceInterpolator）

超出目标再回弹（OvershootInterpolator）

先超出再回弹（AnticipateOvershootInterpolator）

常见类型：

插值器名称作用

@android:anim/linear_interpolator 线性匀速，动画速度恒定，不加速也不减速

@android:anim/accelerate_interpolator 加速动画，一开始慢，后面快

@android:anim/decelerate_interpolator 减速动画，一开始快，后面慢

@android:anim/accelerate_decelerate_interpolator 先加速再减速，中间速度最快

@android:anim/bounce_interpolator 弹跳效果，到终点时弹几下

@android:anim/overshoot_interpolator 超出终点然后回弹

@android:anim/anticipate_interpolator 先往反方向移动一点，然后加速到目标点

@android:anim/anticipate_overshoot_interpolator 先往回移动一点，再超出目标点，最后回到目标点

插值器名称	作用
`@android:anim/linear_interpolator`	线性匀速，动画速度恒定，不加速也不减速
`@android:anim/accelerate_interpolator`	加速动画，一开始慢，后面快
`@android:anim/decelerate_interpolator`	减速动画，一开始快，后面慢
`@android:anim/accelerate_decelerate_interpolator`	先加速再减速，中间速度最快
`@android:anim/bounce_interpolator`	弹跳效果，到终点时弹几下
`@android:anim/overshoot_interpolator`	超出终点然后回弹
`@android:anim/anticipate_interpolator`	先往反方向移动一点，然后加速到目标点
`@android:anim/anticipate_overshoot_interpolator`	先往回移动一点，再超出目标点，最后回到目标点

android:fillAfter="true" 作用是动画结束后，View 是否保持动画最终状态。

true：动画结束后，View 停留在动画的最终位置或状态。

false（默认）：动画结束后，View 恢复到原始状态。

帧动画

帧动画 （Frame Animation）是逐帧播放一系列图片 来实现动画的方式，类似于 GIF 动画。它适用于 简单的逐帧动画，但不适合复杂的 UI 动画（性能开销大）。

1. 定义帧动画（XML 方式）

在 res/drawable 目录下创建 frame_animation.xml：

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">  <!-- oneshot="false" 表示循环播放 -->

    <item android:drawable="@drawable/frame1" android:duration="100"/>
    <item android:drawable="@drawable/frame2" android:duration="100"/>
    <item android:drawable="@drawable/frame3" android:duration="100"/>
    <item android:drawable="@drawable/frame4" android:duration="100"/>
</animation-list>

📌 说明：

<animation-list>：定义帧动画列表。
<item> ：
- android:drawable="..."：指定帧图片（建议使用 drawable 资源）。
- android:duration="100"：每帧持续时间（毫秒）。
android:oneshot="false" ：是否只播放一次，false 表示无限循环。

2. 在代码中加载帧动画

在 ImageView 上加载帧动画：

Java 复制代码

ImageView imageView = findViewById(R.id.imageView);
imageView.setBackgroundResource(R.drawable.frame_animation); // 设置帧动画资源

// 获取 AnimationDrawable 对象
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start(); // 开始播放

📌 动画控制：

java 复制代码

animationDrawable.stop();  // 停止动画

3. 在 XML 布局中使用帧动画

在 layout.xml 中：

xml 复制代码

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/frame_animation"/>

然后在 Java 代码中启动动画：

java 复制代码

ImageView imageView = findViewById(R.id.imageView);
AnimationDrawable animation = (AnimationDrawable) imageView.getBackground();
animation.start();

4. 代码动态创建帧动画

除了 XML 方式，也可以在 Java 代码中手动创建：

java 复制代码

ImageView imageView = findViewById(R.id.imageView);
AnimationDrawable animationDrawable = new AnimationDrawable();

// 添加帧
animationDrawable.addFrame(getResources().getDrawable(R.drawable.frame1), 100);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.frame2), 100);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.frame3), 100);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.frame4), 100);

animationDrawable.setOneShot(false); // 是否只播放一次
imageView.setBackground(animationDrawable); // 设置动画
animationDrawable.start(); // 播放动画

📌 动态创建时：

addFrame(Drawable drawable, int duration)：添加一帧图片和持续时间。
setOneShot(false)：是否循环播放（true 只播放一次）。

5. 停止动画

可以在Activity 生命周期中控制动画：

java 复制代码

@Override
protected void onPause() {
    super.onPause();
    animationDrawable.stop(); // 避免浪费资源
}

属性动画

1. 基本属性动画：ObjectAnimator

（1）平移动画

java 复制代码

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);
animator.setDuration(500);
animator.start();

"translationX"：X 轴平移。
0f -> 300f：从 0 移动到 300px。
setDuration(500)：动画持续 500ms。

（2）透明度动画

java 复制代码

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);
animator.setDuration(500);
animator.start();

透明度从 1（完全可见） 变成 0（完全透明）。

（3）旋转动画

java 复制代码

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
animator.setDuration(1000);
animator.start();

"rotation"：围绕 Z 轴旋转 360°。

（4）缩放动画

java 复制代码

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2f);
animator.setDuration(500);
animator.start();

"scaleX"：X 方向缩放 2 倍。

2. 组合动画：AnimatorSet

多个动画同时执行或依次执行：

java 复制代码

ObjectAnimator moveX = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);

AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(moveX, fadeOut);  // 同时执行
animatorSet.setDuration(1000);
animatorSet.start();

如果想让动画 依次执行：

java 复制代码

animatorSet.playSequentially(moveX, fadeOut); // 先平移，再淡出

3. ValueAnimator：更自由的动画

ValueAnimator 主要用于非 View 对象的动画，如颜色变化、数值计算等。

（1）颜色渐变

java 复制代码

ValueAnimator animator = ValueAnimator.ofArgb(Color.RED, Color.BLUE);
animator.setDuration(1000);
animator.addUpdateListener(animation -> {
    int color = (int) animation.getAnimatedValue();
    view.setBackgroundColor(color);
});
animator.start();

（2）监听动画过程

java 复制代码

ValueAnimator animator = ValueAnimator.ofInt(0, 100);
animator.setDuration(1000);
animator.addUpdateListener(animation -> {
    int value = (int) animation.getAnimatedValue();
    Log.d("Animation", "当前值：" + value);
});
animator.start();

4. ViewPropertyAnimator（更简洁）

如果只是操作 View（如平移、缩放、透明度），可以用 ViewPropertyAnimator：

java 复制代码

view.animate()
    .translationX(300f)
    .alpha(0f)
    .setDuration(1000)
    .start();

这个方式更高效，不需要额外创建 ObjectAnimator 对象。

5. 结合 Interpolator 让动画更丝滑

（1）插值器示例

java 复制代码

animator.setInterpolator(new AccelerateDecelerateInterpolator()); // 先加速，后减速
animator.start();

（2）常见插值器

AccelerateInterpolator()：加速动画（开始慢 -> 结束快）。
DecelerateInterpolator()：减速动画（开始快 -> 结束慢）。
BounceInterpolator()：弹跳效果。
OvershootInterpolator()：超出一点再回弹。

6. XML 方式定义属性动画

在 res/animator/ 文件夹创建 scale.xml：

java 复制代码

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="scaleX"
    android:duration="500"
    android:valueFrom="1.0"
    android:valueTo="2.0"
    android:valueType="floatType"/>

然后在代码中使用：

java 复制代码

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.scale);
animator.setTarget(view);
animator.start();

已经到底啦！！