----------8/8/2015 12:10:54 AM
今天看到了雅虎天氣的城市之間的頁面切換，有視差的感覺，上網(wǎng)查了下，那就是視差的效果。心想正好能夠把它用在項目中的引導(dǎo)畫面上去，能增加交互性和用戶體驗，對用戶來說是第一印象是增加好感和把應(yīng)用用下的動力。
于是開始動手找資料，一般應(yīng)用的引導(dǎo)畫面就是ViewPager幾張圖片之間的切換，用一整張切成好多張，還是每張都不一樣，這就需要客戶的需求來定了，美工給你切怎么樣的圖，你就用怎么樣的圖，我們要把效果做出來。動畫的效果主要用到了PageTransformer，在ViewPager中調(diào)用setPagerTransFarmer(boolean reverseDrawingOrder, PageTransformer transformer)的方法。我們來看下這兩個參數(shù)，第一個是一個boolean值，意思是是否提供一個PageTransFormer的接口來測繪從最后一個頁面到第一個，而不是第一個到最后一個。(說實話這句話看的不是很懂)，第二個參數(shù)就是我們要用到的接口了，我們要自定義一個該接口的實現(xiàn)類，來確保每個頁面再切換的時候會實現(xiàn)我們需要的效果。
來看下這個PageTransformer這個接口
public interface PageTransformer {
/**
* Apply a property transformation to the given page.
*
* @param page Apply the transformation to this page
* @param position Position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
public void transformPage(View page, float position);
}
接口提供了一個需要我們實現(xiàn)的方法，然后在onPageScrolled()方法中回掉了它，于是確定了這個方法是在每個頁面切換的時候調(diào)用的。好吧現(xiàn)在我們來實現(xiàn)這個接口
public class BasePagerTransFarmer implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
System.out.println("position = " + position);
}
}
想來第一個參數(shù)是ViewPager的當(dāng)前顯示的View，第二個position具體是什么玩意兒，我們先把他打印出來看一下吧。
System.out﹕ position = -0.0055555557
System.out﹕ position = 0.99444443
System.out﹕ position = -0.0074074073
System.out﹕ position = 0.9925926
...
System.out﹕ position = -0.9962963
System.out﹕ position = 0.0037037036
System.out﹕ position = -0.99814814
System.out﹕ position = 0.0018518518
劃了一張圖過去，好像每兩個值相加等于一，這個position應(yīng)該就是兩個頁面占屏幕的比例吧，或者應(yīng)該說是 getLeft和屏幕寬度的比值，一張正往左邊移出去，另一張圖從屏幕的右邊移進(jìn)來。
這樣，就可以用這個position的值來確定對View的動畫執(zhí)行的程度了。
再來看position的值，取值范圍是(-1,1)，再根據(jù)兩張圖來仔細(xì)點區(qū)分可以分成(-1,0],[0,1)。前面是出去的圖的取值范圍從0到-1，后面是進(jìn)來的圖的取值，從1到0。
這樣就可以判斷移進(jìn)來和移出去的圖根據(jù)這個position做需要的操作了
if (position<-1) {
}
if(position<=0){
}else if(position<=1){
}
在-1和1之間對view或者view中的子元素設(shè)置動畫，就可以達(dá)到我們需要的目的了。
然后來看雅虎天氣的視差效果，應(yīng)該就是讓View中的ImageView移動的比View速度慢，就可以達(dá)到那種視差效果了。
if (position<-1) {
}else if(position<=0){
page.setTranslationX(0);
page.setAlpha(1);
page.setScaleX(1 );
page.setScaleY(1 );
//page.setRotationY((1+position)*360);
}else if(position<=1){
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setTranslationX(width*-position);
page.setAlpha(1 - position);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
//page.setRotationY((1-position)*360);
}
可以實現(xiàn)漸變，旋轉(zhuǎn)，平移，縮放動畫，可以找到最炫酷的組合模式，打造自己滿意的效果。
