Android——Activity切換炫酷動畫實現

毫無疑問，動畫效果能提高使用者體驗。我們平時使用最多的動畫基本上是屬性動畫和補間動畫了，屬性動畫很強，基本能定製我們想要的動畫，但是你是否知道，API 21（5.0）後系統內建了Activity之間的切換動畫，而且非常酷炫，今天我跟大家一起分享一下。我們知道，在兩個Activity之間切換，我們一般會寫出類似下面的程式碼：

Intent intent=new Intent(this,SecondActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);

在API 21以後，我們可以使用內建的Activity切換動畫啦。但是這樣也就意味著只能相容5.0之後的系統，我們先看一個效果圖來壓壓驚：

先看看第一個Activity，退出時用的是Explode效果，第二個Activity進入時用的是Slide效果。這些效果無需我們自己去實現，都是內建的效果，我們所編寫的程式碼幾乎為零，接下來我們一一看看內建了哪些效果。

1 使用內建Activity之間切換動畫程式碼步驟

Activity之間的切換期間，對於某個Activity來說，無非就是“進入”和“退出”兩種情景下的動畫。而“進入”分為“第一次進入Activity”和“返回當前Activity”這兩種情況。另外系統還提供了一種動畫，即共享元素，這是讓兩個Activity中的View有個過渡切換的效果。執行動畫的狀態如下所示：

• enter：用於決定第一次開啟當前Activity時的動畫
• exit : 用於決定退出當前Activity時的動畫
• reenter: 用於決定如果當前Activity已經開啟過，並且再次開啟該Activity時的動畫
• shared elements:用於決定在兩個Activity之間切換時，指定兩個Activity中對應的View的過渡效果

那麼應該怎麼去使用Activity切換動畫呢？我們看看使用步驟：

1.首先在setContentView()之前執行，用於告訴Window頁面切換需要使用動畫

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

2.接下來就是載入切換動畫

其中R.transition.explode就是要執行的動畫，是在res/transition目錄下的xml檔案，我們使用的是系統內建的Explode效果動畫，關於怎麼去寫explode.xml，我們接下來小節去講解。

Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.explode);

3.告訴Window，當前的Activity在什麼情況下使用上面的動畫

上面我們建立好了切換動畫，接下來就是要告訴當前視窗，在什麼情況下去使用動畫效果啦，你可以根據你的需求在不同的切換情景中選擇不同的效果：

//退出時使用
getWindow().setExitTransition(explode);
//第一次進入時使用
getWindow().setEnterTransition(explode);
//再次進入時使用
getWindow().setReenterTransition(explode); 

當然了，你也可以不使用程式碼的方式，直接在你使用的主題<style>標籤裡新增類似如下程式碼：

<item name="android:windowExitTransition">@transition/explode</item>
<item name="android:windowEnterAnimation">@transition/explode</item>
<item name="android:windowReenterTransition">@transition/explode</item>

4.呼叫startActivity

跟我們之前使用的startActivity(Intent intent);不同，這裡多了一個引數Bundle，我們是先通過makeSceneTransitionAnimation函式建立一個ActivityOptions物件，再將其轉為Bundle物件:

startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

整體使用步驟就是以上這些，是不是很簡單？接下來我們去學習如何使用內建動畫~

2 Explode效果

Explode即爆炸效果，使用Explode效果很簡單，在res/transition目錄下新建一個xml檔案(如explode.xml)，內容如下：

<explode xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />

其中duration表示Explode動畫持續時間，由於是Activity之間的切換，最好不要把動畫時間設定過大，一般取200~500毫秒比較合適。
我們看看效果吧~

3 Slide效果

即滑動效果，使用Slide跟Explode類似，都是在res/transition目錄下新建一個xml檔案(如slide.xml)，內容如下：

<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:slideEdge="end"/>

其中，slideEdge表示起始滑動的側邊位置，end表示右側，start表示左側，top表示頂部，bottom表示底側，各種效果你可以親自試試~，一起看看滑動效果吧

GIF 效果看的比較死板，可以下載我的原始碼實際執行一下~

如果你不希望頂部的狀態列以及底部的導航欄一起執行動畫，可以在xml中指定：

<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:slideEdge="end">
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
    </targets>
</slide>

4 Fade效果

Fade效果即淡化效果，使用淡化效果依然是很簡單，在res/transition目錄下新建一個xml檔案(如fade.xml)，內容如下：

<fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />

Fade效果就是將View逐步淡化，這裡不再貼效果啦，想看效果的可以下載我的原始碼執行看看~

5 Shared Element效果

