Sliding Fragmentandroid
介紹:該案例爲傳統的Fragment增長了個性化的補間動畫,其效果是原有fragment向屏幕內作必定的下沉,新的fragment顯示在最上層,產生層疊效果的多個fragments。
Video: http://www.youtube.com/watch?v=xbl5cxfA1n4ide
Source:http://developer.android.com/shareables/devbytes/SlidingFragments.zip動畫
本文將簡單分析其實現流程及原理
Step1:添加Fragment並設置點擊的切換事件
首先添加一個fragment,並設置顯示內容已作區別,案例中顯示了一張圖片,接着設置單擊事件,爲了使得咱們單擊任意位置都能觸發fragment的切換動畫,這
裏須要爲用於展現圖片的fragment,顯示文本的fragment以及黑色背景view都添加該事件監聽器。spa
Step2:fragment切換實現
這裏只有2個fragment,一個是用於顯示圖片,另外一個顯示文本,預期效果是單擊屏幕後,圖片下沉,文本顯示到頂層,再次單擊後則恢復原狀,即,文本消失>,圖片上浮。
分析這些動畫的順序和效果,圖片的下沉能夠經過一個組合animation來作,1.縮放,例如縮小爲原圖80%,2.旋轉,這裏的下層效果是首先圖片x軸旋轉40度,>而後再將旋轉角度設置爲0,3.添加一個半透明的遮罩,以示圖片當前出於幕後狀態,code
文本的出現則在圖片的動做完成後,經過manager動態講其添加到畫面上,這裏的文本不是全屏的,不然就看不到後面的圖片背景,文本的出現也能夠添加動畫>,這裏文本出現時由下至上,消失時由上至下。blog
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); } }