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

Hanking發表於2019-02-28
Android動畫

前言

轉場動畫在互動上非常有優勢，本文從轉場動畫的使用場景和方法起，最後是實現掘金中使用者頭像的轉場動畫。

轉場動畫適用的版本

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

// 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檔案中進行如下配置。

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

也可以在程式碼中動態的配置如下：

// 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中的轉場動畫主要有三種場景：

1、在兩個activity之間切換時介面的過渡效果。

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

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

1、兩個activity之間切換時介面的過渡效果

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

在這裡插入圖片描述
activity主要的進場和出場方法：

  • Window.setEnterTransition() 設定進場動畫
  • Window.setExitTransition() 設定出場動畫
  • Window().setReturnTransition() 設定返回activity時動畫
  • Window().setReenterTransition() 設定重新進入時動畫 如下圖：

在這裡插入圖片描述

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

2、Slide：從螢幕的一邊向另一邊進入或退出。

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

效果如下圖所示：

Explode Slide Fade
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

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

1、通過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);
    }
複製程式碼

2、程式碼方式實現。

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);
    }
複製程式碼

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

在這裡插入圖片描述
上面的動畫過程分析： 1、Activity A 啟動Activity B 2、Transition FrameWork層得到Activity A的退出動畫slide並且應用到全部可見的view中。 3、Transition FrameWork層得到Activity B的進入動畫fade並且應用到全部可見的view中。 4、當從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
在這裡插入圖片描述
在這裡插入圖片描述

2、 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的旋轉或者縮放動畫

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

1、 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>
複製程式碼

2、定義一個相同的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" />
複製程式碼

3、在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());
    }
});
複製程式碼

效果如下：

在這裡插入圖片描述

未完待續.......

相關文章