Fragment過度動畫分析一

Sliding Fragment

介紹：該案例為傳統的Fragment增加了個性化的補間動畫，其效果是原有fragment向螢幕内做一定的下沉，新的fragment顯示在最上層，産生層疊效果的多個fragments。

Video: http://www.youtube.com/watch?v=xbl5cxfA1n4

Source:http://developer.android.com/shareables/devbytes/SlidingFragments.zip

本文将簡單分析其實作流程及原理

Step1：添加Fragment并設定點選的切換事件

首先添加一個fragment，并設定顯示内容已做差別，案例中顯示了一張圖檔，接着設定單擊事件，為了使得我們單擊任意位置都能觸發fragment的切換動畫，這

裡需要為用于展示圖檔的fragment，顯示文本的fragment以及黑色背景view都添加該事件監聽器。

Step2:fragment切換實作

這裡隻有2個fragment，一個是用于顯示圖檔，另一個顯示文本，預期效果是單擊螢幕後，圖檔下沉，文本顯示到頂層，再次單擊後則恢複原狀，即，文本消失>，圖檔上浮。

分析這些動畫的順序和效果，圖檔的下沉可以通過一個組合animation來做，1.縮放，例如縮小為原圖80%，2.旋轉，這裡的下層效果是首先圖檔x軸旋轉40度，>然後再将旋轉角度設定為0，3.添加一個半透明的遮罩，以示圖檔目前出于幕後狀态，

文本的出現則在圖檔的動作完成後，通過manager動态講其添加到畫面上，這裡的文本不是全屏的，否則就看不到後面的圖檔背景，文本的出現也可以添加動畫>，這裡文本出現時由下至上，消失時由上至下。

private void switchFragments () {
        if (mIsAnimating) {
            return;
        }
        mIsAnimating = true;
        if (mDidSlideOut) {
            mDidSlideOut = false;
            getFragmentManager().popBackStack();
        } else {
            mDidSlideOut = true;

            AnimatorListener listener = new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator arg0) {
                    FragmentTransaction transaction = getFragmentManager().beginTransaction();
                    transaction.setCustomAnimations(R.animator.slide_fragment_in, 0, 0,
                            R.animator.slide_fragment_out);
                    transaction.add(R.id.move_to_back_container, mTextFragment);
                    transaction.addToBackStack(null);
                    transaction.commit();
                }
            };
            slideBack (listener);
        }
    }
      

　　

作者：小文字

出處：http://www.cnblogs.com/avenwu/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利.