Android 帧动画 xml 方式实现

傷城~ 2023-10-07 16:22 92阅读 0赞

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

将一组动作相近的图片组合在一起，然后按照一定的时间来播放，就会形成一个动画，我们可以称之为帧动画。

在这里插入图片描述

在 Android 中可通过结合 xml 的方式来轻松实现。

1 创建 xml 动画文件

在 Android 项目工程中的 drawable 目录下创建动画文件，如我这里创建的 loading.xml
在这里插入图片描述
如以下4张静态图

图片 ani_1 :
在这里插入图片描述
图片 ani_2:
在这里插入图片描述
图片 ani_3:
在这里插入图片描述
图片 ani_4:
在这里插入图片描述

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:oneshot="false"
  4. >
  5.     <item
  6.         android:drawable="@mipmap/ani_1"
  7.         android:duration="800" />
  8.     <item
  9.         android:drawable="@mipmap/ani_2"
  10.         android:duration="800" />
  11.     <item
  12.         android:drawable="@mipmap/ani_3"
  13.         android:duration="800" />
  14.     <item
  15.         android:drawable="@mipmap/ani_4"
  16.         android:duration="800" />
  17.     <item
  18.         android:drawable="@mipmap/ani_5"
  19.         android:duration="800" />
  20.     <item
  21.         android:drawable="@mipmap/ani_6"
  22.         android:duration="800" />
  23.     <item
  24.         android:drawable="@mipmap/ani_7"
  25.         android:duration="800" />
  26.     <item
  27.         android:drawable="@mipmap/ani_8"
  28.         android:duration="800" />
  29. </animation-list>

设置android:oneshot属性为true,表示此次动画只执行一次，最后停留在最后一帧。设置为false则动画循环播放。文件可以添加为Image背景，触发的时候播放。

2 加载使用

在你的 Activity 中，直接将这个动画文件使用一个 ImageView 来加载显示，代码如下：

  1. public class MainActivity extends AppCompatActivity {
  4.     @Override
  5.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  10.         ImageView lImageView = findViewById(R.id.imageview);
  11.         //设置图片
  12.         lImageView.setImageResource(R.drawable.loading);
  13.         //动
  14.         AnimationDrawable lAnimationDrawable = (AnimationDrawable) lImageView.getDrawable();
  16.         lAnimationDrawable.start();
  18.     }
  19. }

动起来的效果是这样的

在这里插入图片描述

3 聊一聊 AnimationDrawable

Drawable animation可以加载Drawable资源实现帧动画。AnimationDrawable是实现Drawable animations的基本类

有时 调用了 AnimationDrawable.start方法来启动动画，但是并没有出现效果。

3.1 使用 ViewTreeObserver
  1. ViewTreeObserver.OnPreDrawListener lOnPreDrawListener=new ViewTreeObserver.OnPreDrawListener(){
  3.     @Override
  4.     public boolean onPreDraw() {
  6.         lAnimationDrawable.start();
  7.         return true; //注意此行返回的值
  8.     }
  9. };
  11. //绑定视图观察者
  12. lImageView.getViewTreeObserver().addOnPreDrawListener(lOnPreDrawListener);
3.2 使用 RunAnim
  1. public class MainActivity extends AppCompatActivity {
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.activity_main);
  12.         start3();
  13.     }
  15.     private AnimationDrawable mAnimationDrawable;
  17.     public void start3() {
  19.         ImageView lImageView = findViewById(R.id.imageview);
  20.         //设置图片
  21.         lImageView.setImageResource(R.drawable.loading);
  22.         //动
  23.         mAnimationDrawable = (AnimationDrawable) lImageView.getDrawable();
  25.         RunAnim runAnim = new RunAnim();
  26.         runAnim.execute("");
  29.     }
  31.     class RunAnim extends AsyncTask<String, String, String> {
  33.         @Override
  34.         protected String doInBackground(String... params) {
  36.             if (!mAnimationDrawable.isRunning()) {
  38.                 mAnimationDrawable.stop();
  39.                 mAnimationDrawable.start();
  40.             }
  41.             return "";
  42.         }
  43.     }
  44. }
3.3 在 Activity 的 onWindowFocusChanged 中调用
  1. @Override
  2. public void onWindowFocusChanged(boolean hasFocus)
  3. {
  5.     mAnimationDrawable.start();
  6.     super.onWindowFocusChanged(hasFocus);
  7. }

完毕

源码在这里

发表评论

表情：
评论列表 （有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android 帧动画 xml 方式实现

    > 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就

    傷城~傷城~/ 0 赞/ 93 阅读

    相关 Android 逐帧动画&补间动画

    在Android开发中，有的时候为了展示更好的UI效果，通常会通过给一些UI添加动画来达到这一目的，所以Android Api定义了两种动画的Api供开发者使用：逐帧动画和补间

    怼烎@怼烎@/ 0 赞/ 398 阅读