Android 动画之帧动画 + 补间动画 + 属性动画

举报
计蒙不吃鱼 发表于 2025/06/03 23:30:54 2025/06/03
【摘要】 本文介绍了Android开发中的三种动画类型：帧动画、补间动画和属性动画。帧动画通过依次播放一系列静态图片实现动态效果，支持Java代码与XML两种实现方式。补间动画基于起始和结束位置自动生成过渡效果，涵盖透明度、位移、旋转、缩放及组合动画等多种形式，并可搭配插值器优化动画过程。属性动画则通过改变对象属性实现动画，支持透明度、位移、旋转、缩放及组合动画，灵活性更高且适用于更复杂的场景。

帧动画

帧动画的原理就是让一系列的静态图片依次播放，实现动画效果。
下面了解一下两种实现帧动画的方式

1.利用 Java 代码实现帧动画
2.利用 xml 实现帧动画（开发中通常使用这种方法实现帧动画）

1.利用 Java 代码实现帧动画

源代码如下：
activity_main.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开启" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止" />

    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.java文件如下

public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    AnimationDrawable animationDrawable;
    private Button btn_start;
    private Button btn_stop;
    private ImageView iv_animation;//java的形式实现


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

    }

    private void initView() {
        btn_start = (Button) findViewById(R.id.btn_start);
        btn_stop = (Button) findViewById(R.id.btn_stop);
        iv_animation = (ImageView) findViewById(R.id.iv_animation);

        btn_start.setOnClickListener(this);
        btn_stop.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_start:
                //1.实现帧动画的类（相当于一本空白的小人书）
                animationDrawable = new AnimationDrawable();
                //2.为帧动画添加内容（在小人书里添加内容）
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim1)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim2)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim3)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim4)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim5)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim6)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim7)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim8)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim9)), 100);
                animationDrawable.addFrame(new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.anim10)), 100);
                //3.将帧动画设置给View做背景
                iv_animation.setBackground(animationDrawable);
                //其他操作，如，设置只执行一次
                animationDrawable.setOneShot(true);
                //4.开启动画（相当于翻书）
                animationDrawable.start();
                break;
            case R.id.btn_stop:
                //停止动画
                animationDrawable.stop();
                break;
        }
    }
}

2.利用 xml 实现帧动画（开发中通常使用这种方法实现帧动画）
(1).帧动画通常在XML 资源进行定义，在 <animation-list …/> 标签下使用 <item …/> 子元素标签定义动画的全部帧，并指定各帧的持续时间。

2、布局中将 AnimationDrawable 对象直接作为背景

3.在Activity文件中进行操作（播放，停止）

补间动画

理解：指定一个开始的位置，再指定一个结束的位置，自动补充中间的变化过程
为了更好的演示，写了一个Demo，xml界面如下（最后有源码）

要介绍的有：
1.透明动画：AlphaAnimation
2.位移动画：TranslateAnimation
3.各种动画插入器
4.旋转动画：RotateAnimation
5.缩放动画：ScaleAnimation
6.组合显示：AnimationSet（动画集合容器）

1.透明动画：AlphaAnimation是一个实现透明动画的API，参数：制定透密度从多少到多少（范围0-1），0代表透明

2.位移动画：TranslateAnimation：四个参数：X轴开始位置，X轴结束位置，Y轴开始位置，Y轴结束位置

3.各种动画插入器：改变中间的补充过程（变得更有趣！！！，可以不加）

 //AccelerateDecelerateInterpolator	：其变化开始和结束速率较慢，中间加速
                //AccelerateInterpolator	：加速，开始速度慢，后面加速
                //DecelerateInterpolator	：减速，开始速度快，后面减速
                //LinearInterpolator	：线性（线性均匀变化）	其变化速率恒定
                //AnticipateInterpolator：反向	先向相反的方向改变一段距离后，再加速
                //AnticipateOvershootInterpolator：反向加超越：开始向后甩，然后向前甩，过冲到目标值，最后又回到了终值
                //OvershootInterpolator	：超越，其变化开始向前甩，过冲到目标值，最后又回到了终值
                //BounceInterpolator	：跳跃	其变化在结束时反弹
                //CycleInterpolator	 ：	循环播放，其速率为正弦曲线
                //TimeInterpolator	 ：	一个接口，可以自定义插值器

4.旋转动画：RotateAnimation：参数，开始时角度，结束时角度，旋转中心的横坐标，旋转中心的纵坐标

