动效拆解：TabBar 渐变动画方案

前言：很多动效都是多种动画的组合，有时候你可能只是需要其中某个动画，但面对庞杂的代码库或是教程，你可能比较困惑，本系列将复杂动效中不常见的动画效果拆解出来便于学习，授人以鱼不如授人以渔。

TabBarColorAnimation.gif

对 TabBar 上的 TabBarItem 做渐变动画是个很常见的需求吧，应用了这个效果的应用里以微信最为知名，首要问题是如何让 TabBarItem 产生渐变效果。我在写 iOS 视图控制器转场详解这篇文章为 UITabBarController 写转场动画 Demo 时尝试添加这个渐变效果。你如果了解下 TabBarItem 会发现这个类并没有公开的视图属性接口以便你添加动画，以前我也搜索过在 TabBarItem 上添加动画，没有比较好的方案。看了雷纯锋开源的 WXTabBarController 后发现，如果你不了解 TabBarItem 的内部结构的话，这个问题你几乎没有办法。得承认，我以前还从来没有这么干过，打开了一片新天地。WXTabBarController 里似乎用 Reveal 来查看内部视图结构的，不过我没买这个软件，后来想起了 Xcode 自带的 View Debugging 功能，同样能办到这点，快速入门教程：raywenderlich 家出品的 View Debugging in Xcode 6。

于是，解决方案出来了，图胜千言：

UITabBar 内部视图结构

WXTabBarController 对 TabBar 的处理

既然掌握了内部视图结构，那么传统的 UIView 动画就有用武之地了，想怎么玩都行，终于知道 Github 上那些 自定义 TabBar 的动画怎么来的了。

在传统的 View Controller Transition(也就是所谓的转场)中实现这个效果会有一个小问题，那就是 TabBarItem。WXTabBarController 重写了相关的属性方法，切断了 UITabBarController 对 TabBar 的控制，而在 UITabBarController 里，tabBar这个属性是只读的，对 TabBarItem 的公开接口基本不能修改，这就造成了后景伪装图标的差异。

我实现的 SEGradualTabBarController，处理如下：

SEGradualTabBarController 对 TabBar 的处理

被选中的 TabBarItem 与其他 TabBarItem 的处理是相反的，切换后，切换后的 TabBarItem 也要进行反向处理，注意下就好了。SEGradualTabBarController 与 WXTabBarController 在 TabBar 的处理上大同小异，剩下的不同就在于前者使用转场，后者使用 UIScrollView，这带来了很多优势。

在滑动时根据滑动的距离来更新前后景图标的 alpha 值这很好理解，松手后呢？WXTabBarController 直接在 UIScrollView 的代理方法里实时更新 alpha 值：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
松手后该方法也会继续调用直至滑动停止，实际上 WXTabBarController 的代码里并没有 UIView 动画代码。

SEGradualTabBarController 滑动时在手势绑定的方法里实时更新 alpha 值，松手后的处理......我原本是打算用CADisplayLink，在实现自定义容器控制器转场时就是采用的这个，后来发现，都已经有了内部视图了，直接使用 UIView 动画不就得了。在交互转场里，根据松手时的阈值判断，可以选择完成或是取消转场，其中的动画也会同步，不过在这里行不通，看第一张图，在子 VC 间切换时， ViewController Transition 中涉及的子视图都是 UITransitionView 的子视图，而 TabBar 并不是 UITransitionView 的子视图，也就无法享受 ViewController Transition 的福利了。

总体来说，在 View Controller Transition 中实现 TabBar 的渐变效果比起 WXTabBarController 来得麻烦，后者还有个优势是兼容的版本更低，SEGradualTabBarController 最低只能是 iOS 7 了，不过马上 iOS 10 都要来了。