preface

Drawable animation, the two most common forms of animation on Android, has a wide range of applications. It works in a similar way to early movies and GIFs. It takes an image and quickly switches it in order so that it looks like it’s moving.

Example, let’s look at the effect

​

You can obviously see that this is a GIF, but it’s not a GIF. It’s a GIF of eight separate images played continuously at 200ms intervals.

​

Implementation method

I’ll show you two ways to do it

  1. Add the implementation to the active code
  2. Create the animation-list resource file and reference it in the activity.

Add in the code

Add, as the name suggests, a collection of images to play, one by one, to an AnimationDrawable object, then add them to the imageView, and call the start() method to start playing.

Note: There is a OneShot() method that sets whether a loop is required, true for once and false for continuous loop.

        imageView_2 = findViewById(R.id.image_2);
        AnimationDrawable animationDrawable1 = new AnimationDrawable();
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_1 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_2 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_3 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_4 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_5 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_6 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_7 ),200);
        animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_8 ),200);
        animationDrawable1.setOneShot(true);
        imageView_2.setImageDrawable(animationDrawable1);
        animationDrawable1.start();Copy the code


Reference the resource file method

Method 1 has a serious drawback, is to add the animation to the control every time, but sometimes, a set of animation, we may need to use in many places.

If we use this method, we can wrap the animation in a resource file, and when we need to use it, we can add it as easily as adding the background image:

steps

  1. Create a file called abunation_list.xml in the /res/drawable folder
  2. In the active code, add it to the control as you would add an image resource
  3. It is retrieved from space and added to the AnimationDrawable object using the getDrawable method
  4. Call the start method to start the animation

Create the resource file as follows

<? xml version="1.0" encoding="utf-8"? > <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@drawable/iron_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_5"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_6"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_7"
        android:duration="200"/>
    <item
        android:drawable="@drawable/iron_8"
        android:duration="200"/>
</animation-list>
Copy the code

Add it to the ImageView

        imageView_1 = findViewById(R.id.image_1);
        imageView_1.setImageResource(R.drawable.abunation_list);
        AnimationDrawable animationDrawable = (AnimationDrawable) imageView_1.getDrawable();
        animationDrawable.start();Copy the code

Matters needing attention

Here are a few key points to keep in mind when using frame animation:

In my sample code, you can see that findViewById is added directly to the imageView object, but this can cause a serious problem. On some phones, if the onCreate method is not finished executing, The imageView object will not actually be instantiated, resulting in a NullPointException. The correct way to use it is to add it to the onResume method, which ensures that all controls are instantiated, depending on the activity cycle.

Second, we do not recommend to add too large pictures for animation and frame, because this will easily lead to OOM. We suggest that you use Drawable animation to do some operations such as loading animation and WiFi link animation, which occupy relatively small memory.

The Demo of the project:

Click the jump

Because the above is my own understanding, if you are wrong, welcome to leave a message in the comment section, thank you 🙏