Android 简单又炫酷的帧动画（加载动画）

最新推荐文章于 2025-06-02 11:00:11 发布

威威貓

最新推荐文章于 2025-06-02 11:00:11 发布

阅读量7.3k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： # 初级之路 Android 文章标签： Android帧动画

本文链接：https://blog.youkuaiyun.com/smile_Running/article/details/81327238

Android 同时被 2 个专栏收录

70 篇文章

订阅专栏

初级之路

17 篇文章

订阅专栏

本文介绍了一种简单的帧动画实现方法，通过逐帧播放图片序列来形成连续动画效果。文章详细讲解了从GIF图片分解到Android中具体实现的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。

本文首发于此博主：威威喵 | 博客主页：https://blog.youkuaiyun.com/smile_running

Android 提供了一种简单而好用的帧动画，所谓帧动画，就是一帧一帧的播放，你可以想象一下民国时期那种电影片的效果，它用的就是一帧一帧的播放，说白了就是一张一张图片的播放，若两张图片切换的时间间隔非常短的话，我们眼睛看上去就会形成一种连贯性的动画，这就是称为帧动画。

当然了，前面说到的帧动画，其实是播放一张张的图片。所以呢，我们做这个效果之前，肯定需要把一个图片序列材料给准备好。我可以提供一个我自己的制作方式，图片序列咱们不好搞，直接去搜那种动态 gif 的图片，然后我们用 gif 分解器，把这些动画分解成一张张图片即可。

好了，上面介绍了帧动画，还有如何制作素材。下面，我们来看看要实现的效果图吧。

这种帧动画在很多应用中都会有，比如美团的加载动画，京东的加载动画等等，上面的效果也就是我从网上搜罗来的一个 gif 图片，然后分解掉得来的，个人感觉这个有点可爱，傻傻的，哈哈，所以选了这个。

