Android开发之ViewPager切换动画（只有你想不到，没有做不到）

好久不见，这段时间忙着做自己的产品，又有一段时间没更博了，今天带来ViewPager的切换动画，先来看下效果图：

ViewPager画廊效果

ViewPager卡片效果

这篇文章打算从3点切入：

1、关于clipChildren属性的了解与使用（实现ViewPager单屏显示多页面效果）

2、关于ViewPager切换动画的基础和示例讲解

3、关于PageTransFormer的实例讲解

1、关于clipChildren属性的了解与使用（实现ViewPager一屏显示多页面效果）

关于clipChildren这个属性，因为并不是很常用，可能有些朋友不熟悉甚至都没见过，其实它非常强大，可以帮你完成一些特殊的UI效果。

举个栗子：

底部栏的实现

对于这种底部Tab栏，大家应该再熟悉不过吧？那么中间这个突出来的播放按钮应该怎么实现呢？有的朋友会说用一层帧布局FrameLayout或者相对布局RelativeLayout作为外层，然后里面再嵌套一层线性布局LinearLayout，把其它部分的背景颜色设置成透明不就可以了。这样做其实是可以的，只不过这边我想带给你一种更加省时省力的方式，就是clipChildren这个属性的应用。

clipChildren这个属性是用来修饰ViewGroup容器的，它可以限制处于当前这个容器里的子控件是否可以越界绘制，默认为true，也就是限制子控件不允许越界，然后再来看下上面的底部Tab栏，我们不需要嵌套布局，只需要在根节点添加android:clipChildren="false"这个属性即可，来看一下示例代码：

底部Tab的实现

上面是效果图，我们允许相对布局RelativeLayout的子控件越界绘制，所以中间的icon图片可以突破LinearLayout布局，这里还需要注意的一点是，我设置中间的ImageView的对齐方式为android:layout_gravity="bottom"，不然图标是会往下沉屏幕之外去的。

有了这个基础后，我们来实现下ViewPager单屏显示多页面的效果

这是一个在根节点和ViewPager节点里添加了android:clipChildren="false"属性的布局，这里可能有人会问为什么2个节点都需要设置android:clipChildren呢？因为ViewPager默认只显示一屏，我们添加上这个属性后，ViewPager里面承载的ImageView就可以突破限制，在ViewPager之外绘制了，然后又因为ViewPager是在最外层布局RelativeLayout容器内的，所以也需要设置上这个属性。

然后我们补一下代码，就可以看到下面的效果了。

        mViewPager= (ViewPager) findViewById(R.id.vp_main_pager);
        mViewPagerAdapter=new ViewPagerAdapter(this,mImages);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(mViewPagerAdapter);

单屏ViewPager显示多页面效果

我们再来设置下页面与页面之间的外边距mViewPager.setPageMargin(40);，就可以看到这样的效果：

单屏ViewPager显示多页面效果

2、关于ViewPager切换动画的基础（PageTransFormer）和示例讲解

首先我们先来了解下关于ViewPager里的setPageTransformer方法，这里是源码：

/**
     * Sets a {@link PageTransformer} that will be called for each attached page whenever
     * the scroll position is changed. This allows the application to apply custom property
     * transformations to each page, overriding the default sliding behavior.
     *
     * 
Note: Prior to Android 3.0 ({@link Build.VERSION_CODES#HONEYCOMB API 11}),
     * the property animation APIs did not exist. As a result, setting a PageTransformer prior
     * to API 11 will have no effect.
     *
     * @param reverseDrawingOrder true if the supplied PageTransformer requires page views
     *                            to be drawn from last to first instead of first to last.
     * @param transformer PageTransformer that will modify each page's animation properties
     * @param pageLayerType View layer type that should be used for ViewPager pages. It should be
     *                      either {@link ViewCompat#LAYER_TYPE_HARDWARE},
     *                      {@link ViewCompat#LAYER_TYPE_SOFTWARE}, or
     *                      {@link ViewCompat#LAYER_TYPE_NONE}.
     */
    public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer,
            int pageLayerType) {
        if (Build.VERSION.SDK_INT >= 11) {
            final boolean hasTransformer = transformer != null;
            final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
            mPageTransformer = transformer;
            setChildrenDrawingOrderEnabledCompat(hasTransformer);
            if (hasTransformer) {
                mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
                mPageTransformerLayerType = pageLayerType;
            } else {
                mDrawingOrder = DRAW_ORDER_DEFAULT;
            }
            if (needsPopulate) populate();
        }
    }

