[Android] setCustomAnimationsで画面遷移アニメーションを設定する-Androidアプリ個人開発者の実践的アドバイス集

アクティビティやフラグメントの切り替え時に、スライドイン/スライドアウトやフェードイン/フェードアウトといったアニメーションを設定することができます。
  
これにより、画面遷移をしたことがわかりやすくなるので、複数の画面遷移があるアプリにおいて特に有用です。
  
## フラグメントでの画面遷移アニメーション
  
フラグメントで画面遷移アニメーションを追加するには、トランザクションを`.commit`する前に`setCustomAnimations`でアニメーションの設定をします。
  
以下がkotlinでのコード例です。
  
```kotlin
val transaction = parentFragmentManager.beginTransaction()
transaction.setCustomAnimations(
    R.anim.enter_animation,
    R.anim.exit_animation,
    R.anim.pop_enter_animation,
    R.anim.pop_exit_animation 
)
...
  
transaction.commit()  
```
.setCustomAnimationsは以下の4つの引数を受け取ります。アニメーションを適用しない場合は0を指定します。
  
- enter: 遷移先フラグメントが画面に現れる際のアニメーションを指定します。
- exit: 遷移元フラグメントが画面から出る際のアニメーションを指定します。
- popEnter: 戻る操作によりフラグメントが再表示される際のアニメーションを指定します。（popBackStack対応）
- popExit: 戻る操作により現在のフラグメントが画面から出る際のアニメーションを指定します。（popBackStack対応）

## res/animフォルダにXMLを作成
  
アニメーションの動作は、XMLで設定します。
  
先ほどのコード例で、`R.anim.*`を.setCustomAnimationsの引数に指定しました。これらのリソースファイルを作成します。
  
以下は、各リソースファイルの例です。これらのファイルでは、画面遷移時のX軸方向へのスライドイン/スライドアウトとフェードイン/フェードアウトのアニメーションを定義しています。
  
* enter_animation.xml
  
```xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>
```
<br>
  
* exit_animation.xml
  
```xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="-100%" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>
```
<br>
  
* pop_enter_animation.xml
  
```xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:toXDelta="0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>
```
<br>  
  
* pop_exit_animation.xml
  
```xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="100%" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>
```
  
<br>
  
最初に示した`enter_animation.xml`を例として、`translate`要素と`alpha`要素で定義された内容の説明をします。
  
### enter_animation.xml内のtranslate要素

- `android:duration`: アニメーションの実行時間をミリ秒単位で指定。（enter_animationの場合、300ミリ秒（0.3秒）に設定。）
- `android:fromXDelta`: X軸方向の開始位置を指定。enter_animationの場合、画面の右端から開始（100%）。
- `android:toXDelta`: X軸方向の終了位置を指定。enter_animationの場合、画面の左端まで移動（0）。

### enter_animation.xml内のalpha要素

- `android:duration`: アニメーションの実行時間をミリ秒単位で指定。（enter_animationの場合、300ミリ秒（0.3秒）に設定。）
- `android:fromAlpha`: 開始時の透明度を指定します。enter_animationの場合、完全に透明な状態から開始（0.0）。
- `android:toAlpha`: 終了時の透明度を指定します。enter_animationの場合、完全に不透明な状態になります（1.0）。
  
  
つまり、enter_animation.xmlの定義では、フラグメントが画面にスライドインしながら徐々に表示される効果が得られます。X軸方向に移動しながら透明度が徐々に増加し、最終的にフラグメントが完全に表示されます（フェードイン）。

## 最後に
  
XDeltaだけでなく、YDeltaを調整すれば上下の動きもできますし、durationを変えればアニメーション速度を変えることも可能です。色々試してみてください。

[Android] setCustomAnimationsで画面遷移アニメーションを設定する

0 件のコメント:

コメントを投稿

このブログを検索

ラベル

自己紹介

人気の投稿

不正行為を報告

リリースしたAndroidアプリ