文章目录
- View动画
- 四种基本类型
- 使用方法
- 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)
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f); // 从完全透明到完全显示
alphaAnimation.setDuration(1000); // 持续时间 1 秒
view.startAnimation(alphaAnimation);
效果:View 从 透明 → 不透明
(2)缩放动画(ScaleAnimation)
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)
TranslateAnimation translateAnimation = new TranslateAnimation(0, 300, // X 轴方向,从 0 移动到 300 像素0, 0 // Y 轴不变
);
translateAnimation.setDuration(1000);
view.startAnimation(translateAnimation);
效果:View 向右移动 300px
(4)旋转动画(RotateAnimation)
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)
可以同时应用多个动画:
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 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 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 从完全透明到完全显示。
代码加载动画
Animation fadeIn = AnimationUtils.loadAnimation(context, R.anim.fade_in);
view.startAnimation(fadeIn);
3. 缩放动画(ScaleAnimation)
文件名:res/anim/scale.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 倍大小。
代码加载动画
Animation scale = AnimationUtils.loadAnimation(context, R.anim.scale);
view.startAnimation(scale);
4. 平移动画(TranslateAnimation)
文件名:res/anim/translate.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。
代码加载动画
Animation translate = AnimationUtils.loadAnimation(context, R.anim.translate);
view.startAnimation(translate);
5. 旋转动画(RotateAnimation)
文件名:res/anim/rotate.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°。
代码加载动画
Animation rotate = AnimationUtils.loadAnimation(context, R.anim.rotate);
view.startAnimation(rotate);
6. 组合动画(AnimationSet)
可以组合多个动画,例如同时执行旋转 + 缩放 + 透明度变化。
文件名:res/anim/combined.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"><!-- 透明度动画 --><alphaandroid:fromAlpha="0.0"android:toAlpha="1.0"android:duration="1000"/><!-- 缩放动画 --><scaleandroid:fromXScale="0.5"android:toXScale="1.5"android:fromYScale="0.5"android:toYScale="1.5"android:pivotX="50%"android:pivotY="50%"android:duration="1000"/><!-- 旋转动画 --><rotateandroid:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:duration="1000"/></set>
<set>:用于组合多个动画,android:interpolator决定动画播放速度变化。
效果:
- View 从透明到完全显示
- 同时放大
- 同时旋转 360°
代码加载动画
Animation combined = AnimationUtils.loadAnimation(context, R.anim.combined);
view.startAnimation(combined);
7. LayoutAnimation
<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:fillAfter="true"作用是动画结束后,View 是否保持动画最终状态。
true:动画结束后,View 停留在动画的最终位置或状态。false(默认):动画结束后,View 恢复到原始状态。
帧动画
帧动画(Frame Animation)是逐帧播放一系列图片来实现动画的方式,类似于 GIF 动画。它适用于 简单的逐帧动画,但不适合复杂的 UI 动画(性能开销大)。
1. 定义帧动画(XML 方式)
在 res/drawable 目录下创建 frame_animation.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 上加载帧动画:
ImageView imageView = findViewById(R.id.imageView);
imageView.setBackgroundResource(R.drawable.frame_animation); // 设置帧动画资源// 获取 AnimationDrawable 对象
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start(); // 开始播放
📌 动画控制:
animationDrawable.stop(); // 停止动画
3. 在 XML 布局中使用帧动画
在 layout.xml 中:
<ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/frame_animation"/>
然后在 Java 代码中启动动画:
ImageView imageView = findViewById(R.id.imageView);
AnimationDrawable animation = (AnimationDrawable) imageView.getBackground();
animation.start();
4. 代码动态创建帧动画
除了 XML 方式,也可以在 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 生命周期中控制动画:
@Override
protected void onPause() {super.onPause();animationDrawable.stop(); // 避免浪费资源
}
属性动画
1. 基本属性动画:ObjectAnimator
(1)平移动画
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);
animator.setDuration(500);
animator.start();
- “translationX”:X 轴平移。
- 0f -> 300f:从 0 移动到 300px。
setDuration(500):动画持续 500ms。
(2)透明度动画
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);
animator.setDuration(500);
animator.start();
透明度从 1(完全可见) 变成 0(完全透明)。
(3)旋转动画
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
animator.setDuration(1000);
animator.start();
“rotation”:围绕 Z 轴旋转 360°。
(4)缩放动画
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2f);
animator.setDuration(500);
animator.start();
“scaleX”:X 方向缩放 2 倍。
2. 组合动画:AnimatorSet
多个动画同时执行或依次执行:
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();
如果想让动画 依次执行:
animatorSet.playSequentially(moveX, fadeOut); // 先平移,再淡出
3. ValueAnimator:更自由的动画
ValueAnimator 主要用于非 View 对象的动画,如颜色变化、数值计算等。
(1)颜色渐变
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)监听动画过程
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:
view.animate().translationX(300f).alpha(0f).setDuration(1000).start();
这个方式更高效,不需要额外创建
ObjectAnimator对象。
5. 结合 Interpolator 让动画更丝滑
(1)插值器示例
animator.setInterpolator(new AccelerateDecelerateInterpolator()); // 先加速,后减速
animator.start();
(2)常见插值器
AccelerateInterpolator():加速动画(开始慢 -> 结束快)。DecelerateInterpolator():减速动画(开始快 -> 结束慢)。BounceInterpolator():弹跳效果。OvershootInterpolator():超出一点再回弹。
6. XML 方式定义属性动画
在 res/animator/ 文件夹创建 scale.xml:
<objectAnimatorxmlns: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"/>
然后在代码中使用:
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.scale);
animator.setTarget(view);
animator.start();
已经到底啦!!
