iOS微博首页顶部指示条滑动效果

微博首页，关注和热门下面的滑动指示条。
过程分析：
1、开始滑动，左侧固定，x坐标不变，尺寸变长。滑动距离等于屏幕滑到一半时，达到最大长度，指示条宽度是原始宽度加移动距离。滑动条最右端同时达到目的地。
2、继续滑动，最右端固定，尺寸变短，x坐标改变。滑动距离等于屏幕宽度时，指示条宽度变成原始宽度，过程结束。
3、往回滑动，过程一样。

二、效果如下：

滑动-默认.gif

三、过程如下

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    if (scrollView == self.mainCollectionView) {
        
//   line需要滑动的总共距离 = 70，初始化状态origin.x = 25，滑到最右端时最右侧的坐标 = 135
        CGFloat off_center = (70.0/ScreenW)*scrollView.contentOffset.x;

        if (off_center < 35 && off_center > 0) {
            
            self.tempLine.frame = CGRectMake(25, TopSpace-8, 40+off_center*2, 3);
            
        }else if (off_center > 35 && off_center < 70) {
            self.tempLine.frame = CGRectMake(25+(off_center*2-70), TopSpace-8, 110-(off_center*2-70), 3);
        }
        
//下面都是按钮的变色，跟指示条没关系。
        if (scrollView.contentOffset.x == 0 && self.tempBtn == self.recommendBtn) {
            
            self.tempBtn.selected = NO;
            self.hotBtn.selected = YES;
            self.tempBtn = self.hotBtn;

        }else if (scrollView.contentOffset.x == ScreenW && self.tempBtn == self.hotBtn){
            self.tempBtn.selected = NO;
            self.recommendBtn.selected = YES;
            self.tempBtn = self.recommendBtn;
        }
    }
}

虽然简单了些，但还是多写几句，怕久了自己都忘了。🙄

1、初始化状态，x坐标是25，y坐标不变，宽度是40，高度3。这样中心点和第一个按钮中心对齐。
2、只看结果，滑动第二个按钮下面的话，中心点和第二个按钮的中心点对齐，整体移动了70的距离。这些数字根据实际开发情况改变。数字写固定，看着方便一些。

3、指示条滑动距离和scrollview的offset的关系：scrollview从当前页面滑动下一页，总共的移动距离是一个屏幕宽度，指示条从第一个按钮下面移动到第二个按钮下面，总共的移动距离是70。所以要保证scollview和指示条同时开始，同时移动，同时停止，就得满足：指示条移动距离 / 70 = offset.x / 屏幕宽度。

这样就保证各自移动的距离在各自的总长度中的比例相同。它开始，它也开始，它移动占总的一半，它移动也占总的一半，它移动结束，它也移动结束。

得出 CGFloat off_center = (70.0/ScreenW) * scrollView.contentOffset.x；

off_center就是指示条根据scollview移动的距离

4、正常的话，scollview移动一个屏幕宽度，指示条移动70。现在需求是scollview移动半个屏幕，指示条就要达到最大。所以指示条的移动距离需要时正常的2倍，才能保证scrollview移动半个屏幕，指示条就达到最大，然后在scollview移动下半个屏幕，再去变小
5、scrollview从0移动到一半屏幕过程中，指示条从0到35。这时间段，指示条的frame，x坐标不变，宽度从原来的40增加到最大，即 40+off_center *2。本来宽度变化是40+off_center，但是由于滑到一半就要达到最大，所以速率变成2倍了。
6、继续滑动剩下的半个屏幕。在35到70的过程中，宽度由最大变成原始大小。
宽度变化=最大宽度110 - 需要变动的宽度(off_center *2-70)
由于右侧固定，x坐标=最右侧-宽度。
（注：为什么减小量是 off_center *2-70，我也说不清，慢慢琢磨吧。哈哈😄）
7、往回滑动道理一样，代码也一样。

OVER。

最后编辑于：2019.02.20 18:15:32