iOS 五行代码简单实现导航条滑块动画

timg.jpg

先看效果 Untitled.gif

滑块的移动动画其实就是滑块的frame改变,而frame的改变就是scrollView.contentOffset,明白原理实现就变得十分简单

在navView.h声明一个方法将scrollView.contentOffset.x做为参数传进去.在m中实现它

- (void) layoutIndicatorLineWithProportionX:(CGFloat)proportionX;

- (void)layoutIndicatorLineWithProportionX:(CGFloat)proportionX {
    self.line.x =  proportionX * self.width / 2 / kScreenWidth;
}

代码说明这里是用到比例计算,navView的宽度 除以 整个scrollView的宽度做为比例系数,scrollView.contentOffset.x * 比例系数就是实际移动的距离.

接下来就是在控制器调用这个方法,将参数传进去

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView == self.scrollView) {
        [self.navView layoutIndicatorLineWithProportionX:scrollView.contentOffset.x];
    }
}

End