ViewPager切換動畫——PageTransformer

官方示例地址：
http://developer.android.com/training/animation/screen-slide.html

ViewPager的方法：

setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)// 用於設置ViewPager切換時的動畫效果

官方給出了兩種效果實例：

一、DepthPageTransformer

public class DepthPageTransformer implements ViewPager.PageTransformer {  
    private static final float MIN_SCALE = 0.75f;  

    public void transformPage(View view, float position) {  
        int pageWidth = view.getWidth();  

        if (position < -1) { // [-Infinity,-1) 
            // This page is way off-screen to the left. 
            view.setAlpha(0);  

        } else if (position <= 0) { // [-1,0] 
            // Use the default slide transition when moving to the left page 
            view.setAlpha(1);  
            view.setTranslationX(0);  
            view.setScaleX(1);  
            view.setScaleY(1);  

        } else if (position <= 1) { // (0,1] 
            // Fade the page out. 
            view.setAlpha(1 - position);  

            // Counteract the default slide transition 
            view.setTranslationX(pageWidth * -position);  

            // Scale the page down (between MIN_SCALE and 1) 
            float scaleFactor = MIN_SCALE  
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));  
            view.setScaleX(scaleFactor);  
            view.setScaleY(scaleFactor);  

        } else { // (1,+Infinity] 
            // This page is way off-screen to the right. 
            view.setAlpha(0);  
        }  
    }  
}

viewpager使用

mViewPager.setPageTransformer(true, new DepthPageTransformer());

效果圖

二、ZoomOutPageTransformer

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {  
    private static final float MIN_SCALE = 0.85f;  
    private static final float MIN_ALPHA = 0.5f;  

    @SuppressLint("NewApi")  
    public void transformPage(View view, float position)  
    {  
        int pageWidth = view.getWidth();  
        int pageHeight = view.getHeight();  

        Log.e("TAG", view + " , " + position + "");  

        if (position < -1)  
        { // [-Infinity,-1) 
            // This page is way off-screen to the left. 
            view.setAlpha(0);  

        } else if (position <= 1) //a頁滑動至b頁 ； a頁從 0.0 -1 ；b頁從1 ~ 0.0 
        { // [-1,1] 
            // Modify the default slide transition to shrink the page as well 
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));  
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;  
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;  
            if (position < 0)  
            {  
                view.setTranslationX(horzMargin - vertMargin / 2);  
            } else  
            {  
                view.setTranslationX(-horzMargin + vertMargin / 2);  
            }  

            // Scale the page down (between MIN_SCALE and 1) 
            view.setScaleX(scaleFactor);  
            view.setScaleY(scaleFactor);  

            // Fade the page relative to its size. 
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)  
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));  

        } else  
        { // (1,+Infinity] 
            // This page is way off-screen to the right. 
            view.setAlpha(0);  
        }  
    }  
}

viewpager使用

mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

還記得我上一篇博客 一屏顯示多個ViewPager子item不？
http://blog.csdn.net/codenoodles/article/details/50991793
下面來給它加上切換動畫：
直接上代碼：

package com.upc.viewpagerGallery.View;

import android.support.v4.view.ViewPager;
import android.view.View;

/** * Created by Explorer on 2016/3/26. */
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.9f;
    private static final float MIN_ALPHA = 0.5f;

    private static float defaultScale = 0.9f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
// view.setAlpha(0);
            view.setScaleX(defaultScale);
            view.setScaleY(defaultScale);
        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
// view.setAlpha(MIN_ALPHA +
// (scaleFactor - MIN_SCALE) /
// (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
// view.setAlpha(0);
            view.setScaleX(defaultScale);
            view.setScaleY(defaultScale);
        }
    }
}

這裏就不貼效果圖了，你們能夠在下一篇博客裏看到效果。

說一下原理：
position範圍不一樣執行不一樣的邏輯
- （無窮，-1）：左邊view不可見
- [-1，0]：左邊view可見
- (0，1]： 右邊view可見
- (1,無窮):右邊view不可見

咱們能夠根據這個原理本身定製想要的效果。