Android动画全篇系列（十二）——ViewPager滑动动画

文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言

ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。

当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。

而ViewPager运用于轮播图，或者其他类似的滑动展示的效果时，我们不拘泥于普通的滑动效果，非得实现一些卓尔不群的效果。

二、实现 1、参数的介绍

我们只需简单的调用

viewPager.setPageTransformer(boolean,PageTransformer)

方法即可，但是真正的实现——PageTransformer才是最重要的。

PageTransformer是一个接口，系统没有任何的其实现类，我们要自定义ViewPager的滑动动画，必须借助该接口。

class MyPagerTransformer : ViewPager.PageTransformer {
	override fun transformPage(page: View, position: Float) {
	}
}

我们看到这个接口只有一个方法，待我们翻翻源码，看看其方法暴露给我们的属性都代表什么（这里就不贴源码了，因为并不是讲解源码，而是着重讲解使用）：

page 就是参与滑动的View，以上面的GIF图作为例子：假设现在是在 page-1 界面，那么page就是page-1与其相邻的View，又因为其左边是没有View的，所以page就是page-1和page-2；
假设现在是page-2界面，那么page就是page-1、page-2和page-3.

为什么一个page可以代表两个或者三个page？因为其暴露的方法在一个for循环里面，这个循环的范围就是显示的page及其相邻的page。

position 就是指代坐标了，但是这个坐标是相对的。
任何显示在正中间的page的position == 0，左边是-1，右边是+1。 position会根据滑动的距离而产生变化，向左减小，向右增大。再举个例子：
假设现在是page-2，那么page-2的position == 0，向左滑动，划至page-3，那么page-2的position会从0到-1，而page-3的position会从1到0，page-1的position会从-1到-2。
假设现在还是page-2，向右滑动，划至page-1，那么page-2的position会从0到1，而page-3的position会从1到2，page-1的position会从-1到0。 2、实现

知道了这些参数的意义，那我们就可以根据position的变化，来对page进行相应的变化，你可以使得page缩放、透明或者是旋转。

我们先从最简单的，也比较直观的缩放开始：

class MyPagerTransformer : ViewPager.PageTransformer {
	//最小透明度
    private val MIN_SCALE = 0.8f
    override fun transformPage(page: View, position: Float) {
        page.apply {
            when {
                position  { 
                	//向左滑动时，左边的page，由于看不见，所以设不设置都无所谓
                }
                position  { 
                	//[-1,1]
                	//向左滑动时，代表中间的page和右边的page
                	//向右滑动时，代表中间的page和左边的page
                    val scaleValue = Math.max(MIN_SCALE,1 - Math.abs(position))
					scaleX = scaleValue
                    scaleY = scaleValue
                }
                else -> { 
                	// position>1
                    // 向右滑动时，右边的page，还是看不见，所以可以不用设置
                }
            }
        }
    }
}

然后给ViewPager设置上：

viewPager.setPageTransformer(false, MyPagerTransformer())

再看看效果，如本章开头的GIF一样的缩放效果就完成了，再配合透明度，就可以完成一模一样的效果。

三、ViewPager2

ViewPager2作为谷歌新推出的控件，看名字是有意取代ViewPager，ViewPager2的原理其实是借助了RecyclerView，其过多的使用和实现我就不讲了。

因为今天的主题是ViewPager的滑动动画，那么这个ViewPager2的滑动动画我们怎么实现呢?

其实这一点谷歌非常的人性化，在ViewPager2里面也有一个PageTransformer的接口，其接口里面的方法也是和ViewPager中一模一样，所以ViewPager2的滑动动画的实现和ViewPager并无差别，你仅仅只需要修改以下继承的类即可：

class MyPagerTransformer : ViewPager2.PageTransformer{
	//方法名字和参数都不需要修改，内容也不需要修改
	... ...
}

然后再调用用

viewPager2.setPageTransformer(ViewPager2.PageTransformer)

即可。

四、小结

其实自定义ViewPager滑动动画的关键点，就在于你如何利用position这个参数，来改变page的样式。这个时候就是要展露出你的功底了……

作者：catzifeng