[Android] AnimationSet アニメーションの組み合わせ

android.view.animation.Animationのクラスを使って、alpha, rotate, scale, translate のアニメーション効果を出せますが、これらを組み合わせたアニメーションをAnimationSetで作ることもできます。
　

Android Studio
2021.2.1

AnimationSet

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

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

XML attributes

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

animationの属性設定は<set />タグを使って以下のように設定します。今回はscaleとrotateを組み合わせてみます。

res\anim\animation_set.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <scale
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000" />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="120"
        android:toYScale="0.0"
        android:pivotX="0%p"
        android:pivotY="50%p"
        android:duration="2000" />
</set>

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

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

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

<scale

android:fromXScale="1.0"

android:toXScale="0.0"

android:fromYScale="1.0"

android:toYScale="0.0"

android:pivotX="50%"

android:pivotY="50%"

android:duration="2000" />

<rotate

android:fromDegrees="0"

android:toDegrees="120"

android:toYScale="0.0"

android:pivotX="0%p"

android:pivotY="50%p"

android:duration="2000" />

</set>

　
scale: viewの大きさを２秒かけて0にします。縮小はviewの中央座標で実行
rotate: ０から120まで２秒かけて回転させます。回転軸はparentの(0%, 50%)を中心に回転させます。
　

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;
    private Animation animation;

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

        imageView = findViewById(R.id.image_view);
        animation = AnimationUtils.loadAnimation(this, R.anim.animation_set);

        Button buttonFadeIn = findViewById(R.id.button);
        buttonFadeIn.setOnClickListener( v-> 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;

private Animation animation;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

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

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

buttonFadeIn.setOnClickListener( v-> 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:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:background="@drawable/ball"
        android:layout_margin="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button" />
</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:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:background="@drawable/ball"

android:layout_margin="40dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button" />

</LinearLayout>

　
strings.xml

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

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

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

</resources>

コードで記述

　
AnimationSetのConstructorの１つです。

AnimationSet(boolean shareInterpolator)

1	AnimationSet(boolean shareInterpolator)

boolean shareInterpolator：補間処理を共有(true)するか個別(false)にするかの選択
addAnimation(Animation a):rotateやscaleのアニメーションをsetに使いしていきます
　
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
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 = (ImageView)findViewById(R.id.image_view);

        Button buttonFadeIn = (Button)findViewById(R.id.button);
        buttonFadeIn.setOnClickListener(view -> setAnime());
    }

    private void setAnime(){
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        // animation時間 msec
        scaleAnimation.setDuration(2000);

        RotateAnimation rotate = new RotateAnimation(0.0f, 120.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.5f);
        // animation時間 msec
        rotate.setDuration(2000);

        AnimationSet animationSet = new AnimationSet( true );

        // animationSetにそれぞれ追加する
        animationSet.addAnimation( scaleAnimation );
        animationSet.addAnimation( rotate );

        imageView.startAnimation(animationSet);
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.Animation;

import android.view.animation.AnimationSet;

import android.view.animation.RotateAnimation;

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

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

buttonFadeIn.setOnClickListener(view -> setAnime());

}

private void setAnime(){

ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// animation時間 msec

scaleAnimation.setDuration(2000);

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

Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.5f);

// animation時間 msec

rotate.setDuration(2000);

AnimationSet animationSet = new AnimationSet( true );

// animationSetにそれぞれ追加する

animationSet.addAnimation( scaleAnimation );

animationSet.addAnimation( rotate );

imageView.startAnimation(animationSet);

}

　
レイアウト
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:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:background="@drawable/ball"
        android:layout_margin="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button" />
</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:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:background="@drawable/ball"

android:layout_margin="40dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button" />

</LinearLayout>

　
strings.xml

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

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

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

</resources>

サンプル動画

　
　
関連ページ：

android.view.animation
- AlphaAnimation フェードイン・フェードアウト
- RotateAnimation 回転アニメーション
- ScaleAnimation 拡大・縮小アニメーション
- TranslateAnimation 移動アニメーション
- AnimationSet アニメーションの組み合わせ
Property Animation 画像が回転して落ちていくアニメーション
AnimatorListenerAdapter によるAnimationの一時停止と再開くアニメーション
frame-by-frame Animation でパラパラアニメーション
TransitionDrawable クロスフェード animation

　
References:
AnimationSet
Animation Resources