[Android] TransitionDrawable クロス・フェード animation

LayerDrawable

の拡張で、first layerとsecond layerのクロスフェードをさせることができます。
　

Android Studio 3.5.3
API 29

cross-fade

　AlphaAnimation

ではAlpha値を変化させてfede in/out を実現していましたが、TransitionDrawableはfirst layerとsecond layerのcross-fade効果をImageViewに設定できます。
　

目次
1. TransitionDrawable
2. サンプルコード
3. サンプル動画

TransitionDrawable

最初の画像とフェード後の画像を２枚@drawableに配置
同じdrawableにtransitionを記述した下のようなxmlファイルも置きます。
　
animation.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cry"/>
    <item android:drawable="@drawable/smile"/>
</transition>

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

</transition>

　
レイアウトファイルでImageViewをセットして、その背景として先のanimation.xmlを設定します。（srcにするとエラーになります）
　

<ImageView
    android:id="@+id/image_view"
    android:background="@drawable/animation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/description"/>

<ImageView

android:id="@+id/image_view"

android:background="@drawable/animation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

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

ImageView imageView = findViewById(R.id.image_view);

TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getBackground();

// crossfade enable
transitionDrawable.setCrossFadeEnabled(true);

// start:アニメーションを開始
transitionDrawable.startTransition(int msec);

// reverse:逆にフェードする
transitionDrawable.reverseTransition(int msec);
        
// reset:最初の画像にリセット
transitionDrawable.resetTransition();

ImageView imageView = findViewById(R.id.image_view);

TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getBackground();

// crossfade enable

transitionDrawable.setCrossFadeEnabled(true);

// start:アニメーションを開始

transitionDrawable.startTransition(int msec);

// reverse:逆にフェードする

transitionDrawable.reverseTransition(int msec);

// reset:最初の画像にリセット

transitionDrawable.resetTransition();

サンプルコード

MainActivity.java

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.drawable.TransitionDrawable;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private TransitionDrawable transitionDrawable;

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

        ImageView imageView = findViewById(R.id.image_view);
        transitionDrawable = (TransitionDrawable) imageView.getBackground();
        // crossfade enable
        transitionDrawable.setCrossFadeEnabled(true);

        // animation start
        Button buttonStart = findViewById(R.id.button_start);
        buttonStart.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                transitionDrawable.startTransition(3000);
            }
        });

        // reverse
        Button buttonReverse = findViewById(R.id.button_reverse);
        buttonReverse.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                transitionDrawable.reverseTransition(1000);
            }
        });

        // reset
        Button buttonReset = findViewById(R.id.button_reset);
        buttonReset.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                transitionDrawable.resetTransition();
            }
        });
    }
}

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.graphics.drawable.TransitionDrawable;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private TransitionDrawable transitionDrawable;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ImageView imageView = findViewById(R.id.image_view);

transitionDrawable = (TransitionDrawable) imageView.getBackground();

// crossfade enable

transitionDrawable.setCrossFadeEnabled(true);

// animation start

Button buttonStart = findViewById(R.id.button_start);

buttonStart.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

transitionDrawable.startTransition(3000);

}

});

// reverse

Button buttonReverse = findViewById(R.id.button_reverse);

buttonReverse.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

transitionDrawable.reverseTransition(1000);

}

});

// reset

Button buttonReset = findViewById(R.id.button_reset);

buttonReset.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

transitionDrawable.resetTransition();

}

});

}

　
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:padding="16dp"
    android:background="#88f"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:background="@drawable/animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

    <LinearLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button_start"
            android:text="@string/start"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/button_reverse"
            android:text="@string/reverse"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/button_reset"
            android:text="@string/reset"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

    </LinearLayout>
</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:padding="16dp"

android:background="#88f"

android:orientation="vertical"

android:gravity="center"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:background="@drawable/animation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

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

<LinearLayout

android:layout_marginTop="20dp"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/button_start"

android:text="@string/start"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

<Button

android:id="@+id/button_reverse"

android:text="@string/reverse"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

<Button

android:id="@+id/button_reset"

android:text="@string/reset"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">Toko</string>
    <string name="start">Start</string>
    <string name="reverse">Reverse</string>
    <string name="reset">Reset</string>
</resources>

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

<string name="start">Start</string>

<string name="reverse">Reverse</string>

<string name="reset">Reset</string>

</resources>

サンプル動画

setCrossFadeEnabled(boolean)
これは設定した画像で効果が分からないことがあります。
trueの場合は、最初の画像が消えていきますが
falseにすると最初の画像も残ります。背景を透明にした２枚の画像ではそれが明確です。
　
　
関連ページ：

android.view.animation
Property Animation 画像が回転して落ちていくアニメーション
AnimatorListenerAdapter によるAnimationの一時停止と再開くアニメーション
frame-by-frame Animation でパラパラアニメーション
TransitionDrawable クロスフェード animation

References:
TransitionDrawable
LayerDrawable