ViewPager的PageTransformer 实现各种Page变换动画效果分析

最新推荐文章于 2024-08-13 08:11:48 发布

粤语伶仃

最新推荐文章于 2024-08-13 08:11:48 发布

阅读量2.8k

点赞数

分类专栏： Android 文章标签： android viewpager 动画

本文链接：https://blog.csdn.net/monkey646812329/article/details/52589333

版权

Android 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一，PageTransformer 的简单介绍
从Android 3.0开始，ViewPager提供了PageTransformer接口来帮助应用方便实现各种切换效果，该接口是在ViewPager滑动的时候被调用的，下面是其定义：

/**
 * 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.
 *
 * <p>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.</p>
 */
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);
}

从上面可以看出ViewPager实现各种Page页面变换的动画效果只要实现transformPage这一个方法即可，其中：
(1)page
用来表示当前被滑动的页面所对应的view，通过实际的使用会发现，滑动的时候其返回的page并不都是同一个对象，因为滑动不仅导致当前界面慢慢滑出屏幕，同时导致相关的新界面慢慢滑入屏幕，下面是通过源码查看其被调用的地方：

protected void onPageScrolled(int position, float offset, int offsetPixels) {
     ...
     if (mPageTransformer != null) {
         final int scrollX = getScrollX();
         final int childCount = getChildCount();
         for (int i = 0; i < childCount; i++) {
             final View child = getChildAt(i);
             final LayoutParams lp = (LayoutParams) child.getLayoutParams();
             if (lp.isDecor) continue;
             final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();
             mPageTransformer.transformPage(child, transformPos);
         }
     }
     ...
}

可以看出，每次滑动时，都会依次取ViewPager中每个child然后调用transformPage方法,验证了上面我们说明的每次滑动时返回的page是可能不同的。
(2)position
给定界面的位置相对于屏幕中心的偏移量。在用户滑动界面的时候，是动态变化的。假设ViewPager中有A，B，C页面，当前停留在B界面，则B界面此时的position为0，A界面的position为-1，C界面的position为1，而后向左滑动界面（C -> B）,此过程中A的position在区间(-Infinity,-1)变化，B的position在区间[-1,0)变化，C的position在区间[0,1)变化，并且会发现B的position跟C的position绝对值之和为1，而正负则表示了滑入和滑出状态。理解清楚了position的变化过程对后面如何利用PageTransformer实现各种变化是很有用的。
当应用实现好了PageTransformer接口后，就可以通过ViewPager提供的setPageTransformer()设置进去。

    public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)

reverseDrawingOrder用来指定是否要改变page的绘制顺序，在getChildDrawingOrder()时会用到，true则表示从最后一个开始绘制。
通过对position的介绍可知，我们在实现PageTransformer时主要还是关注[-1,1] 区间的值。
首先拿最简单的AlphaPageTransformer变换来说，其实现如下:

public class AlphaPageTransformer implements ViewPager.PageTransformer {
    private float mMinAlpha = 0.5f;

    public void transformPage(View view, float position) {
        if (position < -1) {
            view.setAlpha(mMinAlpha);
        } else if (position <= 0) {
            float factor = mMinAlpha + (1 - mMinAlpha) * (1 + position);
            view.setAlpha(factor);
        } else if(position <= 1){
            float factor = mMinAlpha + (1 - mMinAlpha) * (1 - position);
            view.setAlpha(factor);
        } else {
            view.setAlpha(mMinAlpha);
        }
    }
}

可以总结出一套通用简单的规律：

public class DepthPageTransformer implements ViewPager.PageTransformer {
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) {
           //具体实现，此时page在界面的左边并且已经不显示在当前界面
        } else if (position <= 0) {
            //具体实现，此时page正从中间往左侧移动
        } else if (position <= 1) {
           //具体实现，此时page正从右侧往中间移动
        } else {
          //具体实现，此时page在界面的右边并且已经不显示在当前界面
        }
    }
}

