您好,登錄后才能下訂單哦!
本篇內容主要講解“Android中如何實現折紙動畫”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Android中如何實現折紙動畫”吧!
布局的實現
設計的第一個元素是可以對折的布局。我們的做法相當大膽:主布局(FoldableItemLayout)只包含一個特定的布局(在baselayout)。在動畫中,BaseLayout將它的內容寫入到緩存中,這是一個根據原始布局的尺寸專門創建的Bitmap對象。
class FoldableItemLayout extends FrameLayout { @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { Bitmap cacheBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); mBaseLayout.setCacheCanvas(new Canvas(cacheBitmap)); } } class BaseLayout extends FrameLayout { private Canvas mCacheCanvas; private void setCacheCanvas(Canvas cacheCanvas) { mCacheCanvas = cacheCanvas; } @Override public void draw(Canvas canvas) { mCacheCanvas.drawColor(0, PorterDuff.Mode.CLEAR); super.draw(mCacheCanvas); } }
此外,還需要兩個額外的視圖(PartView)——用于圖像的上、下兩半部分。它們將在緩存中顯示對應的數據,這些數據代表了該圖像(Bitmap)的上半部和下半部。兩個視圖填充了主布局的整個區域,但只顯示所需的部分。為了達到這種效果,我們計算了位圖的界限——在onDraw()方法中,我們讓畫布通過[drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)](http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap, android.graphics.Rect, android.graphics.RectF, android.graphics.Paint))方法來繪制所需的部分。
然后通過setRotationX()方法設置相應的角度,設法旋轉這些額外的視圖,從而實現圖像上半部和下半部的獨立旋轉。為了實現這個功能,我們為FoldableItemLayout添加了一個名為FoldRotation的新參數。
FoldRotation參數范圍是(-180,180]:
FoldRotation=0:兩個部分都不旋轉。在這種情況下,我們可以跳過位圖緩存,實時的顯示原始的布局。
0 <FoldRotation<90:下層的部分旋轉到 FoldRotation角度;上層部分不旋轉。
-90<FoldRotation<0:只有上層部分旋轉。
90≤FoldRotation<180:下層部分不再顯示。在這種情況下,包含下一布局的FoldableItemLayout應該覆蓋當前的FoldableItemLayout。
-180<FoldRotation≤-90:上層部分不再顯示。在這種情況下,包含先前的布局FoldableItemLayout應該覆蓋當前的FoldableItemLayout。
FoldRotation=180:兩個部分都隱藏。
現在有了一個二層布局,能夠“折疊”它包含的元素,這樣就可以做出一個FoldableListLayout——一個類似列表視圖的布局,它創建列表元素,并通過使用BaseAdapter將其封裝成FoldableItemLayout。在這種情況下,我們還使用了FoldRotation參數用來確定元素在列表中的位置。
例如,FoldRotation= 30,列表***個元素(FoldableItemLayout)的FoldRotation值為30,而第二個元素——FoldRotation= 150,最多可以同時顯示不超過2個元素。FoldRotation參數值的范圍依賴于元素的數量:如果列表包含一個元素,那么取值范圍就會是 [0,0],2——[0,180],3——[0,360]等。
在學會了在幾個元素之間使用折疊動畫滾動之后,我們解決了這個重大的挑戰:從任意的起點生成元素的打開動畫。利用已經實現的 FoldableListLayout, 并使其在兩個元素之間進行切換:封面布局和詳情布局。這兩種元素都應該顯示在屏幕上,但詳情元素應該是隱藏的。當用戶點擊一個封面元素時,應用程序會記住 當時的位置,并使用相同大小的空占位符視圖取代它(以免破壞屏幕上的其他元素),并移動蓋元素的下半專門創建的布局。以后這種布局將被用作 FoldableListLayout的***個元素。第二個元素將被替換為空占位視圖,與封面元素的方式相同。
眼見封面元素已經從屏幕上的最初位置展開,因此在動畫過程中我們的FoldableListLayout需要在封面元素和詳情元素的位置之間移動。這就是為什么要記住在動畫初始化過程中每個元素的初始位置和大小的原因。由于封面和詳情的大小有可能不同,我們需要在動畫期間同時擴展它們,以便使它們的寬度一致。
到此,相信大家對“Android中如何實現折紙動畫”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。