Android實現(xiàn)界面3D立體旋轉(zhuǎn)效果
如下圖所示:

如圖所示,當手勢從右向左滑動的時候A界面切換到B界面,中間的動畫是一種3D旋轉(zhuǎn)動畫。
為了實現(xiàn)這種效果,我們可以想一想,既然是手勢滑動而且還是橫向滑動,自然就想到了ViewPager。
問題是怎樣實現(xiàn)這種動畫效果?
viewPager默認的動畫效果就是橫向平移效果,但是也為我們開放了添加動畫的接口,滿足各種需求,那就是:
viewpager.setPageTransformer(boolean reverseDrawingOrder,@Nullable PageTransformer transformer);接收兩個參數(shù),重點關(guān)注第二個參數(shù):PageTransformer.是一個interface接口,需要我們?nèi)崿F(xiàn)它。
public class BasePageTransformer implements ViewPager.PageTransformer {@Overridepublic void transformPage(View view, float position) {Log.e("position",position+"");}}
實現(xiàn)了transformPage并且回調(diào)了一個View和position,view一定是指當前的顯示的view,而position通過Log打印可以發(fā)現(xiàn):

上圖是向左滑動時,position的變化示意圖:
當向左滑動時, position會返回每個頁面的區(qū)間變化值,如果設(shè)置預加載值為1(默認為1),就會返回3個區(qū)間變化值。分別是前一個界面左邊邊界的變化值[-2,-1] ; 當前界面左邊邊界的變化值[-1,0] ; 后一個界面左邊邊界的變化值[0,1].對應上圖position就應該是: 左邊:p1(-1 到 -2 ); 當前:p2(0 到 -1 ); 右邊:p3(1 到 0 );
當向右滑動時, position會返回每個頁面的區(qū)間變化值,如果設(shè)置預加載值為1(默認為1),就會返回3個區(qū)間變化值。分別是前一個界面右邊邊界的變化值[-1,0] ; 當前界面右邊邊界的變化值[0,1] ; 后一個界面右邊邊界的變化值[1,2].對應上圖position就應該是: 左邊:p1(-1 到 0 ); 當前:p2(0 到 1 ); 右邊:p3(1 到 2 );
有上面兩點可以觀察到,[-1,0]和[0,1]這兩個變化區(qū)間,無論是向左還是向右滑都會出現(xiàn),而且變化方向正好相反,也是用戶可見的變化區(qū)間.所有我們只用關(guān)注這兩個區(qū)間。
當向左滑動時,position的由0趨向于-1,記做[-1,0],是一個隨滑動不斷變化的值
當向右滑動時,position的由0趨向于1,記做(0,1],是一個隨滑動不斷變化的值
既然是橫向旋轉(zhuǎn)動畫,那就可以根據(jù)這個隨手滑動變化的值改變旋轉(zhuǎn)的角度就可以了.
public abstract class BasePageTransformer implements ViewPager.PageTransformer {public void transformPage(View view, float position) {Log.e("position",position+" "+view.toString());if (position <= 0.0f) {// [-1,0]handleLeftPage(view, position);} else if (position <= 1.0f) {// (0,1]handleRightPage(view, position);}}public abstract void touch2Left(View view, float position);public abstract void touch2Right(View view, float position);}
繼承抽象類,實現(xiàn)兩個抽象方法即可,一個是向左滑的動畫,一個是向右滑動的動畫。
public class PageTransformer3D extends BasePageTransformer {private float mMaxRotation = 90.0f;//旋轉(zhuǎn)角度public PageTransformer3D() {}public PageTransformer3D(float maxRotation) {setMaxRotation(maxRotation);}public void touch2Left(View view, float position) {//設(shè)置旋轉(zhuǎn)中心點在當前界面的右側(cè)view.setPivotX(view.getMeasuredWidth());view.setPivotY(view.getMeasuredHeight() * 0.5f);view.setRotationY(mMaxRotation * position);}public void touch2Right(View view, float position) {//設(shè)置旋轉(zhuǎn)中心點在當前界面的左側(cè)view.setPivotX(0);view.setPivotY(view.getMeasuredHeight() * 0.5f);view.setRotationY(mMaxRotation * position);//動態(tài)改變旋轉(zhuǎn)角度}public void setMaxRotation(float maxRotation) {if (maxRotation >= 0.0f && maxRotation <= 90.0f) {mMaxRotation = maxRotation;}}}
然后通過:
viewpager.setPageTransformer(true,new PageTransformer3D());設(shè)置給viewpager即可。
下面是演示動畫:

通過PageTransformer可以實現(xiàn)你想要的動畫效果!
