My Android Development Journey (part 4) : A shallow entry frame animation of three Android animation effects

1. Introduction

Android animation is divided into three categories: View animation, frame animation and property animation. View animation was covered in my previous blog post, My Android Development Journey (Part 2) : A Brief Introduction to View Animation, which focused on the basic properties of View animation and how to use it. This article will focus on frame animation for Android animation.

2. The frame animation

Frame animation is one of the most simple to achieve the original three Android animation, with a child to see the flip book is a principle, by a number of similar pictures in a short period of time to play continuously, so as to simulate the dynamic animation effect.

3. How to use it

3.1 AnimationDrawable

AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable AnimationDrawable

xml	java	role
android:oneshot=”true | false”	setOneShot(boolean oneShot)	Set whether to play once. True indicates that the game is played only once. False indicates that the game is played in a loop
There is no	addFrame(Drawable frame, int duration)	Add a picture frame. Frame indicates the image resource, duration indicates the duration, in ms
There is no	start()	Start playing
There is no	stop()	Stop playing
There is no	isRunning()	Determine whether it is playing

3.2 Xml implementation

First of all, prepare several pictures to achieve frame animation, here I use 8 pictures of the fan, image resource link: extract code: 4DXW

Next, put the image in the project directory res/drawable and create a drawable Resource File named fan_im.xml in the same directory.

Note: When creating Drawable Resource File, change the Root element to animation-list

Add images to fan_im.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/f1"
        android:duration="100" />
    <item
        android:drawable="@drawable/f2"
        android:duration="100" />
    <item
        android:drawable="@drawable/f3"
        android:duration="100" />
    <item
        android:drawable="@drawable/f4"
        android:duration="100" />
    <item
        android:drawable="@drawable/f5"
        android:duration="100" />
    <item
        android:drawable="@drawable/f6"
        android:duration="100" />
    <item
        android:drawable="@drawable/f7"
        android:duration="100" />
    <item
        android:drawable="@drawable/f8"
        android:duration="100" />
</animation-list>
Copy the code

With animation resources, you also need to have a host view to display the graphic, typically hosted by an ImageView. Open the activity_main. XML file and add an ImageView as follows:

<androidx.constraintlayout.widget.ConstraintLayout .>

    <ImageView
        android:id="@+id/imgFan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/fan_anim" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

To launch the animation in a Java file, do the following:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imgFan = findViewById(R.id.imgFan); AnimationDrawable drawable = (AnimationDrawable) imgFan.getDrawable(); drawable.start(); }}Copy the code

The running effect is as follows:

3.3 Java implementation

After placing the image in the res/drawable directory, go back to the activity_main.xml file and add an ImageView.

The code is as follows:

<androidx.constraintlayout.widget.ConstraintLayout .>

    <ImageView
        android:id="@+id/imgFan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/f1" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Modify the mainActivity. Java file with the following code:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imgFan = findViewById(R.id.imgFan);
        AnimationDrawable drawable = new AnimationDrawable();
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f1), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f2), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f3), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f4), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f5), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f6), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f7), 50);
        drawable.addFrame(ContextCompat.getDrawable(getApplicationContext(), R.drawable.f8), 50);
        drawable.setOneShot(false); imgFan.setImageDrawable(drawable); drawable.start(); }}Copy the code

The effect is the same as XML, no images.

4. Fade in and out animation

The frame display mode of frame animation is to use the latter frame to directly cover the previous frame, which is not a problem in the case of fast playback, but if the time interval of each frame is long, the switch between the two frames will be very rough and stiff, which makes people feel uncomfortable. To solve this problem, we provide a TransitionDrawable class to handle the gradient between two images, i.e. fade in and out. The usual method of TransitionDrawable is as follows:

java	role
TransitionDrawable(Drawable[] layers)	Specifies an array of images to transition. The array size must be 2
startTransition(int durationMillis)	To start, durationMillis indicates the interval, in milliseconds
resetTransition()	reset
reverseTransition()	Reverse execution

Start by placing an ImageView on the main screen and modifying mainActivity. Java as follows:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imgFan = findViewById(R.id.imgFan);
        // If there are more than two elements in the array, only the first two elements are displayed
        Drawable[] drawables = {
                ContextCompat.getDrawable(this, R.drawable.pic1),
                ContextCompat.getDrawable(this, R.drawable.pic2),
        };
        TransitionDrawable drawable = new TransitionDrawable(drawables);
        imgFan.setImageDrawable(drawable);
        drawable.startTransition(3000); }}Copy the code

Operation effect:

The end of the 5.

Frame animation is easy to use, but it is easy to cause OOM (memory overruns). When the image size is too large and excessive, the system will read all the images into memory according to the order of each definition, and the system reads the images in the form of Bitmap, so it leads to OOM. So when using frame animation, try to avoid using too many large pictures.

Finally, I wrote a little gadget. When I remembered to learn frame animation at the beginning of 18 years, I wrote a small fan with adjustable gear position. At that time, it was a very hot summer, and I could see the program running, and I could feel a breeze across the screen

Source code: Gitee