Android-AnimViewPager自定义切换效果

 

 先看看效果：

  

  

  之前看过github上的JazzyViewPager，通过重写ViewPager的 onPageScrolled方法，来实现自定义页面切换效果。然而，google其实为已经开发者提供了实现自定义切换效

果的接口，我们可以在developer.android.com上看到关于ViewPager.PageTransfromer的介绍

    

android.support.v4.view.ViewPager.PageTransformer

Class Overview

---

A PageTransformer is invoked whenever a visible/attached page is scrolled. This offers an opportunity for the application to apply a custom transformation to the page views using animation properties.

As property animation is only supported as of Android 3.0 and forward, setting a PageTransformer on a ViewPager on earlier platform versions will be ignored.

    要展示不同于默认滑屏效果的动画，我们需要实现ViewPager.PageTransformer接口，然后把它补充到ViewPager里。在transformPage()的实现中，基于当前屏幕显示的页面的position（position 由transformPage()方法的参数给出）决定哪些页面需要被动画转换，这样我们就能创建自己的动画。position参数表示特定页面相对于屏幕中的页面的位置。它的值在用户滑动页面过程中动态变化。当某一页面填充屏幕，它的值为0。当页面刚向屏幕右侧方向被拖走，它的值为1。如果用户在页面1和页面2间滑动到一半，那么页面1的position为-0.5并且页面2的position为 0.5。

     1、这里，我们可以理解为，position即为View左上角的横坐标     2、值得注意的是，ViewPager的页面有默认的滑屏动画，因此如果我们需要页面保持不动，则需要自己写位移来抵

      developer.android.com已经给出了两种动画切换效果，通过学习，我自己添加了一种动画效果，类中定义了三种切换效果：

    private ANIM mANIM = ANIM.ZoomOut;        public void setANIM(ANIM anim){        this.mANIM = anim;    }        public enum ANIM{        ZoomOut,Depth,Rotate    }

      然后，接下来就是动画效果的实现，这里展示developer.android.com上展示的ZoomOut切换效果的实现：

 private void AnimZoomOut(View view, float position){        int pageWidth = view.getWidth();        int pageHeight = view.getHeight();        if (position < -1) {            //页面离开左边视图区            view.setAlpha(0);        } else if (position <= 1) { // [-1,1]            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) {                //页面处于Y轴左侧                view.setTranslationX(horzMargin - vertMargin / 2);            } else {                //页面处于Y轴右侧                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 {            //页面离开右边视图区            view.setAlpha(0);        }    }

      最后，这个自定义的AnimViewPager用法和普通的ViewPager是一样的，我们也可以自己定义自己想要的切换动画，哈哈，顿时感觉自己的ViewPager高大上了，最后的最后，还是自定义AnimViewPager的链接：AnimViewPager