这里我们提取一下重点：

关于方法的参数：

参数1表示加载到ViewPager的Pager页面是按正序还是逆序添加，这里我们一般设置成true就行，这个一般只有在帧布局的时候才有视觉效果区别。

参数2是一个PageTransformer接口，接口里带有一个回调方法，这个是重点，下面会单独提到。

关于兼容Andorid API11（3.0版本）：

这个东西对于现在来说意义不是很大了，现在开发APP基本上都是兼容到4.1以上了，如果非要兼容3.0以下，拷贝下ViewPager的源码，把这个判断判断注释掉即可。

Prior to Android 3.0 ({@link Build.VERSION_CODES#HONEYCOMB API 11}),the property animation APIs did not exist. As a result, setting a PageTransformer prior to API 11 will have no effect.

上面这句话是讲解为什么官方不支持3.0以下的原因，因为在Android3.0之前是没有属性动画的，而官方的示例代码使用的却是属性动画，我们如果要向下兼容，使用其它的方式实现动画即可。

    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.
         */
        void transformPage(View page, float position);
    }

重点来了，这里的transformPage是PageTransformer接口里未实现的方法，有两个回调参数，它们分别表示：

参数page：当前页的View

参数position：这里需要特别注意，它不代表当前第几页，而是代表当前页面值和一个滑动距离的数值，在当前手机屏幕能看到的页面永远为0，往左递减，往右递增，也就是如下图：

数字代表position

记住：（重要的话说三遍）

当前手机屏幕显示的页面的position值永远为0

当前手机屏幕显示的页面的position值永远为0

当前手机屏幕显示的页面的position值永远为0

接下来我们来分析一种情况：当我们的手指往左滑的时候，此时发生的事情：

页面：位置0会走到原-1的位置，位置1会走到原0的位置，以此类推。

position值：position的值逐渐从0开始下降到-1，从1开始下降到0，这里我们只考虑[-1,1]区间，之外的区间我们是看不到的，因为我们每次只能滑一屏。

具体大家打印下Log日志就会很清晰了：

   mViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                 Log.i("TAG","【page】："+page+"，【position】："+position);
            }
        });

日志显示，反方向滑动页面正好是相反的，这里就不贴出来了。

【页面从1到0】
【position】：0.95357144
【position】：0.94166666
【position】：0.572619
【position】：0.086904764
【position】：0.0035714286
【position】：0.0
========================
【页面从0到-1】
【position】：-0.09404762
【position】：-0.10595238
【position】：-0.475
【position】：-0.79761904
【position】：-0.9607143
【position】：-1.00

我们所有的动画操作就可以根据这里的page和position来完成了，当然官方也给了我们小例子示范，一起来看下：

官方示例 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);
        }
    }
}

这里简单讲一下（当前屏幕显示的position值为0），假设页面从1到2，也就是手指向左滑，页面往左走：

1、position<-1的时候刚好是当前屏幕的左数第二页，是看不到的，position>1刚好是当前屏幕的右数第二页，也是看不到的，所以这边设置了透明度为0。

2、position <= 0，position从0到-1（动图页面1到2），此时的页面1的效果是不透明，不缩放，向左走。

3、position <= 1，position从1到0（动图页面2到1），此时的效果是页面随着position值比例的减小，页面从透明到不透明，从小到大，页面不滑动（抵消）。

3、关于PageTransFormer的实例讲解

说了这么多，来实战一下吧，先从上面我们实现的单屏显示多页面的ViewPager开始，加一些效果，比如我们想让边上的两页面显示半透明并伴随着左右滑动有放大缩小的效果，直接来看下PageTransformer的代码：

