【Android】中心点を基準に画像をズーム表示するスケールアニメーションの実装方法

本記事では、Androidアプリで画像を中心点（ピボット）を基準に拡大表示するスケールアニメーション（ズームアニメーション）を実装する方法を、実際のコード例とともにわかりやすく解説します。

ステップ1：新規プロジェクトの作成

Android Studioを起動し、メニューから「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力してプロジェクトをセットアップしてください。

ステップ2：レイアウトファイル（activity_main.xml）の編集

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">
    <Button
        android:id = "@+id/button"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "100dp"
        android:layout_width = "150dp"
        android:text = "Click"
        android:layout_height = "wrap_content"/>
    <ImageView
        android:id = "@+id/imageView"
        android:src = "@mipmap/ic_launcher_round"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent" />
</RelativeLayout>

このレイアウトでは、アニメーションを開始するためのButtonと、ズーム表示の対象となるImageViewを配置しています。ボタンをクリックすることで、画像のスケーリング（ズーム）アニメーションが再生されます。

ステップ3：MainActivity.java の実装

src/MainActivity.java に以下のコードを記述します。

package com.example.andy.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = findViewById(R.id.imageView);
        view.setVisibility(View.INVISIBLE);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                fade_in.setDuration(1000);
                fade_in.setFillAfter(true);
                view.startAnimation(fade_in);
            }
        });
    }
}

ポイント：ScaleAnimation の各パラメータの意味

ユーザーがボタンをクリックすると、以下のコードにより画像のスケールアニメーションが実行されます。

ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000);
fade_in.setFillAfter(true);
view.startAnimation(fade_in);

• 第1〜第4引数（0f → 1f）： X軸・Y軸それぞれの開始倍率から終了倍率を指定します。「0から1」への変化により、画像がゼロの大きさから本来のサイズまで拡大されます。
• 第5引数以降（RELATIVE_TO_SELF, 0.5f）： 変換の基準点（ピボット）を自分自身の中央＝50%の位置に設定しています。これにより、画像は左上ではなく中心を基準にズームインします。
• setDuration(1000)： アニメーションの所要時間を1000ミリ秒（1秒）に設定します。
• setFillAfter(true)： アニメーション終了後もその最終状態（拡大された状態）を維持します。

また、onCreate() 内で view.setVisibility(View.INVISIBLE) を呼び出しているため、起動直後の画像は非表示になり、ボタン操作でのみズームイン表示されます。

アプリの実行と動作確認

それではアプリを実行してみましょう。ここでは、実機のAndroidスマートフォンがPCに接続されていることを前提とします。Android Studioでプロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイス選択ダイアログでお使いのモバイル端末を選択すると、端末側に次のような初期画面が表示されます。

初期画面にはボタンのみが表示されています。このボタンをタップすると、下図のように画像が画面中央を基準にズームインしながらフェードイン表示されます。