最近在做项目时需要做一个可以左右切换视图的页面，当然就需要一个类似于 Segment 这样的切换 View 。在网上有不少这样的源码，总体来说原理差不多，实现起来也不算复杂。最近我在看其他客户端时发现首页上的类似的 View 附带了颜色渐变的效果，于是便想试一下他这种效果应该怎么去实现。
看到这种效果时我首先想到的就是通过迭加 label 和改变顶层 label 透明度的方式来实现标题颜色的渐变效果。因此整个视图分为三层，最底层用来放置带有初始颜色标题的 label ，也就是没有被选中的标题所展示的颜色，中间层用来放置左右移动的滑块和带有选中后颜色的 label ，随着滑块的移动该层的 label 的透明度会相应的改变，这样就会展现出一种颜色的渐变效果。最上层的 View 放置触发点击事件的 button 。这样，只需要检测滑块移动的位置同是计算中间层 label 与滑块的距离，同时改变透明度就可以了。
这样做了之后虽然用手逐个滑动视图时没有什么问题，但是当点击两个相距较远的标签时发现了违和感，原版的视图在切换时经过的标签也会相应的改变颜色，而我写出来的视图中间经过的标签并没有变化，仅仅是起始标签颜色改变。于是我想到通过定时器或者 kvo 的方式持续检测滑块的位置，每当其改变时就变更透明度。但是问题出现了，滑块的移动我使用了视图动画，动画进行中滑块的 frame 并没有变动，仅仅是 layer 的一种变化，那么在动画进行中应该如何实时检测滑块的位置呢。检测动画中的视图的实时变化这还是第一次做，我查了下资料发现了一个 layer 的属性 presentationLayer ，presentationLayer 也就是动画时会实时改变的那个 layer ，通过对 presentationLayer 的检测也就知道当前动画中我们所看到的视图的位置了。
if (self.slideView.layer.presentationLayer) {
CALayer *animationLayer = self.slideView.layer.presentationLayer;
[self setLabelAlpha:(animationLayer.position.x-self.labelSize.width/2.0)];
}
2
3
4
这样问题就解决了。不知道原版的视图是通过怎样的方式来实现的，我通过这种方式仿写了一个功能效果类似的，从中也学到了写东西，不知道有没有其他的更简单的思路来实现，如果有人知道更简单的方法也可以分享出来给初学者学习一下。