Activity遷移時アニメーションをつけてみる

今回エンジニアブログを担当させて頂きます佐藤です。

最近、Androidでアクティビティの遷移時にアニメーションをさせることができるのを知ったのでそのことについて書いていこうと思います！

アクティビティの遷移時、intentを使って別のアクティビティを呼び出します。
startActivityForResultを呼び出した後、overridePendingTransitionを呼びます。

このoverridePendingTransitionで画面遷移時のアニメーションを設定します。
overridePendingTransitionの引数には(登場するアクティビティのアニメーション,退場するアクティビティのアニメーション)を指定します。

アニメーションの設定はそれぞれxmlで指定していきます。

実際に色々試してみました！

◆MainActivity.java

public class MainActivity extends Activity {
  private static final int RESULTCODE = 1;
  private Context mContext;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mContext = getApplicationContext();
    setContentView(R.layout.activity_main);

    Button button = (Button) findViewById(id.button);
    button.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {

        // ボタンのクリック処理  
        Intent intent = new Intent(mContext, NextActivity.class);
        startActivityForResult(intent, RESULTCODE);
        // アニメーションの設定  
        overridePendingTransition(R.anim.in_right, R.anim.out_left);
      }
    });
  }

  // 遷移先から戻ってくるとここに入る  
  public void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == RESULTCODE) {
      if (resultCode == RESULT_OK) {
      }
    }
  }

}

ボタンを押すと別のアクティビティへ遷移します

遷移先
◆NextActivity.java

public class NextActivity extends Activity{
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.next_main);
  }

}

◆in_right.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromXDelta="100%p" android:toXDelta="0"  
             android:duration="1000" />

  <alpha android:fromAlpha="0.0" android:toAlpha="1.0"  
         android:duration="1000" />

</set>

◆out_left.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromXDelta="0" android:toXDelta="-100%p"  
             android:duration="1000" />

  <alpha android:fromAlpha="1.0" android:toAlpha="0.0"  
         android:duration="1000" />

</set>

このサンプルコードは左へ退場、右から登場するアニメーションとなっております。
fromXDeltaとtoXDeltaの値を入れ替えれば逆パターンもできます。

◆in_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromYDelta="100%p" android:toYDelta="0"  
             android:duration="1000" />

  <alpha android:fromAlpha="0.0" android:toAlpha="1.0"  
         android:duration="1000" />

</set>

◆out_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromYDelta="0" android:toYDelta="-100%p"  
             android:duration="1000" />

  <alpha android:fromAlpha="1.0" android:toAlpha="0.0"  
         android:duration="1000" />

</set>

このサンプルでは上へ退場、下から登場するアニメーションになっています。
fromYDeltaとtoYDeltaの値を指定しています。

◆in_lower_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromYDelta="-100%p" android:fromXDelta="-100%p"  
             android:toYDelta="0" android:toXDelta = "0"  
             android:duration="1000" />

  <alpha android:fromAlpha="0.0" android:toAlpha="1.0"  
         android:duration="1000" />

</set>

◆out_upper_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:interpolator="@android:anim/accelerate_interpolator">

  <translate android:fromYDelta="0" android:fromXDelta="0"  
             android:toYDelta="-100%p" android:toXDelta = "-100%p"  
             android:duration="1000" />

  <alpha android:fromAlpha="1.0" android:toAlpha="0.0"  
         android:duration="1000" />

</set>

最後に、斜め上に退場し、斜め上から登場する入れ替わるようなアニメーションを作ってみました
こちらではfromXDelta toXDelta、fromYDelta toYDeltaを指定してあります。

今回では移動アニメーションを紹介してきましたが、アルファ値等も指定できるようなので色々なことができるんだなと思いました！
またたくさん試してかっこ良く画面遷移をしてみたいです！

Activity遷移時アニメーションをつけてみる

採用情報