5.缩放动画：ScaleAnimation，参数：x开始的比例值，x结束的比例值，Y开始的比例值，Y结束的比例值，后面两个参数为缩放中心的坐标点

6.组合显示：AnimationSet（动画集合容器）

源码如下：
activity_second.xml文件：

<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:context=".SecondActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_alpha"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="透明动画" />

        <Button
            android:id="@+id/btn_translate"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="位移动画" />

        <Button
            android:id="@+id/btn_rotate"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="旋转动画" />

        <Button
            android:id="@+id/btn_scale"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="缩放动画" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:onClick="groupshow"
        android:text="组合显示" />
</RelativeLayout>

SecondActivity.java文件

//补间动画
public class SecondActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_alpha;
    private Button btn_translate;
    private Button btn_rotate;
    private Button btn_scale;
    private ImageView iv_show;
    Animation animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        initView();
    }

    private void initView() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_translate = (Button) findViewById(R.id.btn_translate);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_scale = (Button) findViewById(R.id.btn_scale);

        btn_alpha.setOnClickListener(this);
        btn_translate.setOnClickListener(this);
        btn_rotate.setOnClickListener(this);
        btn_scale.setOnClickListener(this);
        iv_show = (ImageView) findViewById(R.id.iv_show);
        iv_show.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_alpha://透明动画
                //AlphaAnimation是一个实现透明动画的API，参数：制定透密度从多少到多少（范围0-1），0代表透明
                animation = new AlphaAnimation(1f, 0);
                break;
            case R.id.btn_translate://位移动画
                //TranslateAnimation：四个参数：X轴开始位置，X轴结束位置，Y轴开始位置，Y轴结束位置
                //指定一个开始的位置，再指定一个结束的位置，自动补充中间的变化过程
                //中间的变化过程又分为各种动画插入器
                //AccelerateDecelerateInterpolator	：其变化开始和结束速率较慢，中间加速
                //AccelerateInterpolator	：加速，开始速度慢，后面加速
                //DecelerateInterpolator	：减速，开始速度快，后面减速
                //LinearInterpolator	：线性（线性均匀变化）	其变化速率恒定
                //AnticipateInterpolator：反向	先向相反的方向改变一段距离后，再加速
                //AnticipateOvershootInterpolator：反向加超越：开始向后甩，然后向前甩，过冲到目标值，最后又回到了终值
                //OvershootInterpolator	：超越，其变化开始向前甩，过冲到目标值，最后又回到了终值
                //BounceInterpolator	：跳跃	其变化在结束时反弹
                //CycleInterpolator	 ：	循环播放，其速率为正弦曲线
                //TimeInterpolator	 ：	一个接口，可以自定义插值器
                animation = new TranslateAnimation(0, -200f, 0, 200f);
                //指定一个插入器，来改变中间的补充过程（变得更有趣！！！，可以不加）
                animation.setInterpolator(new BounceInterpolator());
                break;
            case R.id.btn_rotate://旋转动画
                //顺时针旋转， RotateAnimation：参数，开始时角度，结束时角度，旋转中心的横坐标，旋转中心的纵坐标
                animation = new RotateAnimation(0, 180f, iv_show.getWidth(), iv_show.getHeight());
                //指定一个插入器，来改变中间的补充过程（变得更有趣！！！，可以不加）
                animation.setInterpolator(new BounceInterpolator());
                break;
            case R.id.btn_scale://缩放动画
                //以1为标准，比一小就变小，比1大就放大
                //ScaleAnimation参数：x开始的比例值，x结束的比例值，Y开始的比例值，Y结束的比例值，后面两个参数为缩放中心的坐标点
                animation = new ScaleAnimation(2f, 0.5f, 2f, 0.5f, iv_show.getWidth(), iv_show.getHeight());
                break;

        }

        //设置动画播放时间
        animation.setDuration(3000);
        //设置是否保存动画结束后的状态
        animation.setFillAfter(true);
        //不管点击那个动画，最终都要开启，开启动画
        iv_show.startAnimation(animation);
    }

    public void groupshow(View view) {//组合显示
        //分别创建要组合的动画
        RotateAnimation rotate = new RotateAnimation(0, 180f, iv_show.getWidth(), iv_show.getHeight());
        ScaleAnimation scale = new ScaleAnimation(2f, 0.5f, 2f, 0.5f, iv_show.getWidth(), iv_show.getHeight());
        //创建动画集合容器
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(scale);
        set.addAnimation(rotate);
        //设置动画播放时间
        set.setDuration(3000);
        //设置是否保存动画结束后的状态
        set.setFillAfter(true);
        //设置次数
        set.setRepeatCount(2);
        //设置重复模式
        set.setRepeatMode(Animation.RESTART);
        iv_show.startAnimation(set);

    }
}

