高逼格Android轉場動畫，輕鬆實現掘金用戶頭像轉場動畫

時間 2019-11-07

原文原文鏈接

前言

轉場動畫在交互上很是有優點，本文從轉場動畫的使用場景和方法起，最後是實現掘金中用戶頭像的轉場動畫。php

轉場動畫適用的版本

Activity transition APIs 只有在Android 5.0（API 21）或者更高的版本上能使用。因此在使用以前須要進行版本判斷。當版本API 大於21時使用轉場動畫，不然不使用。java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}
複製代碼

還須要配置容許window content transitions 。也就是字段：android:windowActivityTransitions。能夠在activity的style文件中進行以下配置。android

<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowActivityTransitions">true</item> </style>
複製代碼

也能夠在代碼中動態的配置以下：ide

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());
複製代碼

轉場動畫的使用場景

Android中的轉場動畫主要有三種場景：佈局

一、在兩個activity之間切換時界面的過渡效果。動畫

二、兩個activity或者Fragment之間shared elements 切換效果。ui

三、同一個activity中的view的動畫效果。 下面分別詳細的介紹這三種方式。this

一、兩個activity之間切換時界面的過渡效果

兩個activity切換時的，有兩個動畫，以下圖，從activity A 切換到activity B時，會有A的退出動畫和B的進入動畫。 spa

activity主要的進場和出場方法：

Window.setEnterTransition() 設置進場動畫
Window.setExitTransition() 設置出場動畫
Window().setReturnTransition() 設置返回activity時動畫
Window().setReenterTransition() 設置從新進入時動畫以下圖：

在Google提供的android.transition.Transition包中從activity A切換到activity B有三種方式：Explode, Slide 和Fade。 一、Explode：從屏幕的中間進入或退出。3d

二、Slide：從屏幕的一邊向另外一邊進入或退出。

三、Fade：經過改變透明度來出現或消失。

效果以下圖所示：

Explode	Slide	Fade

上面的三種動畫有兩種實現方式：

一、經過xml聲明。

在res目錄下新建transition文件夾在transition文件夾下新建activity_fade.xml文件。 res/transition/activity_fade.xml

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/" android:duration="1000"/>
複製代碼

res/transition/activity_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/" android:duration="1000"/>
複製代碼

ActivityA的代碼以下：由於從ActivityA切換到ActivityB,因此ActivityA是退出動畫使用的方法是：getWindow().setExitTransition(slide);

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

    private void setupWindowAnimations() {
        Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
        getWindow().setExitTransition(slide);
    }
複製代碼

ActivityB是進入動畫使用方法：getWindow().setEnterTransition(fade);，ActivityB的代碼以下

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

    private void setupWindowAnimations() {
        Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
        getWindow().setEnterTransition(fade);
    }
複製代碼

二、代碼方式實現。

ActivityA代碼以下：實現一個Slide對象而且設置時間爲1000毫秒。

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

    private void setupWindowAnimations() {
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setExitTransition(slide);
    }
複製代碼

ActivityB中實現一個Fide對象而且設置時間爲1000毫秒。

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

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    }
複製代碼

上面兩種方式最終的實現效果以下：

上面的動畫過程分析：一、Activity A 啓動Activity B 二、Transition FrameWork層獲得Activity A的退出動畫slide而且應用到所有可見的view中。三、Transition FrameWork層獲得Activity B的進入動畫fade而且應用到所有可見的view中。四、當從Activity B返回到Activity A的時候會分別執行Enter和Exit相反的動畫（沒有設置returnTransition，和reenterTransition時）。

ReturnTransition & ReenterTransition

Return 和Reenter Transition是enter 和exit相反的過程。當從Activity A進入到Activity B時會執行 exit和enter當從Activity B退回到Activity A時會執行Return Transition和Reenter Transition。

EnterTransition <--> ReturnTransition
ExitTransition <--> ReenterTransition 若是沒有定義Return 或者 Reenter，那麼Android會反向執行Enter和Exit變換。以下圖從Activity B退回到Activity A：

給Activity A增長了ReturnTransition的代碼以下：

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

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
        
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setReturnTransition(slide);        
    }
複製代碼

增長了返回動畫和沒有增長返回動畫的對比效果以下：

沒有Return Transition	有return Transition
Enter：Fade In	Enter:Fade In
Exit：Fade out	Exit:Slide out

二、 Shared elements between Activities

Shared elements轉換肯定兩個Activity之間共享的視圖如何在這兩個Activity之間轉換。例如，若是兩個Activity在不一樣的位置和大小中具備相同的圖像，則經過Shared elements轉換會在這兩個Activity之間平滑地轉換和縮放圖像。 主要方法

以下圖，當從Activity A跳轉到Activity B時，ActivityA， ActivityB中的兩個item有動畫變化，可是要注意的時ActivityA ，ActivityB中的item是兩個獨立的item。

shared elements轉換包括如下幾種：

changeBounds 改變目標佈局中view的邊界
changeClipBounds 裁剪目標佈局中view的邊界
changeTransform 實現旋轉或者縮放動畫
changeImageTransform 實現目標佈局中ImageView的旋轉或者縮放動畫

實現上面的效果須要三個步驟：

一、 Enable Window Content Transition

設置styles.xml文件，容許windowContentTransitions以下： value/style.xml

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar"> ... <item name="android:windowContentTransitions">true</item ... </style>
複製代碼

二、定義一個相同的transition名稱

分別在Activity A 和Activity B的佈局文件中定義item，這兩個item的屬性能夠不同，可是android:transitionName必須同樣。以下： layout/activity_a.xml

<ImageView android:id="@+id/small_blue_icon" style="@style/MaterialAnimations.Icon.Small" android:src="@drawable/circle" android:transitionName="@string/blue_name" />
複製代碼

layout/activity_b.xml

<ImageView android:id="@+id/big_blue_icon" style="@style/MaterialAnimations.Icon.Big" android:src="@drawable/circle" android:transitionName="@string/blue_name" />
複製代碼

三、在activity中啓動shared element

使用ActivityOptions.makeSceneTransitionAnimation()方法 ActivityA.java

blueIconImageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent i = new Intent(MainActivity.this, SharedElementActivity.class);

        View sharedView = blueIconImageView;
        String transitionName = getString(R.string.blue_name);

        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
        startActivity(i, transitionActivityOptions.toBundle());
    }
});
複製代碼

效果以下：