Easy Tutorial
❮ Android Tutorial Xml Php Session Login ❯

8.4.1 Android Animation Collection: Frame Animation

Category Android Basic Tutorial

Introduction to This Section:

>

Starting from this section, we will explore animations in Android, as adding some animations to an APP will make our application very dazzling. For example, the simplest opening and closing of an Activity, of course, custom widget animations are definitely indispensable. Android animations are divided into three major categories: Frame Animation (Frame), Tween Animation (Tween), and Property Animation introduced after Android 3.0. This section will introduce the first type of animation - the basic usage of frame animation.


1. Concept and Usage of Frame Animation

>

Frame animation is very easy to understand. It is simply a collection of N static images, and then we control the display of these images in sequence. Due to the "persistence of vision" of the human eye, it will create an "illusion" of animation, which is the same principle as playing a movie!

In Android, to implement frame animation, we generally use a Drawable that was explained before: [AnimationDrawable]. First, write the Drawable, and then call start() and stop() in the code to start or stop playing the animation.

Of course, we can also create frame animations in Java code, create an AnimationDrawable object, and then call addFrame(Drawable frame, int duration) to add frames to the animation, and then call start() and stop().

Below, we will write two examples to experience the effect of frame animation and become familiar with the usage.


2. Usage Examples:

Example One: The Simplest Example:

Running Effect Picture :

Code Implementation :

First, write our animation file, very simple, first create an anim directory under res, and then start our animation file: miao_gif.xml: Here, android:oneshot sets whether the animation is played only once, true for only one play, false for loop playback!

<?xml version="1.0" encoding="utf-8"?>
&lt;animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@mipmap/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao3"
        android:duration="80" />
    <!--Due to space, other items are omitted, please add them yourself-->
    ...
</animation-list>

The animation file is ready, then to our layout file: activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stop" />

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="@anim/miao_gif" />

</LinearLayout>

Finally, our MainActivity.java, here to control the start and pause of the animation:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_start;
    private Button btn_stop;
    private ImageView img_show;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        anim = (AnimationDrawable) img_show.getBackground();
    }

    private void bindViews() {
        btn_start = (Button) findViewById(R.id.btn_start);
        btn_stop = (Button) findViewById(R.id.btn_stop);
        img_show = (ImageView) findViewById(R.id.img_show);
        btn_start.setOnClickListener(this);
        btn_stop.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_start:
                anim.start();
                break;
            case R.id.btn_stop:
                anim.stop();
                break;
        }
    }
}

Well, very simple, right?


Example Two: Play Frame Animation at a Specified Location

Running Effect Picture :

Code Implementation :

Still, let's start with public class MainActivity extends AppCompatActivity {

private FrameView fView;
private AnimationDrawable anim = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    FrameLayout fly = new FrameLayout(this);
    setContentView(fly);
    fView = new FrameView(this);
    fView.setBackgroundResource(R.anim.anim_zhuan);
    fView.setVisibility(View.INVISIBLE);
    anim = (AnimationDrawable) fView.getBackground();
    fView.setAnim(anim);
    fly.addView(fView);
    fly.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            //Set animation effect only when pressed
            if(event.getAction() == MotionEvent.ACTION_DOWN){
                anim.stop();
                float x = event.getX();
                float y = event.getY();
                fView.setLocation((int) y - 40,(int)x-20);  //Position where the View is displayed
                fView.setVisibility(View.VISIBLE);
                anim.start();    //Start animation
            }
            return false;
        }
    });
}

}


3. Download the sample code and Gif frame extraction tool for this section

AnimationDemo1.zip

AnimationDemo2.zip

Gif Frame Extraction Tool


Summary of this section:

>

Alright, this section introduced the simplest type of animation among Android's three types, which is not commonly used in actual development. But learning more can provide more ideas for the future~ Alright, that's it for this section, thank you~

-1.0 Android Basic Tutorial

-1.0.1 Latest Android Basic Tutorial Catalog for 2015

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial on Basic Operations of Local Repositories

-1.5.2 Git: Setting Up a Remote Repository with GitHub

-1.6 How to Play with 9-patch Images

-1.7 Interface Prototype Design

-1.8 Project Related Analysis (Various Files, Resource Access)

-1.9 Android Program Signing and Packaging

-1.11 Decompiling APK to Retrieve Code & Resources

-2.1 Concept of View and ViewGroup

-2.2.1 LinearLayout (Linear Layout)

-2.2.2 RelativeLayout (Relative Layout)

-2.2.3 TableLayout (Table Layout)

-2.2.4 FrameLayout (Frame Layout)

-2.2.5 GridLayout (Grid Layout)

-2.2.6 AbsoluteLayout (Absolute Layout)

-2.3.1 TextView (Text Box) Detailed Explanation

-2.3.2 EditText (Input Box) Detailed Explanation

-2.3.3 Button (Button) and ImageButton (Image Button)

-2.3.4 ImageView (Image View)

-2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)

-2.3.6 ToggleButton (Toggle Button) and Switch (Switch)

-2.3.7 ProgressBar (Progress Bar)

-[2.3

WeChat Follow

❮ Android Tutorial Xml Php Session Login ❯