用Swiper撸一个爱奇艺nav

本着寓教于乐的精神，在看电视的时候突然觉得爱奇艺APP的导航条做的是真的很舒服，所以决定仿照着写一个。

上面这张是完成后的效果。还有几个地方有小的瑕疵，但是大体已经成型，细节还需要后面再考量一下（请忽略配色）。

分析一波

---

1. 因为是移动端使用，所以肯定会有大量的滑动处理，所以要选择一个处理滑动事件的库；
2. 关于图中active横线的移动问题，如果用普通的动画来处理，会需要考虑前进后退的问题，所以考虑用时间线来控制。

根据以上的分析，选用了下面的库来解决：

• Swiper：处理滑动
• TweenMax / TweenLite：处理.active横线动画
• TimelineMax / TimelineLite：管理.active横线动画的时间线

实现要点

---

1. 导航和内容分别由两个swiper控制，通过滑动控制内容的swiper来带动导航的swiper；
2. .active横线的移动是靠控制元素的left和width；
3. .active横线移动到下一个目标的动画分为两部分：首先是width增加，然后width减小和left增加同时进行。移动到上一个目标就是相应的逆过程；
4. 关于时间轴的安排问题：将.active横线从第一个栏目切换到最后一个栏目的动画时间轴的进度安排为1（为了和swiper的progress配合），比如现在有6个栏目，所以切换动画的总次数为（6-1）。将这5个动画平均安排在时间轴上，每一个动画占用 1/5，而一个动画的执行分为两步，所以每步占用总时间轴的1/10。

上面这四个问题就是这个项目中需要注意的问题。

示例代码

如果有感兴趣的朋友可以看一看。

点此查看demo
点此查看仓库