ViewPager翻页特效（2_特效关键代码，含答案解析

本文链接：https://blog.youkuaiyun.com/m0_61418295/article/details/120147449

公式的推导很简单，就是让右边的子view向左平移 -position个自身宽度.

效果为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QaUBfqa0-1630942121638)(手把手讲解ViewPager翻页特效（全文）.assets/改造1.gif)]

滑动之后，不再出现其他子view。

虽然重叠在了一起，但是我还需要让右边的子view呈现位置偏差. 并且，越往右，偏差越大。

上代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ddWmMwXE-1630942121640)(手把手讲解ViewPager翻页特效（全文）.assets/代码2.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HwlEtg3z-1630942121642)(手把手讲解ViewPager翻页特效（全文）.assets/改造2.png)]

x轴上的位置差虽然有了，但是，原图上，越往右，越小，所以还需要做出x，y方向上的缩放

上代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJSaRf93-1630942121643)(手把手讲解ViewPager翻页特效（全文）.assets/代码3.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rh6s0whI-1630942121645)(手把手讲解ViewPager翻页特效（全文）.assets/改造3.png)]

视觉效果都有了，那么可以开始做动画效果.

经过对position的观察，我们知道position会以小数的形式渐变。原图中，向左滑出的view，会以一个透明度慢慢减小的方式消失，那么先来完成这一步。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Q4oNFqW-1630942121646)(手把手讲解ViewPager翻页特效（全文）.assets/代码4.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXbheyGX-1630942121646)(手把手讲解ViewPager翻页特效（全文）.assets/改造4.gif)]

最后一步，滑出消失的view虽然透明度的动画完成了，但是原图中，还有一个渐渐向左移动的动画。

上代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ECCh92Mm-1630942121647)(手把手讲解ViewPager翻页特效（全文）.assets/代码5.png)]

效果：

最终效果和原图差不多。

如果有人按照我的思路去实现上面的效果，很有可能失败，因为其中几个坑。

ViewGroup.clipChildren 属性

任何一个ViewGroup的子类都具备的属性，它的作用是，决定是否消减掉子view超出自身绘制范围的部分。

意思就是说，子view的绘制范围其实是无限大的，但是它能显示的范围由父viewGroup决定，这个属性为true，父view不允许子view超出自身的部分显示出来，反之，则是允许超出。这个属性默认是true。所以，如果发现上述效果中某些部分显示不出来，就要看看ViewPager（它是一个ViewGroup）的clipChildren属性是否为true，如果是true，设置成false试试。如果还是不行，看看ViewPager的父容器的 clipChildren属性是否为false。以此类推。
ViewPager.setPageTranformer(boolean reverseDrawingOrder,PageTransformer transformer)方法有两个参数，第一个是 bool值，它能决定子view的绘制顺序。如果按照上述思路实现效果发现，是右边的子view覆盖了左边的子view，那么就要看看是不是这个值是不是true。如果不是ture，改成true再尝试。
第2点中，如果不想把 reverseDrawingOrder 设置为true，也有办法解决。android View体系中存在一个z轴概念，z值越大，就越在上层，其实，也可以使用改变子view，z属性的办法来解决覆盖效果错误的问题。（但是Z轴的设置与版本有关，要区分设备版本,不然低版本上可能程序崩溃）