Transition過渡動畫

引入

從API 1就存在的Drawable Animation和View Animation，以及API 11(Android 3.0)以後加入的Property Animation。而過渡動畫Transition是在API 19(Android 4.4.2)中加入的。

ransition是一種簡單的動畫顯示。這種動畫可以平滑的從一種圖片變換為另一張圖片，不是那種突兀的切換。

Transition可以簡單的在兩幀之間切換，常用於選擇與被選擇之間切換，或者漸進的今日新的場景。

XML檔案包含切換的幀圖片。transition標籤作為容器，item為切換用的幀，Android

TransitionDrawable

TransitionDrawable獲取transition中的資源，之後呼叫startTransition進行切換，該函式將第一幀切換到第二幀。reverseTransition是另一種切換方式，將反覆切換兩幀，會根據上一次切換的第二幀作為下一次切換的第一幀。

XML檔案程式碼:

1.	<?xml version="1.0" encoding="utf-8"?>  
2.	<transition  
3.	    xmlns:android="http://schemas.android.com/apk/res/android">  
4.	      
5.	    <item android:drawable="@drawable/left" />  
6.	    <item android:drawable="@drawable/right" />  
7.	  
8.	</transition>  
 

Activity程式碼:

TransitionDrawable sceneDrawable = (TransitionDrawable) scene.getDrawable();  

sceneDrawable.reverseTransition(3000);  

轉場動畫(Activity Transition)基本介紹

Android 5.0 提供了三種Transition型別
進入：決定Activity中的所有的檢視怎麼進入螢幕。
退出：決定一個Activity中的所有檢視怎麼退出螢幕。
共享元素：決定兩個activities之間的過渡，怎麼共享(它們)的檢視。

進入和退出包含如下動畫效果

explode(分解)

slide(滑動) - 從螢幕邊緣進或出地

fade(淡出) –通過改變螢幕上檢視的不透明度達到新增或者移除檢視的效果

共享元素包含如下動畫效果

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

changeClipBounds - 裁剪目標檢視邊界

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

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

使用

xml設定

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

<style name="myTheme" parent="android:Theme.Material">  
        <!-- 允許使用transitions -->  
        <item name="android:windowContentTransitions">true</item>  

        <!-- 指定進入和退出transitions -->  
        <item name="android:windowEnterTransition">@transition/explode</item>  
        <item name="android:windowExitTransition">@transition/explode</item> 
 
        <!-- 指定shared element transitions -->  
        <item name="android:windowSharedElementEnterTransition">  
            @transition/change_image_transform</item>  
        <item name="android:windowSharedElementExitTransition">  
            @transition/change_image_transform</item>  
</style>  

定義transition動畫

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">  
    <explode/>  
    <changeBounds/>  
    <changeTransform/>  
    <changeClipBounds/>  
    <changeImageTransform/>  
<!--
	changeBound 這個是最長使用的 改變View 大小和位置
	changeClipBounds 改變 Clip 邊界的大小
	changeImageTransform 改變ImageView 的大小 和 martix
	ChangeTransform 改變普通的 View 一些Scalex 值
	ChangeScroll 改變滑動位置
-->
</transitionSet>

程式碼設定

ActivityA

// 基本的startActivity(intent)方法
startActivity(intent,ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this).toBundle());

ActivityB

// 在onCreate()允許使用transitions 
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 
// 設定一個enter transition 
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());

樣式使用

設定一個進入動畫，預設退出時同樣的動畫型別

setExitTransition() - 當A start B時，使A中的View退出場景的transition

setEnterTransition() - 當A start B時，使B中的View進入場景的transition

setReturnTransition() - 當B 返回 A時，使B中的View退出場景的transition

setReenterTransition() - 當B 返回 A時，使A中的View進入場景的transition

共享元素的動畫

首先需要在他的ActivityA佈局、ActivityB佈局中共同設定共享元素
android:transitionName="XXX"
如果只要一個共享元素，那麼在ActivityB中可以這樣寫
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(this,view,"share").toBundle());
由多個共享元素，那麼我們可以通過Pair.create()來建立多個共享元素
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(this, Pair.create(view,"share")
,Pair.create(fab,"fab")).toBundle());

佈局元素的過渡動畫

Transition框架還可以用於activity佈局中view從一種狀態到另一種狀態的過渡動畫。

//簡單實現

TransitionManager.beginDelayedTransition(sceneRoot);

這會改變相應view的屬性，讓其變大。Transition框架將記錄開始和結束的的值，然後建立一個過渡動畫。.

squareGreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TransitionManager.beginDelayedTransition(sceneRoot);
                setViewWidth(squareRed, 500);
                setViewWidth(squareBlue, 500);
                setViewWidth(squareGreen, 500);
                setViewWidth(squareYellow, 500);
            }
        });
    }

    private void setViewWidth(View view, int x) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.width = x;
        view.setLayoutParams(params);
    }

實現例子

MainActivity

public class MainActivity extends AppCompatActivity {
    private Intent intent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        intent = new Intent(MainActivity.this, ActivityTwo.class);
    }

    public void explode(View view) {
        intent.putExtra("transition", "explode");
        //將原先的跳轉改成如下方式
        startActivity(intent, ActivityOptions
        .makeSceneTransitionAnimation(MainActivity.this).toBundle());

        /**
         * 修改ActivityTwo返回到MainActivity動畫設定
         */
        Fade fade = new Fade();
        fade.setDuration(2000);
        getWindow().setReenterTransition(fade);
    }

    public void slide(View view) {
        intent.putExtra("transition", "slide");
        startActivity(intent, ActivityOptions
        .makeSceneTransitionAnimation(MainActivity.this).toBundle());
    }

    public void fade(View view) {
        intent.putExtra("transition", "fade");
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
    }

    public void share(View view) {
        //共享元素
        ImageView share = (ImageView) findViewById(R.id.share);
        intent.putExtra("transition", "share");

        //將原先的跳轉改成如下方式，注意這裡面的第三個引數決定了ActivityTwo 佈局中的android:transitionName的值，它們要保持一致
        startActivity(intent, ActivityOptions
        .makeSceneTransitionAnimation(MainActivity.this,share,"shareTransition").toBundle();

        //建立多個共享單元
        //startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(share, "shareTransition"), Pair.create(fab, "fab")).toBundle());

    }

}

MainActivity的佈局xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="explode"
        android:text="explode" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="slide"
        android:text="slide" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="fade"
        android:text="fade" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="share"
        android:text="share" />

    <ImageView
        android:id="@+id/share"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_guide_view_1"/>
</LinearLayout>

ActivityTwo

public class ActivityTwo extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 允許使用transitions
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        String transition = getIntent().getStringExtra("transition");

        switch (transition) {
            case "explode":
                // 設定進入時進入動畫
                Explode explode = new Explode();
                explode.setDuration(2000);
                getWindow().setEnterTransition(explode);

                // 設定退出時退出動畫
                Fade fade1 = new Fade();
                fade1.setDuration(2000);
                getWindow().setReturnTransition(fade1);
                break;

            case "slide":
                Slide slide = new Slide();
                slide.setDuration(2000);
                getWindow().setEnterTransition(slide);
                break;

            case "fade":
                Fade fade = new Fade();
                fade.setDuration(3000);
                getWindow().setEnterTransition(fade);
                break;

            case "share":
                break;
        }

        // 所有操作在設定內容檢視之前
        setContentView(R.layout.activity_two);
    }
}

ActivityTwo的佈局xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/share"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_guide_view_1"
        android:onClick="share"
        android:transitionName="shareTransition" />
</RelativeLayout>