ViewPager頁面切換特效如下效果
看效果:
效果1:
效果2:
下面就開始講解如何實現這兩個頁面翻轉效果
1.首先你得會ViewPager控件的使用(廢話!現在還有人不會使用嗎???!!)
2.你得了解ViewPager的一個回調函數ViewPager.PageTransformer(用於設置ViewPager切換時的動畫效果),我們頁面切換特效基本就靠他了。
3.你得了解屬性動畫(這一部分我會在以后的博文中講到,讀者也可以去讀其他的文章,百度一下一大推)
當上面的都掌握了,你基本寫出任何頁面轉換特效出來了!我只是拿兩個做案列
代碼實現
一.頁面布局+初始化ViewPager(這邊我直接上代碼了,不細說了!太簡單了)
簡單布局:
初始化ViewPager:
ViewPager的適配器代碼:
至此,我們的准備工作都已經OK! 下面就是真正的干貨了!!!
二.了解ViewPager.PageTransformer(用於設置ViewPager切換時的動畫效果)這個這個回調函數
1.首先我們看一下這個函數ViewPager.PageTransformer:
這個函數有兩個參數一個是View 還有一個是position。我先解釋下這個position,首先呢他的有效取值范圍在[-1,1]
我們就是根據這個值的變化來不停的改變view的相應的屬性,以此達到相應的頁面轉換效果!下面 我就以一張圖的形式來解釋下view和position之間的關系 大家看一下圖解就明白了!
說白了就是我在[0,-1)的時候操作A頁面 在[1,0)操作B頁面 此時頁面對應這個函數中的view變量 當[0.-1)時view是A頁面 當[1,0)時view是B頁面
2.下面就是開始分析第一個效果,我們可以到的是 A頁面沿着X軸縮小 B頁面沿X軸放大
看代碼:
接着我們再來分析第二個效果,我們看出是沿着Y旋轉180度
看代碼
該段代碼中我們設置View的旋轉中心是:
page.setPivotY(page.getMeasuredHeight() / 2);
page.setPivotX(page.getMeasuredWidth() / 2);
A頁面Y軸旋轉:[0,-180)
B頁面Y軸旋轉:[180,0)
至此,已經講解完成了!!
總結
讀者只要了解了ViewPager.PageTransformer這個回調函數基本上頁面切換特效已經掌握了!關於這個函數要了解的就是view和position之間的關系。了解兩者之間的關系 該函數你就已經了解!其次就是屬性動畫的功底(不在本篇文章之內)!
我還在強調一次就是:position可以用變化范圍[-1,1] 他與View的對應的關系是:將設ViewPager中的一二兩業分別對應A頁,B頁。那么AB兩頁對應的position變化就是:A[ 0, -1) B[ 1 , 0 ).讀者了解這個關系之后一切問題就迎刃而解了!!!