メインコンテンツまでスキップ

Kotlin Android Activity Transition Animationの例

モダンなアプリを作るには、アクティビティにトランジションアニメーションを使用するとよいでしょう。Android Frameworkでは、アクティビティを開いたり終了したりする際に、なめらかなアニメーションの遷移を誘導する機能があります。この記事では、そのようなトランジションを組み込む方法を見ていきたいと思います。

例1：Kotlin Android - ライブラリを使用しないアクティビティの遷移​

サードパーティ製のライブラリを使用せずにアニメーションのトランジションを作成する例を見てみましょう。

Step 1: 依存関係​

サードパーティの依存関係は必要ありません。

Step 2: Animations​

次のステップでは、これらのアニメーションを実際にXMLで記述し、animという名前のリソースディレクトリにインクルードします。もしこのようなディレクトリがアプリ内に存在しない場合は、作成してください。

anim`ディレクトリの作成後、以下のアニメーションファイルを追加します。

slide_down.xml (スライドダウン)

そして、次のようなコードを追加します。

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

    <translate
        android:duration="50"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />

</set>

スライド_インレフト.xml （英語のみ

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

スライド_イン_ライト.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

スライド_アウト_レフト.xml <!

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

スライド_アウト_ライト.xml <!

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

スライドアップ.xml

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

    <translate
        android:duration="100"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />

</set>

ステップ3：スタイル​

第3ステップでは、アニメーションをアクティビティに実際に適用する必要があります。ただし、これはアクティビティレベルではなく、テーマレベルで宣言的に行います。

そこで、styles.xmlファイルで、次のようなスタイルを作成します。

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

そして、それを次のようにテーマに適用します。

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

これがstyles.xmlの全容です。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

</resources>

ステップ4: アクティビティ​

今回は、3つのアクティビティを行います。

  1. アクティビティA
  2. アクティビティB
  3. アクティビティC

アクティビティA.ktを

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityA : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_a)
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }
}

ActivityB

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityB : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_b)
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }
}

ActivityC <!

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityC : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_c)
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }
}

以上で、kotlinのコードはすべて書きました。

ステップ5: レイアウト​

ダウンロードしたソースコードの中から、レイアウトのコードを探します。

Step 6: 実行​

プロジェクトを実行すると、以下のようなものが得られます。

アクティビティ・トランジションの例

ステップ 7: ダウンロード​

ソースコードをhereからダウンロードします。

ライブラリーを使った例

アプリをよりモダンにするために、アクティビティの間にトランジションアニメーションを入れることができます。これには様々な方法がありますが、ここではその方法を紹介します。

(a). Intent Animation Library の使用​

このライブラリは非常に簡単です。### (a) Intent Animation Libraryの使用 このライブラリはとても簡単で、アクティビティに様々な種類のアニメーションを簡単に組み込むことができます。

ステップ1: インストール​

まず、ライブラリのインストールから始めましょう。このライブラリは jitpack でホストされています。

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

`

次に implementation statement を依存関係として追加します。

implementation 'com.github.hajiyevelnur92:intentanimation:1.0'

Step 2: コード​

以下にコードを示します。

import static maes.tech.intentanim.CustomIntent.customType;
//MainActivity or any activity name
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //.....//

        //here is library
        customType(MainActivity.this,"here is animation name");
}
   //Here are the animations
*left-to-right
*right-to-left
*bottom-to-up
*up-to-bottom
*fadein-to-fadeout
*rotateout-to-rotatein

リンク​

全コードのダウンロードはこちらから。

(b). バンジーを使ったトランジション​

Bungeeは、クールなアクティビティ・トランジション・アニメーションのためのLightweight Androidライブラリです。

このソリューションは、最低でもSDK 16 (Android Jellybean 4.1)をサポートしています。

Bungeeには15種類のアクティビティ・トランジション・アニメーションがあります。

  • スプリット
  • 縮小
  • カード
  • インアンドアウト
  • 左スワイプ
  • 右スワイプ
  • 上にスライド
  • 下にスライド
  • 左にスライド
  • 右にスライド
  • ズーム
  • フェード
  • スピン
  • 斜め
  • ウィンドミル

デモアプリこちらをダウンロードして、動作を確認することができます。

ステップ 1: インストール​

インストールするには、まずプロジェクトフォルダの build.gradle に jitpack を maven repositort の url として登録します。

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

次に、app フォルダの build.gradle で、implementation statement として依存関係を宣言します。

dependencies {
            implementation 'com.github.Binary-Finery:Bungee:3.0'
    }

ステップ 2: コードの記述​

Bungeeを使用するために必要なコードは1行だけです。例えば、このケースでは、ズームのアニメーションが実行されます。

startActivity(new Intent(context, TargetActivity.class));
Bungee.zoom(context);  //fire the zoom animation

また、戻るボタンが押されたときにアニメーションを実行したいとします。

@Override
public void onBackPressed(){
  super.onBackPressed();
  Bungee.slideLeft(context); //fire the slide left animation
}

ここでは、利用可能なすべてのメソッドを紹介します。

Bungee.split(context);
Bungee.shrink(content);
Bungee.card(context);
Bungee.inAndOut(context);
Bungee.swipeLeft(context);
Bungee.swiperRight(context);
Bungee.slideLeft(context);
Bungee.slideRight(context);
Bungee.slideDown(context);
Bungee.slideUp(context);
Bungee.fade(context);
Bungee.zoom(context);
Bungee.windmill(context);
Bungee.diagonal(context);
Bungee.spin(context);

実行​

プロジェクトを実行します。

Reference​

参考リンクを紹介します。

---