本着寓教于乐的精神，在看电视的时候突然觉得爱奇艺APP的导航条做的是真的很舒服，所以决定仿照着写一个。
上面这张是完成后的效果。还有几个地方有小的瑕疵，但是大体已经成型，细节还需要后面再考量一下（请忽略配色）。
分析一波
- 因为是移动端使用，所以肯定会有大量的滑动处理，所以要选择一个处理滑动事件的库；
- 关于图中
active横线的移动问题，如果用普通的动画来处理，会需要考虑前进后退的问题，所以考虑用时间线来控制。
根据以上的分析，选用了下面的库来解决：
- Swiper：处理滑动
- TweenMax / TweenLite：处理
.active横线动画 - TimelineMax / TimelineLite：管理
.active横线动画的时间线
实现要点
- 导航和内容分别由两个swiper控制，通过滑动控制内容的swiper来带动导航的swiper；
.active横线的移动是靠控制元素的left/translateX和width；.active横线移动到下一个目标的动画分为两部分：首先是width增加，然后width减小和left增加同时进行。移动到上一个目标就是相应的逆过程；- 关于时间轴的安排问题：将
.active横线从第一个栏目切换到最后一个栏目的动画时间轴的进度安排为1（为了和swiper的progress配合），比如现在有6个栏目，所以切换动画的总次数为（6-1）。将这5个动画平均安排在时间轴上，每一个动画占用 1/5，而一个动画的执行分为两步，所以每步占用总时间轴的1/10。
上面这四个问题就是这个项目中需要注意的问题。
示例代码
如果有感兴趣的朋友可以看一看。
