Android5.0之后為我們提供了許多炫酷的界面過渡效果驻子，其中共享元素過渡也是很有亮點的一個效果飘庄，但這個效果只能在Android5.0之后使用慈缔，那今天我們就來將共享元素過渡效果兼容到Android4.0，讓5.0之前的手機也可以體驗這么炫酷的效果吧秀睛。
A transition animation compatible Library.
兼容Android5.0之后轉(zhuǎn)場動畫至Android4.0币他。
依慣例坞靶，首先來說下本文的行文思路吧：
一、頁面過渡兼容庫的使用
二蝴悉、頁面過渡兼容庫實現(xiàn)原理淺析
三彰阴、用兼容庫將開源項目MaterialLogin動畫效果兼容至Android4.0
原項目地址：MaterialLogin
將動畫效果兼容至Android4.0
![]()
Translation
一、頁面過渡兼容庫的使用
使用這個兼容庫也很簡單辫封，首先硝枉，在要控制跳轉(zhuǎn)的頁面調(diào)用TransitionController.getInstance().startActivity方法來實現(xiàn)跳轉(zhuǎn)，在其中主要是傳入當前界面要過渡到另一頁面的過渡元素View倦微，以及另一個頁面對應共享元素的View id值妻味。
然后，在跳轉(zhuǎn)到的第二個頁面調(diào)用TransitionController.getInstance().show方法來實現(xiàn)元素的過渡欣福，傳入?yún)?shù)也很簡單责球。
最后呢，在頁面返回的時候拓劝，調(diào)用TransitionController.getInstance().exitActivity方法即可雏逾。
這樣一個完整的界面過渡動畫基本就可以使用了，當然郑临，為了讓實現(xiàn)的效果更炫酷栖博，加入了對過渡動畫狀態(tài)的監(jiān)聽，可以在動畫結束時加入自己的操作厢洞，為方便起見仇让，兼容庫包含圓形元素過渡：調(diào)用ViewAnimationCompatUtils.createCircularReveal方法既可實現(xiàn)元素以圓形展開和收起典奉，使用方式和ViewAnimationUtils類一致，以及矩形元素過渡：調(diào)用：ViewAnimationCompatUtils.createRectReveal方法既可實現(xiàn)元素以矩形方式以左丧叽、上卫玖、右、下四個方向展開踊淳。
具體代碼如下：
//參數(shù)一：當前Activity
//參數(shù)二：跳轉(zhuǎn)意圖
//參數(shù)三：當前頁面跳轉(zhuǎn)至下一頁面的View
//參數(shù)四：下一頁面關聯(lián)的View id
TransitionController.getInstance().startActivity(this,new Intent(this, RegisterActivity.class),fab,R.id.fab);
//跳轉(zhuǎn)后頁面調(diào)用：
TransitionController.getInstance().show(this,getIntent());
可在show方法調(diào)用之前設置監(jiān)聽：
TransitionController.getInstance().setEnterListener(new TransitionCustomListener() {
@Override
public void onTransitionStart(Animator animator) {
}
@Override
public void onTransitionEnd(Animator animator) {
}
@Override
public void onTransitionCancel(Animator animator) {
}
});
//界面退出的時候調(diào)用
TransitionController.getInstance().exitActivity(PageDetailActivity.this);
//增加界面圓形轉(zhuǎn)換動畫
// 用法及參數(shù)和ViewAnimationUtils一致
ViewAnimationCompatUtils.createCircularReveal(cvAdd, cvAdd.getWidth()/2,0, fab.getWidth() / 2, cvAdd.getHeight());
//增加界面矩形轉(zhuǎn)換動畫
Animator mAnimator = ViewAnimationCompatUtils.createRectReveal( nsv, 0, nsv.getHeight(),ViewAnimationCompatUtils.RECT_TOP);
二假瞬、頁面過渡兼容庫實現(xiàn)原理淺析
先講了這個兼容庫的用法，現(xiàn)在來聊聊它是怎么實現(xiàn)的迂尝，可以把主要實現(xiàn)細分六步：
1脱茉、獲取跳轉(zhuǎn)頁面過渡元素的位置
2、將跳轉(zhuǎn)過渡元素的位置傳給下一個頁面
3雹舀、在跳轉(zhuǎn)到的頁面獲取位置信息并創(chuàng)建相同寬高大小的元素和其覆蓋屏幕的父容器芦劣，并將新創(chuàng)建的元素添加到父容器中，而父容器添加至根視圖中
4说榆、獲取跳轉(zhuǎn)到的頁面元素截圖并將其設為創(chuàng)建元素的背景
5、將當前新元素位置與跳轉(zhuǎn)到頁面對比獲取縮放比例與移動距離并開始動畫寸认，結束后將父容器隱藏
6签财、界面返回時將創(chuàng)建的父容器重新添加至下一個頁面動畫實現(xiàn)，將創(chuàng)建的元素以動畫形式返回初始位置偏塞，結束后移除父容器
1唱蒸、獲取跳轉(zhuǎn)頁面過渡元素的位置
//rect 來存儲共享元素位置信息
Rect rect = new Rect();
// 獲取元素位置信息
view.getGlobalVisibleRect(rect);
2、將跳轉(zhuǎn)過渡元素的位置傳給下一個頁面
// 將位置信息附加到 intent 上
intent.setSourceBounds(rect);
intent.putExtra(TRANSITION_NEXT_ID, nextShowViewId);
3灸叼、在跳轉(zhuǎn)到的頁面獲取位置信息并創(chuàng)建相同寬高大小的元素和其覆蓋屏幕的父容器神汹，并將新創(chuàng)建的元素添加到父容器中，而父容器添加至根視圖中
View virtalView = new View(activity);
Bitmap cacheBitmap = BitmapUtil.getCacheBitmapFromView(next_view);
// 獲取上一個界面中古今，元素的寬度和高度
final int mOriginWidth = mRect.right - mRect.left;
final int mOriginHeight = mRect.bottom - mRect.top;
getBundleInfo(next_view,mOriginWidth,mOriginHeight,mRect);
//創(chuàng)建覆蓋屏幕的父容器
mContainer = new FrameLayout(activity);
FrameLayout.LayoutParams mContainerParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//父容器添加至根視圖中
parent.addView(mContainer,mContainerParams);
if (mBgColor!=-1)
mContainer.setBackgroundColor(ContextCompat.getColor(activity, mBgColor));
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(mOriginWidth, mOriginHeight);
params.setMargins(mRect.left, mRect.top - BarUtils.getActionBarHeight(activity) -getStatusBarHeight(activity), mRect.right, mRect.bottom);
virtalView.setBackgroundDrawable(new BitmapDrawable(activity.getResources(), cacheBitmap));
//創(chuàng)建相同寬高大小的元素
virtalView.setLayoutParams(params);
//將新創(chuàng)建的元素添加到父容器中
mContainer.addView(virtalView);
4屁魏、獲取跳轉(zhuǎn)到的頁面元素截圖并將其設為創(chuàng)建元素的背景
//獲取跳轉(zhuǎn)到的頁面元素截圖
Bitmap cacheBitmap = BitmapUtil.getCacheBitmapFromView(next_view);
//將其設為創(chuàng)建元素的背景
virtalView.setBackgroundDrawable(new BitmapDrawable(activity.getResources(), cacheBitmap));
/**
* 獲取一個 View 的緩存視圖
*
* @param view
* @return
*/
public static Bitmap getCacheBitmapFromView(View view) {
final boolean drawingCacheEnabled = true;
view.setDrawingCacheEnabled(drawingCacheEnabled);
view.buildDrawingCache(drawingCacheEnabled);
final Bitmap drawingCache = view.getDrawingCache();
Bitmap bitmap;
if (drawingCache != null) {
bitmap = Bitmap.createBitmap(drawingCache);
view.setDrawingCacheEnabled(false);
} else {
bitmap = null;
}
return bitmap;
}
5、將當前新元素位置與跳轉(zhuǎn)到頁面對比獲取縮放比例與移動距離并開始動畫捉腥，結束后將父容器隱藏
//將當前新元素位置與跳轉(zhuǎn)到頁面對比獲取縮放比例與移動距離
getBundleInfo(next_view,mOriginWidth,mOriginHeight,mRect);
//開始動畫
runEnterAnim(virtalView,next_view,mContainer);
/**
* 計算縮放比例氓拼，以及位移距離
*
* @param
*/
private void getBundleInfo(View mView,int mOriginWidth,int mOriginHeight,Rect mRect) {
// 計算縮放比例
mScaleBundle.putFloat(SCALE_WIDTH, (float) mView.getWidth() / mOriginWidth);
mScaleBundle.putFloat(SCALE_HEIGHT, (float) mView.getHeight() / mOriginHeight);
Rect rect = new Rect();
mView.getGlobalVisibleRect(rect);
// 計算位移距離
mTransitionBundle.putFloat(TRANSITION_X, (rect.left+(rect.right - rect.left) / 2) - (mRect.left + (mRect.right - mRect.left) / 2));
mTransitionBundle.putFloat(TRANSITION_Y, (rect.top + (rect.bottom - rect.top) / 2) - (mRect.top + (mRect.bottom - mRect.top) / 2));
}
/**
* 模擬入場動畫
*/
private void runEnterAnim(View next_view,final View realNextView,final FrameLayout mContainer) {
next_view.animate()
.setInterpolator(new LinearInterpolator())
.setDuration(300)
.scaleX(mScaleBundle.getFloat(SCALE_WIDTH))
.scaleY(mScaleBundle.getFloat(SCALE_HEIGHT))
.translationX(mTransitionBundle.getFloat(TRANSITION_X))
.translationY(mTransitionBundle.getFloat(TRANSITION_Y))
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
realNextView.setVisibility(View.GONE);
if (mTransitionCustomListener!=null){
mTransitionCustomListener.onTransitionStart(animation);
}
}
@Override
public void onAnimationEnd(Animator animation) {
mContainer.setVisibility(View.GONE);
realNextView.setVisibility(View.VISIBLE);
if (mTransitionCustomListener!=null){
mTransitionCustomListener.onTransitionEnd(animation);
}
}
@Override
public void onAnimationCancel(Animator animation) {
if (mTransitionCustomListener!=null){
mTransitionCustomListener.onTransitionCancel(animation);
}
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
6、界面返回時將創(chuàng)建的父容器重新添加至下一個頁面動畫實現(xiàn)抵碟，將創(chuàng)建的元素以動畫形式返回初始位置桃漾，結束后移除父容器
/**
* 模擬退場動畫
*/
public void exitActivity(final Activity activity) {
if (nResId!=-1 && mContainer!=null){
//先將創(chuàng)建的父容器從上一個頁面移除
((ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT)).removeView(mContainer);
activity.finish();
activity.overridePendingTransition(0,0);
//將創(chuàng)建的父容器重新添加至下一個頁面
((ViewGroup) mFirstActivity.findViewById(Window.ID_ANDROID_CONTENT)).addView(mContainer);
mContainer.setVisibility(View.VISIBLE);
//開始動畫
mContainer.getChildAt(0).animate()
.setInterpolator(new LinearInterpolator())
.setDuration(300)
.scaleX(1)
.scaleY(1)
.translationX(0)
.translationY(0)
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
mFirstView.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
mFirstView.setVisibility(View.VISIBLE);
mContainer.setVisibility(View.GONE);
//結束后移除父容器
((ViewGroup) mFirstActivity.findViewById(Window.ID_ANDROID_CONTENT)).removeView(mContainer);
mContainer.removeAllViews();
mContainer = null;
mFirstView = null;
mFirstActivity =null;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}else{
activity.finish();
activity.overridePendingTransition(0,0);
}
}
三、用兼容庫將開源項目MaterialLogin動畫效果兼容至Android4.0
這里就簡單說下兼容MaterialLogin的實現(xiàn)拟逮，
首先撬统，界面跳轉(zhuǎn)，調(diào)用TransitionController.getInstance().startActivity(this,new Intent(this, RegisterActivity.class),fab,R.id.fab);方法既可敦迄，
之后恋追，跳轉(zhuǎn)至注冊頁面凭迹，調(diào)用TransitionController.getInstance().setEnterListener設置動畫監(jiān)聽，在過渡動畫結束時几于，調(diào)用ViewAnimationCompatUtils.createCircularReveal顯示圓形展開效果蕊苗，最后返回調(diào)用TransitionController.getInstance().exitActivity(RegisterActivity.this);,炫酷的登錄頁面就實現(xiàn)啦。
項目github地址：https://github.com/zhangke3016/TranslationCompat 歡迎star沿彭、fork朽砰。
