ViewPager页面切换特效

ViewPager页面切换特效如下效果

看效果：

效果1：

效果2：

下面就开始讲解如何实现这两个页面翻转效果

1.首先你得会ViewPager控件的使用(废话！现在还有人不会使用吗？？？！！)

2.你得了解ViewPager的一个回调函数ViewPager.PageTransformer(用于设置ViewPager切换时的动画效果),我们页面切换特效基本就靠他了。

3.你得了解属性动画(这一部分我会在以后的博文中讲到，读者也可以去读其他的文章，百度一下一大推)

当上面的都掌握了，你基本写出任何页面转换特效出来了！我只是拿两个做案列

代码实现

一.页面布局+初始化ViewPager(这边我直接上代码了，不细说了！太简单了)

简单布局：

初始化ViewPager：

ViewPager的适配器代码：

至此，我们的准备工作都已经OK! 下面就是真正的干货了！！！

二.了解ViewPager.PageTransformer(用于设置ViewPager切换时的动画效果)这个这个回调函数

1.首先我们看一下这个函数ViewPager.PageTransformer：

这个函数有两个参数一个是View 还有一个是position。我先解释下这个position，首先呢他的有效取值范围在[-1，1]
我们就是根据这个值的变化来不停的改变view的相应的属性，以此达到相应的页面转换效果！下面 我就以一张图的形式来解释下view和position之间的关系 大家看一下图解就明白了！

说白了就是我在[0,-1)的时候操作A页面 在[1,0)操作B页面 此时页面对应这个函数中的view变量 当[0.-1)时view是A页面 当[1,0)时view是B页面

2.下面就是开始分析第一个效果，我们可以到的是 A页面沿着X轴缩小 B页面沿X轴放大
看代码：

接着我们再来分析第二个效果，我们看出是沿着Y旋转180度

看代码

该段代码中我们设置View的旋转中心是：

page.setPivotY(page.getMeasuredHeight() / 2);

page.setPivotX(page.getMeasuredWidth() / 2);

A页面Y轴旋转：[0,-180)

B页面Y轴旋转：[180,0)

至此，已经讲解完成了！！

总结

读者只要了解了ViewPager.PageTransformer这个回调函数基本上页面切换特效已经掌握了！关于这个函数要了解的就是view和position之间的关系。了解两者之间的关系 该函数你就已经了解！其次就是属性动画的功底(不在本篇文章之内)！
我还在强调一次就是：position可以用变化范围[-1,1] 他与View的对应的关系是:将设ViewPager中的一二两业分别对应A页，B页。那么AB两页对应的position变化就是：A[ 0, -1) B[ 1 , 0 ).读者了解这个关系之后一切问题就迎刃而解了！！！