三，如何实现视差滚动效果
视差滚动效果也是最近几年在手机上比较流行，一般应用场景是首次启动应用时的导航界面，根据上面的规律，结合自己的效果实现动画就可以了。只需在PageTransformer中先找到相关的view，然后根据position设置不同的水平平移距离即可，大致的伪代码如下所示：

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 <= 1) { // [-1,1]

        mBlur.setTranslationX((float) (-(1 - position) * 0.5 * pageWidth));
        mBlurLabel.setTranslationX((float) (-(1 - position) * 0.5 * pageWidth));

        mDim.setTranslationX((float) (-(1 - position) * pageWidth));
        mDimLabel.setTranslationX((float) (-(1 - position) * pageWidth));

        mCheck.setTranslationX((float) (-(1 - position) * 1.5 * pageWidth));
        mDoneButton.setTranslationX((float) (-(1 - position) * 1.7 * pageWidth)); 
        // The 0.5, 1.5, 1.7 values you see here are what makes the view move in a different speed.
        // The bigger the number, the faster the view will translate.
        // The result float is preceded by a minus because the views travel in the opposite direction of the movement.

        mFirstColor.setTranslationX((position) * (pageWidth / 4));

        mSecondColor.setTranslationX((position) * (pageWidth / 1));

        mTint.setTranslationX((position) * (pageWidth / 2));

        mDesaturate.setTranslationX((position) * (pageWidth / 1));
        // This is another way to do it


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

四，与OnPageChangeListener的不同
OnPageChangeListener是很早就在ViewPager上提供的接口，其主要提供了在Page滑动时的一些回调，方便应用进行相关逻辑处理。

   /**
     * Callback interface for responding to changing state of the selected page.
     */
    public interface OnPageChangeListener {

        /**
         * This method will be invoked when the current page is scrolled, either as part
         * of a programmatically initiated smooth scroll or a user initiated touch scroll.
         *
         * @param position Position index of the first page currently being displayed.
         *                 Page position+1 will be visible if positionOffset is nonzero.
         * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
         * @param positionOffsetPixels Value in pixels indicating the offset from position.
         */
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        /**
         * This method will be invoked when a new page becomes selected. Animation is not
         * necessarily complete.
         *
         * @param position Position index of the new selected page.
         */
        public void onPageSelected(int position);

        /**
         * Called when the scroll state changes. Useful for discovering when the user
         * begins dragging, when the pager is automatically settling to the current page,
         * or when it is fully stopped/idle.
         *
         * @param state The new scroll state.
         * @see ViewPager#SCROLL_STATE_IDLE
         * @see ViewPager#SCROLL_STATE_DRAGGING
         * @see ViewPager#SCROLL_STATE_SETTLING
         */
        public void onPageScrollStateChanged(int state);
    }

里面的onPageScrolled()方法也会在page滚动时会被实时调用，但是里面的position只是当前正在滚动页所在的position。按照上节动画的实现过程，一般来说，需要先找当前页和相邻页，然后根据偏移量对其添加动画，而onPageScrolled并不能提供所有相关页的信息，仅仅只是当前页的position，如果需要知道相邻页，就需要额外采取一些手段，更加详细的介绍可以参考http://blog.csdn.net/lmj623565791/article/details/38026503 里面的说明。当然如果非要通过OnPageChangeListener来实现以上的动画效果，也是可以的，这方面最出名的开源项目要数JazzyViewPager(https://github.com/jfeinstein10/JazzyViewPager) ，作者会先在ViewPager的Adapter中维护一个position与page对应关系的HashMap，然后在onPageScrolled()方法中就可以根据这个HashMap很方便的找到当前页以及相邻的页面，从而进行相关动画的设置。
正是因为通过onPageScrolled()来实现动画比较困难，所以后来ViewPager提供了PageTransformer ，更加方便应用来实现各种动画效果
相关参考文档：
http://blog.csdn.net/lmj623565791/article/details/38026503
http://blog.csdn.net/lmj623565791/article/details/51339751
http://www.lightskystreet.com/2014/12/15/viewpager-anim/
http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen-of-zhihu/

各种炫酷的page变换效果
https://github.com/hongyangAndroid/MagicViewPager
https://github.com/daimajia/AndroidImageSlider
https://github.com/jfeinstein10/JazzyViewPager

各种视差滚动效果
https://github.com/Cleveroad/slidingtutorial-android
https://github.com/stephentuso/welcome-android
https://github.com/MoshDev/BackgroundViewPager
https://github.com/andraskindler/parallaxviewpager