使用ViewPager动画来做出不一样的引导页

忘是亡心i 2022-09-25 03:23 169阅读 0赞

转载地址：http://blog.csdn.net/wei\_smile/article/details/51167220

就算Google从很早开始就自带了设置引导页动画的接口，但是就我目前看来市面上使用引导页动画的还是很少的，也不知道是为什么，一想到Material Design的使用率也这么少表示很心塞。   
首先来看看市面上千篇一律的引导页效果，诺：   
![这里写图片描述][1460774446_5006.gif]

很单调对不对，你们没看吐我都看吐了，再看一份加了引导页动画效果的：   
![这里写图片描述][1460774609_1329.gif]

有没有瞬间耳目一新的感觉，下面就谈谈如何做出这样的引导页动画。

--------------------

其实从[Android][] 3.0也就是API 11开始Android就自带了一个PageTransformer接口用来实现ViewPager动画效果并为之加入了setPageTransformer方法来自定义我们自己的动画效果，用的时候很简单：

![Center][]

这里setPageTransformer传入了两个参数，第一个布尔型参数表示的意思就是在两个页面切换产生动画效果时候是否要反转一下让下一个页面在上一个页面底下，因为ViewPager默认下一个页面是绘制在上一个页面的上面，这里一般传入true，第二次参数才是重点，这里实现了PageTransformer接口，然后我们所有需要的动画效果都在transformPage这个接口方法里面实现，现在我们来看看这个方法。

我们发现transformPage方法也有两个参数，第一个参数就表示当前显示在屏幕上的Activity或者Fragment，这个不管，后一个参数是重点，这个position并不是我们引导页页面的position，下面借用一张图来说明这个position参数：

![这里写图片描述][20160416110043276]

> [图片出处][Link 1]

谷歌官方对这个参数的解释是，这个参数表明了一个给定的页面相对于屏幕中心的位置，并且这个参数随着我们的滑动会动态的变化，最重要的一点是这个position参数是相对于我们的屏幕左边缘来说的，如果当前的页面刚好占满了整个屏幕，就如上图所示的1界面，那么这个页面的position参数就是0，如果一个页面刚从屏幕右边缘划出来，可以理解为上图中页面1和页面2的交界线刚冒头的情况，那么这个页面的position值就是1，如果某个时刻我们把页面1向左滑动一半，导致屏幕中央既有一半页面1显示又有一半页面2显示的时候，这时候页面1的position值就是-0.5，页面2的position值就是0.5，都是相对于左边缘来说的，而且左边缘的值固定是0，就是下面这种情况：   
![这里写图片描述][1460776252_2170.gif]

那么知道这个值有什么用呢，其实多亏了这个值我们才能做出更好的动画效果，要知道这个值是动态变化的，有了一个动态变化的值就可以做出动态变化的效果，我们可以看看谷歌是怎么用它的：

![Center 1][]  
这份代码的实际效果如下：   
![这里写图片描述][1460776900_4978.gif]    
可以看到很明显的缩放以及透明度的变换，我们看看代码是怎么利用这个position参数的：

![Center 2][]

这里`1 - Math.abs(position))` 的值在0~1之间，并且代码判断了MIN\_SCALE和`1 - Math.abs(position))` 的大小并取其中的最大值，MIN\_SCALE是最上面定义的最小缩放系数，可以看到这一行代码得出来的缩放系数是处于MIN\_SCALE和1之间的，然后下面的代码就是根据position位置参数的变化来进行page的水平移动效果，其实ViewPager提供了相当多的方法共给我们去操作，诸如:setScale设置缩放啦，setRotation设置旋转效果，还有这里的setTranslationX设置水平移动效果等等，结合position这个动态变化的参数可以做出很多意想不到的动画，比如下面这个旋转动画：   
![这里写图片描述][1460777751_3362.gif]   
代码如下：

![Center 3][]

注意：这里的ViewHelper类需要引用nineoldandroids第三方动画库来实现，具体的东西我都打包好了在最下面有下载链接，需要的自行取用。

--------------------

更酷炫的效果   
其实除了对position这个参数进行处理，我们还可以对view进行动画处理，前面提到transformPage这个接口方法第一个参数view就是当前可见的Activity或Fragment，那么我们还可以对这个Activity或Fragment内部的元素进行处理来达到视察动画的效果，一个很好地例子：

![1_zD4p2a5gBqt63PQH9ZLNdQ.gif][]

![Center 4][]

[工程地址][Link 2]

最后，附上整个项目的地址：[项目地址][Link 3]

[1460774446_5006.gif]: https://img-my.csdn.net/uploads/201604/16/1460774446_5006.gif
[1460774609_1329.gif]: https://img-my.csdn.net/uploads/201604/16/1460774609_1329.gif
[Android]: http://lib.csdn.net/base/15
[Center]: /images/20220718/b663c1402aa74cd4bc0fd01f0068871a.png
[20160416110043276]: /images/20220718/11cfee5a23ba42658fbd96ffc8e5e601.png
[Link 1]: http://chiemy.com/android/great-animation-with-pagetranformer
[1460776252_2170.gif]: https://img-my.csdn.net/uploads/201604/16/1460776252_2170.gif
[Center 1]: /images/20220718/1e0223ddbb5c43d7913fd522340c0bdb.png
[1460776900_4978.gif]: https://img-my.csdn.net/uploads/201604/16/1460776900_4978.gif
[Center 2]: /images/20220718/87d32c53c648402e89c2189d2653f731.png
[1460777751_3362.gif]: https://img-my.csdn.net/uploads/201604/16/1460777751_3362.gif
[Center 3]: /images/20220718/6ca8fe4d7e0d4ae8a68f17b554bcb1fd.png
[1_zD4p2a5gBqt63PQH9ZLNdQ.gif]: https://d262ilb51hltx0.cloudfront.net/max/600/1*zD4p2a5gBqt63PQH9ZLNdQ.gif
[Center 4]: /images/20220718/68f0094d4af54149ac880eb8ba55d2bd.png
[Link 2]: https://github.com/chiemy/PageTransformerDemo
[Link 3]: http://download.csdn.net/detail/wei_smile/9492930