package com.lcw.dynamicviewpager.transformer;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
 * 画廊效果Transformer（半透明+缩放）
 * Create by: chenwei.li
 * Date: 2017/12/8
 * time: 14:55
 * Email: lichenwei.me@foxmail.com
 */
public class GalleryTransformer implements ViewPager.PageTransformer {
    private static final float MAX_ALPHA=0.5f;
    private static final float MAX_SCALE=0.9f;
    @Override
    public void transformPage(View page, float position) {
        if(position<-1||position>1){
            //不可见区域
            page.setAlpha(MAX_ALPHA);
            page.setScaleX(MAX_SCALE);
            page.setScaleY(MAX_SCALE);
        }else {
            //可见区域，透明度效果
            if(position<=0){
                //pos区域[-1,0)
                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1+position));
            }else{
                //pos区域[0,1]
                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1-position));
            }
            //可见区域，缩放效果
            float scale=Math.max(MAX_SCALE,1-Math.abs(position));
            page.setScaleX(scale);
            page.setScaleY(scale);
        }
    }
}

我们让可见区域[-1,1]根据position值的变化做了一些动作，假设页面往左滑：

1、在区间[-1,0）里是从0到-1，也就是透明度随着position的减小而减小，最终为0.5f（半透明）。

2、在区间(0,1)里是从1到0，也就是透明度随着position的减小而增大，最终为1f（不透明）。

3、它们的缩放规则是随着position减小，先小后大，因为这边有个绝对值abs方法和最大数max方法作用着，当position的绝对值大于0.9f的时候，页面才开始放大。

画廊效果图

是不是很简单啊？哈哈，再来写个效果吧，横向的ViewPager我们看多了，这里我们来实现一个纵向排列的ViewPager，并实现它的滑动效果。

首先我们来思考下如何实现纵向排列，我们知道ViewPager默认是水平排开的，每个页面之间的距离是页面的宽度，那么是不是让第二个页面的x轴往左移动一个页面的距离，第三个页面的x轴往左移动2个页面的距离。。。以此类推

          //移动X轴左边，使得卡片在同一坐标
          page.setTranslationX(-position * page.getWidth());

然后我们需要把每个页面往下拉一点，也就是把y轴坐标往下移动一些，这里为了使页面好看一些，我做了一个按比例缩放效果，mOffset是一个偏移值

           //缩放卡片并调整位置
            float scale = (page.getWidth() - mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
            //移动Y轴坐标
            page.setTranslationY(position * mOffset);

此时运行代码我们就可以看到这样的效果了：

纵向排列的ViewPager

不过此时会发现，页面滑动不了了，这是为什么呢，还记得我们之前设置的x轴偏移吗？

          //移动X轴左边，使得卡片在同一坐标
          page.setTranslationX(-position * page.getWidth());

正常情况下，手指往左滑，当页面从0到-1的时候是向左走的，但是我们这边设置了x轴的移动，随着position的减小，页面是往右走的（正数为x轴右边），刚好互相抵消了，所以这里我们需要对滑动进行特殊处理（顺带加了一个45°的旋转动画）：

     if (position <= 0) {
            //页面滑动的时候
            page.setTranslationX(0f);
            page.setRotation(45 * position);
            page.setTranslationX((page.getWidth() / 2 * position));
        } else {
            //页面不滑动的时候
            //移动X轴坐标，使得卡片在同一坐标
            page.setTranslationX(-position * page.getWidth());
            //缩放卡片并调整位置
            float scale = (page.getWidth() - mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
            //移动Y轴坐标
            page.setTranslationY(position * mOffset);
        }

卡片效果

到这里，以上的效果就都实现了，有了这些基础，剩下的就靠你的想象力了，贫穷会限制你的想象力，但代码不会，快去实现自己的狂拽酷炫吊炸天的动画效果吧~

最后补充：

其实以上说的这些效果还有一种更加优雅的实现方法，就是利用RecyclerView实现，哈哈哈，先卖个关子，有时间再来写吧~

源码下载:

这里附上源码地址（欢迎Star，欢迎Fork）：源码下载

• 作者：李晨玮

• 链接：http://www.jianshu.com/p/c9e8448472ed