目錄

1、效果展示

2、實現AnimationViewInterface接口

3、解析動畫組成

4、翻轉單元——RotateView

1）前景背景圖

2）實現翻轉

3）實現翻轉動畫

5、百葉窗——BlindsView

1）初始化圖片矩陣

2）手動翻轉百葉窗

3）自動翻轉百葉窗

6、總結一下

源碼：

---

本篇是基于AnimationListView框架的，這個框架在上一篇中詳細的講解了，建議閱讀本篇前先熟悉Android魔法（第三彈）—— 一步步實現對折頁面。

1、效果展示

在上一章中我們實現對折的效果同時實現了一個AnimationListView的框架，在這個框架下我們可以實現很多效果。 本篇文章我們就在這個框架下實現一個百葉窗的效果，效果如下：

2、實現AnimationViewInterface接口

如果想在AnimationListView中應用一種效果，那么就需要實現AnimationViewInterface接口，如下 public?class?BlindsView?extends?LinearLayout?implements?AnimationViewInterface{ BlindsView的具體實現我們稍后在講解，先看看BlindsView繼承LinearLayout，為什么呢？

3、解析動畫組成

我們來看其中一幀的畫面，如下 可以看到整個百葉窗效果其實是由一個個小的方形組成的，這些方塊做水平翻轉的動作，并且在不同列有一個效果的時差，就形成了百葉窗的效果。 所以我們BlindsView實際上包含許多這樣的子view，真正的動畫是這些子view翻轉產生的，所以BlindsView要繼承LinearLayout來實現這種宮格布局。

4、翻轉單元——RotateView

上面提到的子view，我們定義為RotateView，繼承ImageView以便來裝載圖片。如下： public?class?RotateView?extends?ImageView?{

1）前景背景圖

觀察下圖中指示位置的方塊，并對比上一張同一位置的方塊。 可以發現當翻轉過180度的時候，該方塊顯示了另外一張圖片，實際上是下一頁該位置的部分。所以每個RotateView需要前景和背景兩張圖片，代碼如下： public?void?setBitmap(Bitmap?frontBitmap,?Bitmap?backBitmap){if(frontBitmap?==?null){return;}mFrontBitmap?=?frontBitmap;mBackBitmap?=?backBitmap;mRotatedBackBitmap?=?null;setImageBitmap(frontBitmap);setScaleType(ScaleType.FIT_XY);//初始化翻轉角度setRotationX(0);setRotationY(0); }

代碼比較簡單，默認顯示前景圖。

其中有個mRotateBackBitmap，我們后面會講。

2）實現翻轉

代碼如下： public?void?setRotation(float?value,?boolean?isRotateX){//設置翻轉角度if(isRotateX){setRotationX(value);}else?{setRotationY(value);}//將角度轉換為0-360之間，以便后面判斷float?rotate?=?value?%?360;if?(rotate?<?0)?{rotate?+=?360;}/***?設置縮放：當向垂直翻轉時縮小，反之恢復*?縮放的主要原因是在翻轉時，圖像會變形為梯形，這時圖片中心軸保持原來的寬度，*?則向上翻轉那邊會變大，部分圖像會超出無法顯示。所以這里用縮放處理一下，*?至于縮放大小，根據實際需求改變。*/float?scale?=?rotate?>?180???Math.abs(rotate?-?270)?:?Math.abs(rotate?-?90);scale?=?scale?/?90?*?(1?-?mScaleMin)?+?mScaleMin;if(isRotateX){setScaleX(scale);}else{setScaleY(scale);}//根據翻轉的位置，設置前景/背景圖片if(mBackBitmap?!=?null)?{if(mRotatedBackBitmap?==?null?||?this.isRotateX?!=?isRotateX)?{/***?首先會根據翻轉的方向，對背景圖片進行一次翻轉*?這樣當翻轉時背景圖片不會左右上下顛倒*/Matrix?matrix?=?new?Matrix();if?(isRotateX)?{matrix.postScale(1,?-1);}?else?{matrix.postScale(-1,?1);}mRotatedBackBitmap?=?Bitmap.createBitmap(mBackBitmap,?0,?0,mBackBitmap.getWidth(),?mBackBitmap.getHeight(),?matrix,?true);}/***?當翻轉在2、3象限顯示背景圖，在1、4象限顯示前景圖*/if?(rotate?>?90?&&?rotate?<?270)?{setImageBitmap(mRotatedBackBitmap);}?else?{setImageBitmap(mFrontBitmap);}}this.isRotateX?=?isRotateX; }

兩個參數，第一個參數是翻轉的角度，第二個參數是翻轉的方向（水平還是垂直）。

翻轉很簡單，調用setRotationX或setRotationY函數即可，主要是前景圖和背景圖的切換。

注意第二部分代碼，這里做了縮放的處理，是因為翻轉時由于實現了近大遠小的效果，所以翻轉時處于外側的一邊會增大并超出區域，這樣視覺上效果不好，所以做了縮放處理，保證整個翻轉過程可以完整的呈現在區域內。大家可以試著將這部分代碼去掉對比一下效果，這里就不展示了。

最后一步代碼則是根據反轉的角度不同設置不同的圖片。重點關注背景圖，由于背景圖實際上應該是水平鏡像的，所以使用要提前水平翻轉一下，翻轉后的就是mRotateBackBitmap。為了防止每次都做一次翻轉操作，判斷如果已經有mRotateBackBitmap并且翻轉方向未變則不必再執行。所以如果改變了背景圖，要重置mRotateBackBitmap為null，就是上面setBitmap函數提到的。

這樣當我們調用setRotate方法設置不同的角度就能得到不同的翻轉效果。

3）實現翻轉動畫

對于RotateView其實只需要setRotate函數，動畫部分在BlindsView中處理并調用setRotate即可。但是我們也希望這個類可以單獨使用，所以我加入了它自身的動畫處理，如下： public?void?rotateXAnimation(float?fromRotate,?float?toRotate,?long?duration){rotateAnimation(fromRotate,?toRotate,?duration,?0,?true); }/***?翻轉動畫*?@param?fromRotate?開始角度*?@param?toRotate? ?結束角度*?@param?duration*?@param?delay? ? ?動畫延時*?@param?isRotateX?是否以X為軸*/ private?void?rotateAnimation(float?fromRotate,?float?toRotate,?long?duration,?long?delay,?boolean?isRotateX){if(mAnimator?!=?null){mAnimator.cancel();}mAnimator?=?ValueAnimator.ofFloat(fromRotate,?toRotate);mAnimator.setStartDelay(delay);mAnimator.setDuration(duration);mAnimator.start();mAnimator.addUpdateListener(new?RotateListener(isRotateX)); }class?RotateListener?implements?ValueAnimator.AnimatorUpdateListener{private?boolean?isRotateX;public?RotateListener(boolean?isRotateX){this.isRotateX?=?isRotateX;}@Overridepublic?void?onAnimationUpdate(ValueAnimator?animation)?{float?value?=?(Float)(animation.getAnimatedValue());setRotation(value,?isRotateX);} }

其實也很簡單，用屬性動畫來實現即可。這里直接用ValueAnimator，這樣動畫的值會從fromRotate逐漸改變至toRotate。為動畫設置一個監聽器，并調用setRotate函數就實現了翻轉的動畫。

5、百葉窗——BlindsView

上面我們完成了翻轉單元——RotateView，下面講解如何用這些單元來組成百葉窗的效果。

1）初始化圖片矩陣

將整個的前景和背景圖片切割成小圖片設置給RotateView，并將這些RotateView以矩陣形式布局到BlindsView中，代碼如下： public?void?setBitmap(Bitmap?frontBitmap,?Bitmap?backBitmap){//處理圖片List<Bitmap>?subFrontBitmaps?=?getSubBitmaps(mRowCount,?mColumnCount,?frontBitmap);List<Bitmap>?subBackBitmaps?=?getSubBitmaps(mRowCount,?mColumnCount,?backBitmap);setBitmaps(mRowCount,?mColumnCount,?subFrontBitmaps,?subBackBitmaps); }/***?獲取圖片陣列*?將大圖片分割為rowCount*columnCount陣列的小圖片*?@param?rowCount*?@param?columnCount*?@param?bitmap*?@return*/ private?List<Bitmap>?getSubBitmaps(int?rowCount,?int?columnCount,?Bitmap?bitmap){List<Bitmap>?subBitmaps?=?new?ArrayList<Bitmap>();int?subWidth?=?bitmap.getWidth()?/?columnCount;int?subHeight?=?bitmap.getHeight()?/?rowCount;for(int?i?=?0;?i?<?rowCount;?i++){for(int?j?=?0;?j?<?columnCount;?j++){/***?這里計算每個葉面圖片的大小*?由于有余數，所以最后一張圖片大小單獨計算*/int?height?=?i?==?rowCount?-?1???bitmap.getHeight()?-?subHeight?*?i?:?subHeight;int?width?=?j?==?columnCount?-?1???bitmap.getWidth()?-?subWidth?*?j?:?subWidth;Bitmap?subBitmap?=?Bitmap.createBitmap(bitmap,?subWidth?*?j,?subHeight?*?i,?width,?height);subBitmaps.add(subBitmap);}}return?subBitmaps; }/***?設置圖片陣列*?將前景和背景圖片的陣列放入每個rotateview中*?@param?rowCount*?@param?columnCount*?@param?mFrontBitmaps*?@param?mBackBitmaps*/ private?void?setBitmaps(int?rowCount,?int?columnCount,?List<Bitmap>?mFrontBitmaps,?List<Bitmap>?mBackBitmaps){/***?為了復用，需要做些處理*?首先判斷現有行/列是否多余，多余直接remove，不足補充*///最大行數，是取現有行數和目標行數的最大值。int?maxRow?=?Math.max(getChildCount()?,?rowCount);LinearLayout.LayoutParams?params?=?new?LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,?1);params.weight?=?1;for(int?i?=?0;?i?<?maxRow;?i++){LinearLayout?subView?=?null;if(i?>=?getChildCount()?&&?i?<?rowCount){//如果現有行數不足，則補充。每一行都是水平的linearlayoutsubView?=?new?LinearLayout(getContext());subView.setOrientation(HORIZONTAL);addView(subView,?params);}else?if(i?<?getChildCount()?&&?i?>=?rowCount){//如果現有行數過多，則移除removeViewAt(i);i--;maxRow--;}else{subView?=?(LinearLayout)getChildAt(i);}//開始處理每一行中的每項if(subView?!=?null){//最大列數，是取現有列數和目標列數的最大值。int?maxColumn?=?Math.max(subView.getChildCount()?,?columnCount);LinearLayout.LayoutParams?subParams?=?new?LinearLayout.LayoutParams(1,?LinearLayout.LayoutParams.MATCH_PARENT);subParams.weight?=?1;for(int?j?=?0;?j?<?maxColumn;?j++){RotateView?rotateView?=?null;if(j?>=?columnCount?&&?j?<?subView.getChildCount()){//如果現有列過多，則移除subView.removeViewAt(j);j--;maxColumn--;}else?if(j?<?columnCount?&&?j?>=?subView.getChildCount()){//如果現有列不足，則補充。每個葉面是RotateViewrotateView?=?new?RotateView(getContext());subView.addView(rotateView,?subParams);}else{rotateView?=?(RotateView)subView.getChildAt(j);}//為重新整理好的矩陣填充圖片if(rotateView?!=?null){int?index?=?i?*?columnCount?+?j;rotateView.setBitmap(mFrontBitmaps.get(index),?mBackBitmaps.get(index));rotateView.setScaleMin(0.5f);}}}} }

可以看到先調用getSubBitmaps函數分別將前景和背景圖切割并返回一個list。

然后調用setBitmaps函數，根據指定的行和列循環新建RotateView，傳入對應的圖片并添加到布局中。

注意，這里復用之前已經存在的RotateView，如果不足則補充，多余的remove掉。

這部分雖然代碼較多，但是實際上就是每行add一個水平的LinearLayout（BlindsView本身是垂直的），然后逐行一個個add或復用RotateView并為其setBitmap。

2）手動翻轉百葉窗

與上一篇對折效果一樣，整個百葉窗效果的移動包括手動和自動兩個部分。當用戶touch屏幕并移動時，百葉窗跟隨touch的move事件去移動；當用戶touch up或end時，會通過一個animation自動完成剩余的部分。 手動移動階段的需要實現AnimationViewInterface的setAnimationPrecent方法，如下： @Override public?void?setAnimationPercent(float?percent,?MotionEvent?event,?boolean?isVertical){mAnimationPercent?=?percent;//獲取總的轉動的角度float?value?=?mAnimationPercent?*?getTotalVaule(isVertical);/***?遍歷每一個小葉面設置當前的角度*?根據轉動的方向不同，從不同的位置開始翻轉*/for(int?i?=?0;?i?<?mRowCount;?i++){LinearLayout?parent?=?(LinearLayout)getChildAt(i);for(int?j?=?0;?j?<?mColumnCount;?j++){RotateView?view?=?(RotateView)parent.getChildAt(j);float?subValue;if(value?>?0){if(isVertical){//向下滑動。從第一行開始轉動，每行轉動角度依次遞減subValue?=?value?-?mSpace?*?i;}else{//向右滑動。從第一列開始轉動，每列轉動角度依次遞減subValue?=?value?-?mSpace?*?j;}//保證轉動角度在0到180度內if(subValue?<?0){subValue?=?0;}else?if(subValue?>?180){subValue?=?180;}}else{if(isVertical){//向下滑動。從最后一行開始轉動，每行轉動角度依次遞減（注意由于value是負數，所以數值上是遞增）subValue?=?value?+?mSpace?*?(mRowCount?-?i?-?1);}else{//向左滑動。從最后一列開始轉動，每列轉動角度依次遞減（注意由于value是負數，所以數值上是遞增）subValue?=?value?+?mSpace?*?(mColumnCount?-?j?-?1);}//保證轉動角度在0到-180度內if(subValue?<?-180){subValue?=?-180;}else?if(subValue?>?0){subValue?=?0;}}//注意，如果是上下翻動，角度需要轉為負值，否則轉動的方向有誤view.setRotation(isVertical???-subValue?:?subValue,?isVertical);}} }

可以看到，一開始我們就通過getTotalValue計算出一個總的轉動角度，這個函數代碼如下：

private?float?getTotalVaule(boolean?isVertical){if(isVertical)?{return?mSpace?*?(mRowCount?-?1)?+?180;}else{return?mSpace?*?(mColumnCount?-?1)?+?180;} }

這塊需要解釋一下。從上面的圖片可以看到，每一列旋轉的角度時不同的，相鄰列會差一個角度，就是mSpace。

那么getTotalValue函數計算的是一個什么值？

在一個完整翻轉過程中，當第一列翻轉完成，其他列還沒有，所以過程并未結束。

這時假設第一列繼續翻轉，當第二列翻轉完成，第一列已經翻轉了mSpace * 1 + 180。那么繼續直到最后一列也完全翻轉過來，那么第一列實際翻轉了mSpace * (columnCount - 1) + 180。

所以mAnimationPercent * getTotalVaule(isVertical)實際上就是第一列當前的翻轉角度了，這樣就可以計算出其他列的翻轉角度。為每個RotateView設置rotation即可。

但是注意這并不是真正的翻轉角度，當已經完全翻轉180度后就不再需要翻轉。

代碼中處理了四個方向的翻轉，所以計算上多少有些不同，思路是一樣的。

3）自動翻轉百葉窗

自動階段通過實現startAnimation函數，代碼如下： @Override public?void?startAnimation(boolean?isVertical,?MotionEvent?event,?float?toPercent){if(mAnimator?!=?null?&&?mAnimator.isRunning()){return;}mAnimator?=?ValueAnimator.ofFloat(mAnimationPercent,?toPercent);//動畫持續時間根據起始位置不同mAnimator.setDuration((long)?(Math.abs(toPercent?-?mAnimationPercent)?*?mDuration));mAnimator.start();OnAnimationListener?onAnimationListener?=?new?OnAnimationListener(isVertical,?toPercent);mAnimator.addUpdateListener(onAnimationListener);mAnimator.addListener(onAnimationListener); }class?OnAnimationListener?implements?ValueAnimator.AnimatorUpdateListener,?Animator.AnimatorListener{private?boolean?isVertical;private?float?toPercent;public?OnAnimationListener(boolean?isVertical,?float?toPercent){this.isVertical?=?isVertical;this.toPercent?=?toPercent;}@Overridepublic?void?onAnimationUpdate(ValueAnimator?animation)?{setAnimationPercent((float)animation.getAnimatedValue(),?null,?isVertical);}@Overridepublic?void?onAnimationStart(Animator?animation)?{}@Overridepublic?void?onAnimationEnd(Animator?animation)?{mAnimationPercent?=?0;if(mOnAnimationViewListener?==?null){return;}if(toPercent?==?1){mOnAnimationViewListener.pagePrevious();}else?if(toPercent?==?-1){mOnAnimationViewListener.pageNext();}}@Overridepublic?void?onAnimationCancel(Animator?animation)?{mAnimationPercent?=?0;}@Overridepublic?void?onAnimationRepeat(Animator?animation)?{} }

通過代碼可以看到就是通過監聽一個float的屬性動畫，然后通過setAnimationPrecent改變翻轉狀態即可。

注意在動畫結束時調用切頁的回調。

這部分與上一篇對折效果類似，就不細說了。

6、總結一下

通過這兩篇文章，大家應該對AnimationListView這個框架有了了解。通過這個框架我們還可以實現更多更酷的效果，代碼大體上可以參考這兩個效果。關于這個框架及實現我們暫時告一段落，接下來會分析一些其他的，以后有機會我們可以在這個框架上實現更多的效果，大家如果有什么好的想法或自己實現的效果可以留言。

源碼：

關注公眾號：BennuCTech，發送“FastWidget”獲取完整源碼

總結

以上是生活随笔為你收集整理的Android魔法（第四弹）—— 一步步实现百叶窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。