属性动画

理解：指定一个开始的位置，再指定一个结束的位置，自动补充中间的变化过程
为了更好的演示，写了一个Demo，xml界面如下（最后有源码）

要介绍的有：
1.透明动画：alpha
2.位移动画：translationX，translationY
3.旋转动画：rotation
4.缩放动画：scaleX，scaleY
5.组合显示：AnimatorSet（动画集合容器）

1.透明动画：alpha

2.位移动画：translationX，translationY

3.旋转动画：rotation

4…缩放动画：scaleX，scaleY

5.组合显示：AnimatorSet（动画集合容器）

源码如下：
activity_third.xml文件：

<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:context=".ThirdActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_alpha"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="透明动画" />

        <Button
            android:id="@+id/btn_translate"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="位移动画" />

        <Button
            android:id="@+id/btn_rotate"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="旋转动画" />

        <Button
            android:id="@+id/btn_scale"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:text="缩放动画" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:onClick="groupshow"
        android:text="组合显示" />
</RelativeLayout>

ThirdActivity.java文件：

//属性动画
public class ThirdActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_alpha;
    private Button btn_translate;
    private Button btn_rotate;
    private Button btn_scale;
    private ImageView iv_show;
    ObjectAnimator objectAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        initView();
    }


    private void initView() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_translate = (Button) findViewById(R.id.btn_translate);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        iv_show = (ImageView) findViewById(R.id.iv_show);

        btn_alpha.setOnClickListener(this);
        btn_translate.setOnClickListener(this);
        btn_rotate.setOnClickListener(this);
        btn_scale.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        //ofFloat:三个参数 ：1.受到动画影响的对象（UI控件）2. 要执行的动画类型 3. 一组动画的属性
        switch (v.getId()) {
            case R.id.btn_alpha://透明动画
                objectAnimator = ObjectAnimator.ofFloat(iv_show, "alpha", 0.5f, 1f, 0.5f, 1f);
                break;
            case R.id.btn_translate://位移动画
                //只会执行一个
                objectAnimator = ObjectAnimator.ofFloat(iv_show, "translationX", 0, 200);
                //objectAnimator=ObjectAnimator.ofFloat(iv_show,"translationY",0,200);
                break;
            case R.id.btn_rotate://旋转动画
                objectAnimator = ObjectAnimator.ofFloat(iv_show, "rotation", 0, 90f, 180f, 90f, 45f, 100f);
                break;
            case R.id.btn_scale://缩放动画
                //只会执行一个
                objectAnimator = ObjectAnimator.ofFloat(iv_show, "scaleY", 1f, 2f, 3f, 4f);
                // objectAnimator=ObjectAnimator.ofFloat(iv_show,"scaleX",1f,2f,3f,4f);

                break;
        }
        //动画持续时间
        objectAnimator.setDuration(3000);
        //启动动画
        objectAnimator.start();

    }

    public void groupshow(View view) {//组合

        ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(iv_show, "scaleY", 1f, 2f, 1f, 2f);
        ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(iv_show, "scaleX", 1f, 2f, 1f, 2f);
        ObjectAnimator objectAnimator3 = ObjectAnimator.ofFloat(iv_show, "rotation", 0, 90f, 180f, 90f, 45f, 100f);
        //创建属性动画的集合容器
        AnimatorSet animatorSet = new AnimatorSet();
        //同时播放
        animatorSet.play(objectAnimator1).with(objectAnimator2).with(objectAnimator3);
        //按照顺序播放
        // animatorSet.play(objectAnimator1).after(objectAnimator2).after(objectAnimator3);

        /*
        * 另一种方式
        List<Animator> list=new ArrayList<>();
        list.add(objectAnimator1);
        list.add(objectAnimator2);
        list.add(objectAnimator3);
        animatorSet.playSequentially(list);//按照顺序播放
        animatorSet.playTogether(list);//同时执行
        */
        //设置时长
        animatorSet.setDuration(3000);
        //启动
        animatorSet.start();

    }
}
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Android Java 移动开发
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入