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 ).读者了解这个关系之后一切问题就迎刃而解了!!!