fragment切換動畫

Fragment切換動畫

在Activity跳轉之間可以設置動畫效果，例如平移，漸變，旋轉等動畫，當然在Fragment中也可以設置切換的動畫效果，可以達到跟ViewPager切換動畫類似的效果。在Fragment中設置自定義切換動畫主要分爲了兩種情景，一種是使用 android.app.Fragment包裏面的Fragment類時，FragmentManager裏面的FragmentTransaction事務只支持XML中的animator標籤，如objectAnimator屬性動畫，不支持傳統的補間動畫標籤如<translate>,<alpha>等。 

另一種是使用兼容性版本的android.support.v4.app.Fragment包裏面的Fragment類，SupportFragmentManager裏面的FragmentTransaction事務支持XML中的animation標籤，也就是傳統的補間動畫，例如<translate>,<alpha>，不支持屬性動畫標籤。

設置Fragment的切換動畫主要是使用FragmentTransaction事務類的中setCustomAnimations方法：

setCustomAnimations 
FragmentTransaction setCustomAnimations (int enter, 
int exit, 
int popEnter, 
int popExit)

該方法有4個參數，第一個參數enter是指當一個Fragment被添加added 或者綁定attached到視圖上，該Fragment進入視圖時的animation或者animator的資源ID；第二個參數exit是指當一個Fragment從視圖上被移除removed或者解除綁定detached時，該Fragment移出視圖時的animation或者animator的資源ID；第三個參數popEnter是指當調用popBackStack（）方法或者類似的方法彈出棧頂的Fragment後，Fragment棧的棧頂Fragment重新被添加readded或重新綁定reattached到視圖上時，該Fragment進入視圖時的animation或者animator的資源ID；第四個參數popExit是指當調用popBackStack（）方法或者類似的方法彈出棧頂的Fragment時，該彈出的Fragment即從視圖上被移除removed或者解除綁定detached，該Fragment移出視圖時的animation或者animator的資源ID。

android.support.v4.app.Fragment包實現

要實現Fragment的自定義切換動畫效果，首先需要自定義XML動畫資源文件，可以在res文件夾下新建anim文件夾然後新建XML資源文件。由於android.support.v4.app.Fragment包只支持補間動畫的標籤，所以可以按照自己的想法來在根標籤set中新建動畫標籤來實現效果，如translate平移，alpha漸變透明度，rotate旋轉，scale縮放等。 

slide_left_in.xml 左視圖進入時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="-100%p"
        android:toXDelta="0%p"
        android:duration="@integer/card_flip_time_full"/>

    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1.0"
        android:duration="@integer/card_flip_time_full"/>

</set>

slide_left_out.xml 左視圖移出時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="@integer/card_flip_time_full"/>

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.5"
        android:duration="@integer/card_flip_time_full"/>

</set>

slide_right_in.xml 右視圖進入時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="@integer/card_flip_time_full"/>

    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1.0"
        android:duration="@integer/card_flip_time_full"/>

</set>


slide_right_out.xml 右視圖移出時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        android:duration="@integer/card_flip_time_full"/>

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.5"
        android:duration="@integer/card_flip_time_full"/>

</set>

Activity中實現 
注意使用getSupport來獲取support.V4包裏面的代碼資源：
public class MainActivity extends BaseActivity {
    private FirstFragment firstFragment;
    private SecondFragment secondFragment;
    private Button previous;
    private Button next;

    @Override
    protected void initView() {
        setContentView(R.layout.activity_main);
        previous= (Button) findViewById(R.id.Btn_Previous);
        next= (Button) findViewById(R.id.Btn_Next);
    }

    @Override
    protected void initData() {
        firstFragment=new FirstFragment();
        secondFragment=new SecondFragment();
        getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.Container,firstFragment)
                .commit();
    }

    @Override
    protected void initListener() {
        previous.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager()
                        .popBackStack();
            }
        });

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager()
                        .beginTransaction()
                        .setCustomAnimations(
                                R.anim.slide_right_in,
                                R.anim.slide_left_out,
                                R.anim.slide_left_in,
                                R.anim.slide_right_out
                        ).replace(R.id.Container,secondFragment)
                        .addToBackStack(null)
                        .commit();
            }
        });
    }

}

android.app.Fragment包實現

android.app.Fragment包裏面的FragmentManager的Transaction事務只支持屬性動畫的資源標籤，所以可以在res文件夾中新建animator文件夾，然後在該animator中的根標籤set內新建<objectAnimator>標籤來實現動畫效果，objectAnimator標籤中可以指定propertyName來實現特定的動畫效果，如alpha漸變透明度，translateX X軸上的平移，rotationY Y軸上的旋轉等等。 

下面是繞Y軸旋轉的切換動畫

card_flip_left_in.xml 左視圖進入時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0"
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:interpolator/accelerate_decelerate"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:duration="1"
        android:startOffset="@integer/card_flip_time_half"/>
</set>

card_flip_left_out.xml 左視圖移出時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="-180"
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:interpolator/accelerate_decelerate"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:duration="1"
        android:startOffset="@integer/card_flip_time_half"/>

</set>

card_flip_right_in.xml 右視圖進入時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="rotationY"
        android:valueFrom="180"
        android:valueTo="0"
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:interpolator/accelerate_decelerate"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:duration="1"
        android:startOffset="@integer/card_flip_time_half"/>

</set>

card_flip_right_out.xml 右視圖移出時動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180"
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:interpolator/accelerate_decelerate"/>

    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:duration="1"
        android:startOffset="@integer/card_flip_time_half"/>

</set>

Activity中實現 
注意使用App包裏面的Fragment時，只能使用getFragmentManager來使用，不能使用V4包裏面的support組件:
public class MainActivity extends BaseActivity {
    private FirstFragment firstFragment;
    private SecondFragment secondFragment;
    private Button previous;
    private Button next;

    @Override
    protected void initView() {
        setContentView(R.layout.activity_main);
        previous= (Button) findViewById(R.id.Btn_Previous);
        next= (Button) findViewById(R.id.Btn_Next);
    }

    @Override
    protected void initData() {
        firstFragment=new FirstFragment();
        secondFragment=new SecondFragment();
        getFragmentManager()
                .beginTransaction()
                .add(R.id.Container,firstFragment)
                .commit();
    }

    @Override
    protected void initListener() {
        previous.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getFragmentManager()
                        .popBackStack();
            }
        });

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getFragmentManager()
                        .beginTransaction()
                        .setCustomAnimations(
                                R.animator.card_flip_right_in,
                                R.animator.card_flip_left_out,
                                R.animator.card_flip_left_in,
                                R.animator.card_flip_right_out
                        ).replace(R.id.Container,secondFragment)
                        .addToBackStack(null)
                        .commit();
            }
        });
    }

}