【Android】画像をアニメーション表示するには

Android

■ はじめに

https://dk521123.hatenablog.com/entry/2013/09/28/013815

の関連記事で行っている「画像を表示する」ことを応用して、
画像をアニメーション表示する

■ アニメーションのタイプ

* 2種類ある

１）Tweenアニメーション
２）Frameアニメーション

１）Tweenアニメーション 

* 1つのイメージを連続に変化させる

２）Frameアニメーション 

* 順番にイメージを並べて表示してアニメーションにする

■ サンプル

Java

 * 以下の画像ファイルをを「res/drawable」に入れておく
    + 「bg.jpg」(背景画像)
    + 「cloud.png」(背景・雲の画像)
    + 「player1.png」～「player5.png」(アニメーション用画像)

GameView.java 

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        View view = new GameView(this);
        setContentView(view);
    }
}

MainActivity.java 

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class GameView extends View {
    private Bitmap backGround;
    private List<Bitmap> players;
    private int index;
    private int cloudX = 0;
    private int cloudY = 0;
    private int cloudVX = -2;
    Paint paint;
    public GameView(Context context) {
        super(context);

        // 画像読み込み
        Resources resources = this.getContext().getResources();
        this.backGround = BitmapFactory.decodeResource(resources, R.drawable.bg);
        this.cloud = BitmapFactory.decodeResource(resources, R.drawable.cloud);
        this.players = new ArrayList<>();
        this.players.add(BitmapFactory.decodeResource(resources, R.drawable.player1));
        this.players.add(BitmapFactory.decodeResource(resources, R.drawable.player2));
        this.players.add(BitmapFactory.decodeResource(resources, R.drawable.player3));
        this.players.add(BitmapFactory.decodeResource(resources, R.drawable.player4));
        this.players.add(BitmapFactory.decodeResource(resources, R.drawable.player5));
        this.paint = new Paint();
        this.index = 0;
    }

    @Override
    public void onDraw(Canvas canvas) {
        this.backGround = Bitmap.createScaledBitmap(this.backGround,
                canvas.getWidth() * 2, canvas.getHeight(), true);
        canvas.drawBitmap(this.backGround, 0, 0, this.paint);

        // 画面(Canvas)中央のX座標を取得
        int canvasX = canvas.getWidth() / 2;
        // 画面(Canvas)中央のY座標を取得
        int canvasY = canvas.getHeight() / 2;

        // 雲の座標を「cloudVX」ずつ移動する
        this.cloudX += this.cloudVX;
        // 全体が画面から消える場合
        if (this.cloudX < -this.cloud.getWidth()) {
            this.cloudX = canvas.getWidth();
            this.cloudY = (int) Math.floor(Math.random() * canvasCY);
        }
        canvas.drawBitmap(this.cloud, this.cloudX, this.cloudY, this.paint);

        if (this.index >= this.players.size()) {
            this.index = 0;
        }
        Bitmap player = this.players.get(this.index);
        int x = this.canvasX - player.getWidth() / 2;
        int y = this.canvasY - player.getHeight() / 2;
        canvas.drawBitmap(player, this.x, this.y, this.paint);
        this.index++;

        // ループ処理
        this.invalidate();

        // スリープ処理
        try {
            Thread.sleep(10);
        } catch (InterruptedException e) {
        }
    }
}

参考文献

http://boco.hp3200.com/game-devs/view/3.html
http://techbooster.jpn.org/andriod/ui/2018/

関連記事

画像を表示するには
https://dk521123.hatenablog.com/entry/2013/09/28/013815