即共享元素效果，與前面幾種效果不同的是，共享元素效果是將前面一個Activity的某個子View與後面一個Activity的某個子View之間有過渡效果，我們先看看動態圖感受一下：

從動態圖中看到，第一個Activity的小綠色方塊到第二個Activity大綠色方塊有個過渡效果~

接下來我們看看如何實現這個效果：

1.將兩個Activity中需要過渡的View加上android:transitionName屬性

兩個View的android:transitionName屬性取值要一致，比如：
第一個Activity佈局：

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

    <View
        android:id="@+id/firstSharedView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00cc00"
        android:onClick="onClick"
        android:transitionName="sharedView" />
</RelativeLayout>

第二個Activity佈局：

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

    <View
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentBottom="true"
        android:background="#00cc00"
        android:onClick="onClick"
        android:transitionName="sharedView" />

</RelativeLayout>

兩個綠色的View都新增android:transitionName屬性，並且取名一致。

2.呼叫startActivity

ActivityOptions的makeSceneTransitionAnimation函式第一個引數Activity沒啥解釋的，第二個引數就是第一個Activity中的View物件，第三個引數就是兩個Activity的View的 android:transitionName屬性的值。

 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, firstSharedView, "sharedView").toBundle());

現在就可以實現這種Shared Element效果啦，但是可能你會想實現同時讓兩個View有這樣的效果，可是makeSceneTransitionAnimation函式卻只能讓我們設定一個View和一個transitionName屬性。如何新增多個呢？接下來我們一起學習讓多個View同時有切換效果。

除了需要將兩個Activity中需要過渡的View對應取相同的名稱外，還需將需要過渡的View和transitionName取值對應的String這兩個物件封裝到一個Pair物件中：

Pair first = new Pair<>(firstSharedView,ViewCompat.getTransitionName(firstSharedView));

Pair second = new Pair<>(secondSharedView,ViewCompat.getTransitionName(secondSharedView));

然後呼叫ActivityOptionsCompat類的makeSceneTransitionAnimation的另一個過載函式makeSceneTransitionAnimation(Activity activity, Pair<View, String>... sharedElements)，第一個引數不解釋，後面引數為不定長度的形參，即你可以傳遞任意多個Pair物件。

 ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, first, second);

最後呼叫startActivity

 ActivityCompat.startActivity(this,intent, transitionActivityOptions.toBundle());

說了這麼多步驟，我們來看看效果吧~

5.1 自定義 Shared Element切換動畫

如果你對內建的 Shared Element還不夠滿意，你還可以定製View的過渡切換效果。步驟如下：

1.建立一個View的過渡移動的軌跡路徑PathMotion類

我們可以建立ArcMotion物件，ArcMotion是PathMotion子類，是個曲線路徑。想要了解更多ArcMotion可以檢視【ArcMotion官方文件】

ArcMotion arcMotion = new ArcMotion();
arcMotion.setMinimumHorizontalAngle(50f);
arcMotion.setMinimumVerticalAngle(50f);

2.定義ChangeBounds類

我們自定義一個繼承ChangeBounds的類，主要重寫createAnimator函式，即建立你要執行的動畫。這個函式由3個引數：

1.ViewGroup sceneRoot：螢幕根View，即DecorView，第二個Activity的DecorView。

2.TransitionValues startValues ：屬性動畫的起始屬性值，TransitionValues 物件內部有各Map型別的屬性values，用於儲存需要執行屬性動畫的屬性。這個裡面的屬性值是在函式captureStartValues裡放置，因此你可以重寫captureStartValues函式，並把你自定義的屬性動畫中的屬性放進去。

3.TransitionValues endValues ：與startValues類似，表示屬性動畫結束時的屬性值。可以通過重寫captureEndValues函式，並把你自定義的屬性動畫裡面的最終屬性值放進去。

我們先看一個最簡單的示例：

package com.hc.util;

import android.animation.Animator;
import android.transition.ChangeBounds;
import android.transition.TransitionValues;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;

public class CustomChangeBounds extends ChangeBounds {
    @Override
    public Animator createAnimator(final ViewGroup sceneRoot,TransitionValues startValues,final TransitionValues endValues) {
        Animator changeBounds = super.createAnimator(sceneRoot, startValues, endValues);
        if (startValues == null || endValues == null || changeBounds == null) 
            return null;

        changeBounds.setDuration(300);
        changeBounds.setInterpolator(AnimationUtils.loadInterpolator(sceneRoot.getContext(),android.R.interpolator.fast_out_slow_in));
        return changeBounds;
    }
}

看看效果吧~

原文連結：酷炫的Activity切換動畫，打造更好的使用者體驗
原始碼：http://download.csdn.net/detail/huachao1001/9550440