[Android] ScaleAnimation 拡大・縮小アニメーション

android.view.animation.Animationのクラスを使って、Viewを拡大したり縮小したりするScaleAnimationを簡単に組むことができます。
　

Android Studio
2021.2.1

ScaleAnimation

Viewにアニメーションを施したいときはこのAnimationが簡単です。ただし途中で止めるなど込み入ったことはできません。Property Animation 等を使いましょう。
　
設定方法は２通りあります。
　

目次
1. XML attributes
2. コードで記述
3. サンプル動画

XML attributes

res以下にanimというフォルダーを作成してxmlファイルを置きます。

animationの属性設定は<scale />タグを使って以下のように設定します。

fromXScale：開始時のxスケールサイズ（1.0で表示画像のまま）
toXScale：終了時のxスケールサイズ
fromYScale：開始時のyスケールサイズ（1.0で表示画像のまま）
toYScale：終了時のyスケールサイズ
pivotX：スケール時のx座標（50%がview中央値）
pivotY：スケール時のy座標（50%がview中央値）
fillAfter：アニメーション終了時にそのままにする(true)
duration：アニメーション期間[msec]

res\anim\scale_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="4.0"
    android:fromYScale="1.0"
    android:toYScale="4.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="true"
    android:duration="2000" />

<?xml version="1.0" encoding="utf-8"?>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

android:fromXScale="1.0"

android:toXScale="4.0"

android:fromYScale="1.0"

android:toYScale="4.0"

android:pivotX="50%"

android:pivotY="50%"

android:fillAfter="true"

android:duration="2000" />

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

android:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:src="@drawable/ball"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_marginTop="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

scalingしたいImageViewに画像を設定します。
　

Android Studioのmipmapから持ってくることでも可能

    <ImageView
        android:id="@+id/image_view"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

<ImageView

android:id="@+id/image_view"

android:src="@mipmap/ic_launcher"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">ball</string>
    <string name="button">Scale</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="button">Scale</string>

</resources>

　
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(v -> startScalingXml());
    }

    private void startScalingXml(){
        Animation animation = AnimationUtils.loadAnimation(this,
                R.anim.scale_animation);
        imageView.startAnimation(animation);
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Button button = findViewById(R.id.button);

button.setOnClickListener(v -> startScalingXml());

}

private void startScalingXml(){

Animation animation = AnimationUtils.loadAnimation(this,

R.anim.scale_animation);

imageView.startAnimation(animation);

}

コードで記述

　ScaleAnimation

のConstructorは幾つかありますが、今回使いやすいのはこれです。

ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

1	ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

ScaleAnimation
- float fromX：開始時のxスケールサイズ（1.0で表示画像のまま）
- float toX：終了時のxスケールサイズ
- float fromY：開始時のyスケールサイズ（1.0で表示画像のまま）
- float toY：終了時のyスケールサイズ
- int pivotXType：x座標のタイプ
  - Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT
- float pivotXVal：スケール時のx座標（0.5fがview中央値）
- int pivotYType：y座標のタイプ
  - Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT
- float pivotYVal：スケール時のy座標（0.5fがview中央値）
setRepeatCount()：繰り返し回数
setDuration(msec)：アニメーションの期間[msec]
startAnimation()：アニメーションを開始
setFillAfter(true)：アニメーション終了時にViewをそのままにする

pivotTypeの３種類は

Animation.ABSOLUTE：240 のようなpixel絶対値
Animation.RELATIVE_TO_SELF：自分のサイズの割合、0.5fが画像の中心
Animation.RELATIVE_TO_PARENT：parentサイズの割合、0.5fが画面中心

MainActivity.java

//package your.package.name;

package com.example.testscaleanimationcode;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(v -> startScaling());
    }

    private void startScaling(){
        // ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
        ScaleAnimation scaleAnimation = new ScaleAnimation(
                1.0f, 4.0f, 1.0f,4.0f,
                Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        // animation時間 msec
        scaleAnimation.setDuration(2000);
        // 繰り返し回数
        scaleAnimation.setRepeatCount(0);
        // animationが終わったそのまま表示にする
        scaleAnimation.setFillAfter(true);
        //アニメーションの開始
        imageView.startAnimation(scaleAnimation);
    }
}

//package your.package.name;

package com.example.testscaleanimationcode;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.Animation;

import android.view.animation.ScaleAnimation;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Button button = findViewById(R.id.button);

button.setOnClickListener(v -> startScaling());

}

private void startScaling(){

// ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

ScaleAnimation scaleAnimation = new ScaleAnimation(

1.0f, 4.0f, 1.0f,4.0f,

Animation.RELATIVE_TO_SELF,

0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// animation時間 msec

scaleAnimation.setDuration(2000);

// 繰り返し回数

scaleAnimation.setRepeatCount(0);

// animationが終わったそのまま表示にする

scaleAnimation.setFillAfter(true);

//アニメーションの開始

imageView.startAnimation(scaleAnimation);

}

　
レイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

android:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:src="@drawable/ball"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_marginTop="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">ball</string>
    <string name="button">Scale</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="button">Scale</string>

</resources>