Android ViewPager动画

Android ViewPager动画

3.0以上Viewpager切换添加动画，方式很简单，viewpager通过setPageTransformer方法即可达到效果。而其重点主要在于setPageTransformer的第二个参数如何使用

上。

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

从源码注释可以看出，第二个参数PageTransformer作为一个接口，核心方法只有一个。page参数很好理解，指的是viewpage中被移动的View。

第二个参数position是移动的方向。

个人建议将position理解为偏移量offset会比较好，因为他实际是认为view当前所在的位置，而positioin在其他地方和index等同，容易混淆。

先上个个人理解的概念（纯手绘，这要是还有人盗图我也是醉了）：

如图， 正中间是Viewpager显示在手机屏幕上的View，View左边界在不动的时候认为是offset是0，左边的view(如果有的话)在不动的时候左边的offset是-1，右边的view

（如果有的话）在不动的时候左边offset是1。

则将viewpager向右滑动： 左边view：  -1 < offset < 0

                                           中间view:     0 < offset < 1

                                          右边view:    1 < offset < 正无穷

如果理解这一套，做一个简单的动画就真的是很简单了。做一个滑动时图片透明度降低，大小变化的事例。 源码下载

    

 mVp.setPageTransformer(true, new ViewPager.PageTransformer() {

            private View page;
            private float offset;

            /**
             * 这个参数原来叫position,个人建议理解为offset会更好
             * 看注释，其实这么理解会比较好：
             * 屏幕显示的页面范围为[0-1)的范围，在屏幕左边的为（-1,0),右边为[1,正无穷)
             * 那么页面从左滑到右，就是page的offset 由-1变到0的过程。这个过程中-1是表示页面再最左边，0是刚好到正中间
             * 那从中间滑到右，则是 0变到1的过程。
             * 从右往做滑，以此类推： 右边页面是从1到0，从中间到左，就是从0到-1
             *  |-左边-|-显示区域-|-右边-|
             * -1     0          1
             * @param page
             * @param offset
             */
            @Override
            public void transformPage(View page, float offset) {
                this.page = page;
                this.offset = offset;

                //大小变化
                //当页面停止时，页面所有属性还原，因为设置之后会对page一直生效
                if (offset <= -1 || offset == 1 || offset == 0) {
                    page.setAlpha(1);
                    page.setScaleX(1);
                    page.setScaleY(1);
                }
                //当3个页面都在移动的时候，设置透明度和大小
                else if (offset < 0 || offset < 1) {
                    page.setAlpha(0.5f);
                    page.setScaleX(0.75f);
                    page.setScaleY(0.75f);
                }


                /*
                透明度变化
                //从中间滚到右边
                if (offset <= 0) {
                    page.setAlpha(1 + offset);
                }
                //从右边滚到中间
                else if (offset <= 1) {
                    page.setAlpha(1 - offset);
                }*/
            }
        });