Androidアニメーション集フレームアニメーション


このセクションの紹介:

このセクションから始めて、Android のアニメーションについて説明します。結局のところ、APP にいくつかのアニメーションを追加すると、アプリケーションは次のようになります。 たとえば、最も簡単な方法は、アクティビティをオンまたはオフにすることです。もちろん、カスタム コントロール アニメーションは不可欠です。Android ではアニメーションも必要です。 このセクションは、フレームごとのアニメーション (Frame) トゥイーン アニメーション (Tween) 、および Android 3.0 以降に導入された プロパティ アニメーション (Property) の 3 つの主要なカテゴリに分かれています。あなたは、最初のタイプのアニメーション - フレームごとのアニメーションの基本的な使い方~1.gif


1. フレームアニメーションの概念と使い方

実際、それは非常に簡単です。 N 枚の静止画像のコレクションを渡すと、コントロールが順番に表示されます これらの写真は、人間の目の「視覚的残留物」により、映画を上映する原理と同じように、アニメーションの「錯覚」を私たちに与えてくれます。

Android でフレーム アニメーションを実装するには、通常、前に説明した Drawable を使用します:

AnimationDrawableまず Drawable を記述し、次にコード内で start() と stop() を呼び出してアニメーションの再生を開始または停止します~

Ofもちろん、Java コードでフレームごとのアニメーションを作成し、AnimationDrawable オブジェクトを作成して、 addFrame(Drawable Frame, int period) はアニメーションにフレームを追加し、start() と stop() を呼び出します~

フレーム アニメーションの効果を体験し、その使用法に慣れるために 2 つの例を書いてみましょう


2使用例:

例 1: 最も単純な例:

レンダリングの実行:

2.gif

コード実装:

まずアニメーションファイルを作成します。非常に簡単です。まず、res の下に作成します。 anim ディレクトリを作成し、再生を開始しました。 アニメーション ファイル:

miao_gif.xml: ここの android:oneshot は、アニメーションを 1 回だけ再生するかどうかを設定します。true は 1 回だけ再生され、false はループで再生されます。

<?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/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao3"
        android:duration="80" />
    <!--限于篇幅,省略其他item,自己补上-->
    ...</animation-list>

アニメーション ファイルがそこにあるので、レイアウト ファイルに移動します:

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="开始" />

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

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

最後に、

MainActivity.java、ここでアニメーションの開始と一時停止を制御します:

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;
        }
    }
}

わかりました、とてもシンプル~


例 2: 指定した場所でフレーム アニメーションを再生する

レンダリングを実行する:

3.gif

コード実装:

最初にアニメーション ファイルをアップロードします:

anim_zhuan.xml :

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@mipmap/img_zhuan1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_zhuan2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_zhuan3"
        android:duration="80" />
     <!--限于篇幅,省略其他item,自己补上-->
    ...</animation-list>

次に、カスタム ImageView:

FrameView.java を作成しましょう。ここでは、現在再生されているフレームがリフレクションを通じて取得されます。 それが最後のフレームであるかどうか、そうであればコントロールを非表示にします。

/**
 * Created by Jay on 2015/11/15 0015.
 */
public class FrameView extends ImageView {

    private AnimationDrawable anim;

    public FrameView(Context context) {
        super(context);
    }

    public FrameView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FrameView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setAnim(AnimationDrawable anim){
        this.anim = anim;
    }

    public void setLocation(int top,int left){
        this.setFrame(left,top,left + 200,top + 200);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try{
            //反射调用AnimationDrawable里的mCurFrame值
            Field field = AnimationDrawable.class
                    .getDeclaredField("mCurFrame");
            field.setAccessible(true);
            int curFrame = field.getInt(anim);// 获取anim动画的当前帧
            if (curFrame == anim.getNumberOfFrames() - 1)// 如果已经到了最后一帧
            {
                //让该View隐藏
                setVisibility(View.INVISIBLE);
            }
        }catch (Exception e){e.printStackTrace();}
        super.onDraw(canvas);
    }
}

最後はMainActivity.javaで、FrameLayoutを作成し、Viewを追加して、タッチイベントを押します イベントを処理し、コントロールを表示し、アニメーションを開始します~

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) {
                //设置按下时才产生动画效果
                if(event.getAction() == MotionEvent.ACTION_DOWN){
                    anim.stop();
                    float x = event.getX();
                    float y = event.getY();
                    fView.setLocation((int) y - 40,(int)x-20);  //View显示的位置
                    fView.setVisibility(View.VISIBLE);
                    anim.start();    //开启动画
                }
                return false;
            }
        });
    }
}

これも非常に簡単です~


3. このセクションのサンプル コードと Gif フレーム抽出ツールをダウンロードします

AnimationDemo1.zip

AnimationDemo2.zip

Gif Frame抽出ツール


このセクションの概要:

さて、このセクションでは、Android の 3 つのアニメーションの中で最も単純なフレーム アニメーションを紹介します。実際の開発ではあまり使用されません。 でも、もっと学べば、将来もっとアイデアが湧いてくるでしょう~はい、このセクションはここまでです、ありがとう~