1. 程式人生 > >Android 5.0學習之Activity共享元素過渡動畫

Android 5.0學習之Activity共享元素過渡動畫

轉自:http://blog.csdn.net/ljx19900116/article/details/41806889

前言


Activity Transition:

提供了三種Transition型別:

進入:一個進入的過渡(動畫)決定activity中的所有的檢視怎麼進入螢幕。
退出:一個退出的過渡(動畫)決定一個activity中的所有檢視怎麼退出螢幕。

共享元素:一個共享元素過渡(動畫)決定兩個activities之間的過渡,怎麼共享(它們)的檢視。

<span style="font-size:18px;color:#ff6666;">支援這些進入和退出的過渡動畫:</span>
<span style="font-size:18px;">explode(分解) –進或出地移動檢視,從螢幕中間
slide(滑動) -進或出地移動檢視,從螢幕邊緣
fade(淡出) –通過改變螢幕上檢視的不透明度達到新增或者移除檢視(的效果)</span>
<span style="font-size:18px;color:#ff6666;">在以上動畫基礎上還可以新增還支援共享元素過渡:(以上效果的共享元素效果基於分解動畫基礎上進行)</span>

它的作用就是共享兩個acitivity種共同的元素,在Android 5.0下支援如下效果:

changeBounds -  改變目標檢視的佈局邊界

changeClipBounds - 裁剪目標檢視邊界

changeTransform - 改變目標檢視的縮放比例和旋轉角度

changeImageTransform - 改變目標圖片的大小和縮放比例


使用步驟:

1.設定動畫(兩種方式):

1.1xml設定

當你定義繼承了material主題樣式時,使用android:windowContentTransitions屬性啟用視窗的內容轉換(效果)。你還可以指定進入、退出、和共享元素的轉換:

  1. <stylename="myTheme"parent="android:Theme.Material"
    >
  2.         <!-- 允許使用transitions -->
  3.         <itemname="android:windowContentTransitions">true</item>
  4.         <!-- 指定進入和退出transitions -->
  5.         <itemname="android:windowEnterTransition">@transition/explode</item>
  6.         <itemname="android:windowExitTransition">@transition/explode</item>
  7.         <!-- 指定shared element transitions -->
  8.         <itemname="android:windowSharedElementEnterTransition">
  9.             @transition/change_image_transform</item>
  10.         <itemname="android:windowSharedElementExitTransition">
  11.             @transition/change_image_transform</item>
  12. </style>
定義transition動畫:
  1. <transitionSetxmlns:android="http://schemas.android.com/apk/res/android">
  2.     <explode/>
  3.     <changeBounds/>
  4.     <changeTransform/>
  5.     <changeClipBounds/>
  6.     <changeImageTransform/>
  7. </transitionSet>

1.2程式碼設定

  1. // 允許使用transitions
  2. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
  3. // 設定一個exit transition
  4. getWindow().setExitTransition(new Explode());//new Slide()  new Fade()
Window.setEnterTransition():設定進入動畫

Window.setExitTransition():設定退出效果

Window.setSharedElementEnterTransition():設定共享元素的進入動畫

Window.setSharedElementExitTransition():設定共享元素的退出動畫

2.Activity跳轉方法:

進入退出動畫跳轉:

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

共享元素跳轉:

為了使有一個共享元素的兩個activities間使用過渡動畫:

1.在你的主題中啟用視窗內容過渡

2.在你的主題樣式中指定共享元素的過渡

3.定義你的過渡動畫為XML資源

4.使用android:transitionName屬性給兩個佈局中的共享元素指定一個相同的名字(名字一定不要寫錯)

程式碼:

  1. // 共享跳轉
  1. intent = new Intent(Transitions.this, Transitions4.class);  
  2.                 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,view,"shareName").toBundle());  
跳轉目標xml:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.                 android:orientation="vertical"
  4.                 android:layout_width="match_parent"
  5.                 android:layout_height="match_parent"
  6.                 android:background="@android:color/white">
  7.     <LinearLayout
  8.             android:orientation="horizontal"
  9.             android:id="@+id/ll"
  10.             android:background="#2faaf3"
  11.             android:elevation="2dip"
  12.             android:layout_width="fill_parent"android:layout_height="200dp"/>
  13.     <TextView
  14.             android:id="@+id/btn_test"
  15.             android:elevation="8dip"
  16.             android:padding="10dip"
  17.             android:layout_x="300dip"
  18.             android:layout_y="175dip"
  19.             android:transitionName="shareName"
  20.             android:layout_width="50dp"android:layout_height="50dp"android:background="@drawable/myrect"
  21.             android:layout_below="@+id/ll"android:layout_alignParentEnd="true"
  22.             android:layout_marginRight="56dp"/>
  23. </AbsoluteLayout>
如果有多個共享元素:
  1. ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,  
  2.         Pair.create(view1, "agreedName1"),  
  3.         Pair.create(view2, "agreedName2"));  
去試試吧~!