ViewPager切換動畫PageTransformer使用

KeishaHixso 10年前發布 | 7K 次閱讀 Android開發移動開發

來自： http://www.jcodecraeer.com//a/anzhuokaifa/androidkaifa/2014/0814/1650.html

Android從3.0開始，就添加了很多動畫，ViewPager當然也不例外，相對于非常平庸的默認切換動畫，Google給我們展示了兩個動畫例子：DepthPageTransformer和ZoomOutPageTransformer，實際上我們也可以通過實現ViewPager.PageTransformer來做出完全不同的切換動畫效果。關鍵是要理解transformPage(View view, float position)的參數。view理所當然就是滑動中的那個view，position這里是float類型，不是平時理解的int位置，而是當前滑動狀態的一個表示，比如當滑動到正全屏時，position是0，而向左滑動，使得右邊剛好有一部被進入屏幕時，position是1，如果前一頁和下一頁基本各在屏幕占一半時，前一頁的position是-0.5，后一頁的posiotn是0.5，所以根據position的值我們就可以自行設置需要的alpha，x/y信息。

下面，我們來看看Google官方提供的兩種動畫效果的代碼，很簡單，相信每個人看過之后，都能自己實現一種動畫效果，

DepthPageTransformer：

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

    @SuppressLint("NewApi")
    @Override
    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);

        }
    }

}

ZoomOutPageTransformer：

public class ZoomOutPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 0.85f;

    private static float MIN_ALPHA = 0.5f;

    @Override
    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);
        } 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);
        }
    }
}

有了這兩種效果，我們在代碼中設置一下就生效了：mPager.setPageTransformer(true, new DepthPageTransformer());

下面是效果圖：第一張是DepthPageTransformer效果，第二張是ZoomOutPageTransformer效果。