天天看點

android5.0之Activity過渡動畫

android5.0之Activity過渡動畫

Android5.0提供了3種Transition類型。

  1. 進入動畫:一個進入的過渡動畫決定一個Activity中的所有視圖怎麼進入螢幕。
  2. 退出動畫:一個退出的過渡動畫決定一個Activity中的所有視圖怎麼退出螢幕。
  3. 共享元素:一個共享元素過渡動畫決定2個Activitys之間的過渡,怎麼共享他們的視圖。

其中進入和退出效果有:

  • explode(分解):從螢幕中間進或出,移動視圖。
  • slide(滑動):從螢幕邊緣進或出,移動試圖。
  • fade(淡出):通過改變螢幕上的視圖的不透明度,達到添加或移除視圖。

共享元素包括:

  • changeBounds:改變目标視圖的布局邊界。
  • changeClipBounds:裁剪目标視圖邊界。
  • changeTransform:改變目标的縮放比例和旋轉角度。
  • changeImageTransform:改變目标圖檔的大小和縮放比例。
  • overlay

效果圖

android5.0之Activity過渡動畫

過渡動畫有2中實作方案,一種通過xml實作(全局),一種是通過代碼實作,在此之前介紹介個方法

  • setExitTransition() - 當A 跳轉到 B時,使A中的View退出場景的transition
  • setEnterTransition() - 當A 跳轉到 B時,使B中的View進入場景的transition
  • setReturnTransition() - 當B 傳回到 A時,使B中的View退出場景的transition
  • setReenterTransition() - 當B 傳回到 A時,使A中的View進入場景的transition

A:進入和退出動畫效果

一:xml實作

1.在style.xml中設定

<!--設定支援過渡動畫-->
<item name="android:windowContentTransitions">true</item>
<!--設定進入動畫      通過分解方式進入-->
<item name="android:windowEnterTransition">@transition/explode</item>   
<!--設定退出動畫      通過分解方式退出-->
<item name="android:windowExitTransition">@transition/explode</item>

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

2.在res目錄下,建立一個transition檔案夾,建立xxx.xml檔案(就是動畫xml)

explode.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

silde.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <slide
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

fade.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <fade
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>
           

3.跳轉Activity頁面代碼(比較容易忘):

Intent intent = new Intent(MainActivity.this, SlideActivity.class);
                startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
           

二:代碼實作

1.在跳轉Activity頁面時,例如A頁面跳轉到B頁面:

A頁面關鍵代碼:

Intent intent = new Intent(MainActivity.this, SlideActivity.class);
                startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
           

B頁面關鍵代碼:代碼需放在setContentView()之前,

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode());
getWindow().setExitTransition(new Explode());
//getWindow().setReenterTransition(new Explode());
//getWindow().setReturnTransition(new Explode());
setContentView()
           

兩種實作方式,覺得還是xml好用,統一了頁面進入和退出動畫的風格,修改也比較友善

B:共享元素動畫

  • setSharedElementEnterTransition();A->B,B進入動畫
  • setSharedElementExitTransition();A->B,A退出動畫
  • setSharedElementReenterTransition();B->A,A進入動畫
  • setSharedElementReturnTransition();B->A,B退出動畫

一:xml實作

1.在style.xml中

<!--設定支援過渡動畫-->
<item name="android:windowContentTransitions">true</item>

<item name="android:windowSharedElementEnterTransition">@transition/share1</item>
<item name="android:windowSharedElementExitTransition">@transition/share2</item>

<item name="android:windowSharedElementReenterTransition">@transition/share3</item>
<item name="android:windowSharedElementReturnTransition">@transition/share4</item>
           

2.xml動畫(res/transition/xxx.xml)

share1.xml
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

share2.xml
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeClipBounds
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

share3.xml
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

share4.xml
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>
           

set動畫中可以多種動畫組合

3.跳轉頁面代碼:

一個共享元素

 Intent intent3 = new Intent(MainActivity.this, Share1Activity.class);
                startActivity(intent3, ActivityOptions.makeSceneTransitionAnimation(this, button4, "share").toBundle());


多個共享元素
startActivity(intent3, ActivityOptions.makeSceneTransitionAnimation(this, new Pair<View, String>(button4, "share"), new Pair<View, String>(button4, "share")).toBundle());

new Pair()是可變參數

共享元素的key:view控件 ,value:與android:transitionName="share" 相同(也可以通過代碼設定setTransitionName())

<Button
    android:id="@+id/btn4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="share"
    android:transitionName="share" />   
           

二:代碼實作:

1.頁面跳轉代碼與xml實作相同

  • ChangeBounds -捕獲共享元素的layout bound,然後播放layout bound變化動畫。ChangeBounds 是共享元素變換中用的最多的,因為前後兩個activity中共享元素的大小和位置一般都是不同的。
  • ChangeTransform - 捕獲共享元素的縮放(scale)與旋轉(rotation)屬性 ,然後播放縮放(scale)與旋轉(rotation)屬性變化動畫。
  • ChangeClipBounds - 捕獲共享元素clip bounds,然後播放clip bounds變化動畫。
  • ChangeImageTransform - 捕獲共享元素(ImageView)的transform matrices 屬性,然後播放ImageViewtransform matrices 屬性變化動畫。與ChangeBounds相結合,這個變換可以讓ImageView在動畫中高效實作大小,形狀或者ImageView.ScaleType 屬性平滑過度。

差別需要多試才知道

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

getWindow().setSharedElementExitTransition(new ChangeBounds());
//getWindow().setSharedElementEnterTransition(new ChangeBounds());
getWindow().setSharedElementReenterTransition(new ChangeBounds());
//getWindow().setSharedElementReturnTransition(new ChangeBounds());

setContentView()
           

overlay效果

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

getWindow().setSharedElementsUseOverlay(true);
//        getWindow().setSharedElementsUseOverlay(false);
           

參考:Android群英傳,深入了解共享元素變換(Shared Element Transition)-上