[Android] RotateAnimation 回転アニメーション

android.view.animation.Animationクラスを使って、

Viewを回転させるRotateAnimationです。
　

Android Studio
2021.2.1

RotateAnimation

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

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

XML attributes

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

interpolator：補間処理を行う
repeatCounter：繰り返し回数
fromDegrees：回転の開始角度[°]
toDegrees：回転の終了角度[°]
pivotX：回転軸のx座標
pivotY：回転軸のy座標
fillAfter：アニメーション終了時にviewをそのまま残す(true)
duration：アニメーションの期間[msec]

animフォルダーを作成してxmlファイルをres¥anim¥以下に配置します。
rotation.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:repeatCount="1"
    android:fromDegrees="0.0"
    android:toDegrees="360.0"
    android:pivotX="644"
    android:pivotY="644"
    android:fillAfter="true"
    android:duration="3000" />

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

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

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

android:repeatCount="1"

android:fromDegrees="0.0"

android:toDegrees="360.0"

android:pivotX="644"

android:pivotY="644"

android:fillAfter="true"

android:duration="3000" />

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 buttonFadeOut = findViewById(R.id.button);
        buttonFadeOut.setOnClickListener(view -> startRotationXml());
    }

    // xmlファイルにanimationを定義した場合
    private void startRotationXml() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotation);
        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 buttonFadeOut = findViewById(R.id.button);

buttonFadeOut.setOnClickListener(view -> startRotationXml());

}

// xmlファイルにanimationを定義した場合

private void startRotationXml() {

Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotation);

imageView.startAnimation(animation);

}

　
レイアウトです
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="#668"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/img"
        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="#668"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:src="@drawable/img"

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">a guy</string>
    <string name="button">Rotation</string>
</resources>

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

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

</resources>

コードで記述

　RotateAnimation

のConstructorは幾つかあります

RotateAnimation(Context context, AttributeSet attrs)
RotateAnimation(float fromDegrees, float toDegrees)
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

4番目が今回の場合使いやすそうです。

RotateAnimation
- float fromDegrees：回転の開始角度[°]
- float toDegrees：回転の終了角度[°]
- int pivotXType：回転軸x座標のタイプ
  - Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT
- float pivotXVal：回転軸のx座標（0->1.0）
- int pivotYType：回転軸y座標のタイプ
  - Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT
- float pivotYVal：回転軸のy座標（0->1.0）
setRepeatCount()：繰り返し回数
setDuration(msec)：アニメーションの期間[msec]
startAnimation()：アニメーションを開始
setAnimationListener()：リスナー登録してアニメーション終了のタイミングを取得し、画像を非表示あるいは表示させます。

pivotTypeの３種類は

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

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
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 buttonFadeOut = findViewById(R.id.button);
        buttonFadeOut.setOnClickListener(view -> startRotation());
    }


    private void startRotation() {

        // RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType,float pivotYValue)
        RotateAnimation rotate = new RotateAnimation(0.0f, 360.0f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);

        // animation時間 msec
        rotate.setDuration(3000);
        // 繰り返し回数
        rotate.setRepeatCount(1);
        // animationが終わったそのまま表示にする
        rotate.setFillAfter(true);

        //アニメーションの開始
        imageView.startAnimation(rotate);

    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.Animation;

import android.view.animation.RotateAnimation;

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 buttonFadeOut = findViewById(R.id.button);

buttonFadeOut.setOnClickListener(view -> startRotation());

}

private void startRotation() {

// RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType,float pivotYValue)

RotateAnimation rotate = new RotateAnimation(0.0f, 360.0f,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f);

// animation時間 msec

rotate.setDuration(3000);

// 繰り返し回数

rotate.setRepeatCount(1);

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

rotate.setFillAfter(true);

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

imageView.startAnimation(rotate);

}

　
レイアウトです
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="#668"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/img"
        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="#668"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:src="@drawable/img"

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">a guy</string>
    <string name="button">Rotation</string>
</resources>

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

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

</resources>

サンプル動画

実際は回転しているように見せているだけで、View自体の属性としては動いていません。この例のようにLinearLayoutにもかかわらずボタンと重なって見えるのはそのためでしょうか。
　
　
関連ページ：

References:
RotateAnimation
Animation Resources