首先，第一步要导入我们的图片，不用多说了。接下来，在 res -> drawable 下面建立的 anim.xml 的资源文件，我们需要在此设置图片的序列及每一帧持续的时间。

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

    <item android:drawable="@drawable/load0" android:duration="50"/>
    <item android:drawable="@drawable/load1" android:duration="50"/>
    <item android:drawable="@drawable/load2" android:duration="50" />
    <item android:drawable="@drawable/load3" android:duration="50"/>
    <item android:drawable="@drawable/load4" android:duration="50"/>
    <item android:drawable="@drawable/load5" android:duration="50"/>
    <item android:drawable="@drawable/load6" android:duration="50"/>
    <item android:drawable="@drawable/load7" android:duration="50"/>
    <item android:drawable="@drawable/load8" android:duration="50"/>
    <item android:drawable="@drawable/load9" android:duration="50"/>
    <item android:drawable="@drawable/load10" android:duration="50"/>

    <item android:drawable="@drawable/load11" android:duration="50"/>
    <item android:drawable="@drawable/load12" android:duration="50"/>
    <item android:drawable="@drawable/load13" android:duration="50"/>
    <item android:drawable="@drawable/load14" android:duration="50"/>
    <item android:drawable="@drawable/load15" android:duration="50"/>
    <item android:drawable="@drawable/load16" android:duration="50"/>
    <item android:drawable="@drawable/load17" android:duration="50"/>
    <item android:drawable="@drawable/load18" android:duration="50"/>
    <item android:drawable="@drawable/load19" android:duration="50"/>
    <item android:drawable="@drawable/load20" android:duration="50"/>

    <item android:drawable="@drawable/load21" android:duration="50"/>
    <item android:drawable="@drawable/load22" android:duration="50"/>
    <item android:drawable="@drawable/load23" android:duration="50"/>
    <item android:drawable="@drawable/load24" android:duration="50"/>
    <item android:drawable="@drawable/load25" android:duration="50"/>
    <item android:drawable="@drawable/load26" android:duration="50"/>
    <item android:drawable="@drawable/load27" android:duration="50"/>
    <item android:drawable="@drawable/load28" android:duration="50"/>
    <item android:drawable="@drawable/load29" android:duration="50"/>
    <item android:drawable="@drawable/load30" android:duration="50"/>

    <item android:drawable="@drawable/load31" android:duration="50"/>
    <item android:drawable="@drawable/load32" android:duration="50"/>
    <item android:drawable="@drawable/load33" android:duration="50"/>
    <item android:drawable="@drawable/load34" android:duration="50"/>
    <item android:drawable="@drawable/load35" android:duration="50"/>
    <item android:drawable="@drawable/load36" android:duration="50"/>
    <item android:drawable="@drawable/load37" android:duration="50"/>
    <item android:drawable="@drawable/load38" android:duration="50"/>
    <item android:drawable="@drawable/load39" android:duration="50"/>
    <item android:drawable="@drawable/load40" android:duration="50"/>

    <item android:drawable="@drawable/load41" android:duration="50"/>
    <item android:drawable="@drawable/load42" android:duration="50"/>
    <item android:drawable="@drawable/load43" android:duration="50"/>
    <item android:drawable="@drawable/load44" android:duration="50"/>
    <item android:drawable="@drawable/load45" android:duration="50"/>
    <item android:drawable="@drawable/load46" android:duration="50"/>
    <item android:drawable="@drawable/load47" android:duration="50"/>
    <item android:drawable="@drawable/load48" android:duration="50"/>
    <item android:drawable="@drawable/load49" android:duration="50"/>
    <item android:drawable="@drawable/load50" android:duration="50"/>

    <item android:drawable="@drawable/load51" android:duration="50"/>
    <item android:drawable="@drawable/load52" android:duration="50"/>
    <item android:drawable="@drawable/load53" android:duration="50"/>
    <item android:drawable="@drawable/load54" android:duration="50"/>
    <item android:drawable="@drawable/load55" android:duration="50"/>
    <item android:drawable="@drawable/load56" android:duration="50"/>
    <item android:drawable="@drawable/load57" android:duration="50"/>
    <item android:drawable="@drawable/load58" android:duration="50"/>
    <item android:drawable="@drawable/load59" android:duration="50"/>
    <item android:drawable="@drawable/load60" android:duration="50"/>

    <item android:drawable="@drawable/load61" android:duration="50"/>
    <item android:drawable="@drawable/load62" android:duration="50"/>
    <item android:drawable="@drawable/load63" android:duration="50"/>
    <item android:drawable="@drawable/load64" android:duration="50"/>
    <item android:drawable="@drawable/load65" android:duration="50"/>
    <item android:drawable="@drawable/load66" android:duration="50"/>
    <item android:drawable="@drawable/load67" android:duration="50"/>
    <item android:drawable="@drawable/load68" android:duration="50"/>
    <item android:drawable="@drawable/load69" android:duration="50"/>
    <item android:drawable="@drawable/load70" android:duration="50"/>
    <item android:drawable="@drawable/load71" android:duration="50"/>

</animation-list>

我这里把那个 gif 图片分解了，里面居然是 70 几张图片合成的，算了，既然选择了你，还是得搞一下。不过这里得说明一下，不建议图片太多，10 张以内就好了，而且图片也别太大了，容易导致 oom 的出现，它这个帧动画是把图片一帧一帧的绘制出来的，而我们放入的是 ImageView 里面，没做优化处理的话，不太行。

接下来，在主布局里面放一个 ImageView，背景设置为我们刚刚创建的 anim.xml 文件

    <ImageView
        android:id="@+id/loading"
        android:layout_width="320dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@drawable/loading_anim" />

好了，到了这一步，它还是不会自动播放的。接下来，我们需要用代码开启动画效果，很简单

        ImageView loading = findViewById(R.id.loading);
        AnimationDrawable animationDrawable = (AnimationDrawable) loading.getBackground();
        animationDrawable.start();

我们拿到动画的实例，然后 start() 就好了，现在运行一下就会产生动画效果了。这里要注意一下，图片的序列千万别搞错了，不然动画会变成畸形的，错乱的。