Frame Animation of Android animation learning

In the previous section, we talked about tweening animation, and then we will learn frame-by-frame animation.

Frame-by-frame animation in Android is an animation effect produced by playing a series of still pictures in a certain order and speed. Of course, still pictures refer to frames, which are reflected in our code as pictures. ps: Insert a small concept here. A word that we often talk about when we play games or watch movies, the number of frames, actually refers to the number of frames played in 1 second, and fps is used to represent the picture transmission rate. Generally, movie playback is 24 frames, that is, 24 frames are played in one second, and the game has 30 frames to 60 frames or higher. A higher frame number means that the picture is smoother and there is no sense of stuttering.

It's useless to say more, code is king, let's implement frame-by-frame animation in Android, which is still divided into two ways:

xml

The definition of FrameAnimation is different from TweenAnimation. It is defined in the res/drawable directory. The usage is as follows:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@mipmap/anim_frame_1" android:duration="42"/>
    <item android:drawable="@mipmap/anim_frame_2" android:duration="42"/>
    ...
    <item android:drawable="@mipmap/anim_frame_27" android:duration="42"/>
    <item android:drawable="@mipmap/anim_frame_28" android:duration="42"/>
</animation-list>

It can be seen that it is actually a stack of pictures. The oneshot property refers to whether the animation is executed only once. If it is set to false, it means repeated execution. If it is set to true, it means that it will be executed once and then stopped. The item property is very simple, there are only two, drawable sets the frame, and duration sets the display time of the frame. Then the usage of this xml is also very simple. You can use this animation file as a drawable and set it to a certain view as the background, as follows:

<View
      android:id="@+id/view_anim_container"
      android:layout_margin="10dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/anim_list_match_man"/>

Then in Java code call:

private void init() {
    animContainer = findViewById(R.id.view_anim_container);
    animationDrawable = (AnimationDrawable) animContainer.getBackground();
}

/**
 * 开启动画
 */
protected void startAnim(View view) {
    animationDrawable.start();
}

/**
 * 停止动画
 */
protected void stopAnim(View view) {
    animationDrawable.stop();
}

It is very simple to use. Take out the Drawable and convert it to AnimationDrawable (a helper class for frame-by-frame animation). The commonly used methods of this class are start() to start the animation and stop() to stop the animation. The method of use is very simple, without going into details, the following is the implementation of pure java code:

Java

The way of pure java generation is also very simple, just write the code directly:

animationDrawable = new AnimationDrawable();
animationDrawable.addFrame(getResources().getDrawable(R.mipmap.anim_frame_28),42);
animationDrawable.addFrame(getResources().getDrawable(R.mipmap.anim_frame_27),42);
...
animationDrawable.addFrame(getResources().getDrawable(R.mipmap.anim_frame_2),42);
animationDrawable.addFrame(getResources().getDrawable(R.mipmap.anim_frame_1),42);
animContainer.setBackgroundDrawable(animationDrawable);//将动画设置给view

The opening method is the same as the above xml implementation, so I won't say more.

The effect of the realization is like the following picture, an animation of stickman fighting each other, the original picture is too long to fit, only a little bit is intercepted:

It can be seen that the java implementation is to arrange the animation frames in reverse order to achieve the effect of reverse playback.

ok, here we understand FrameAnimation, it's much simpler than Tween animation, isn't it? The code address is in github, welcome to download and view, shoot bricks~

See you~