模仿淘宝商品详情的上滑图片错位效果

QQ20170823-171633.gif

产品前几天提了一个需求，模仿淘宝商品详情的部分效果。

往上拉动的时候图片有一点下移的，并不是完全随着向上移动。头部的导航随着滑动改变透明度。点击商品按钮回到初始状态，点击详情按钮跳到详情部分。

商品图片显示我用的SDCycleScrollView。但是有些功能需要自己添加，所以我自己新建个继承了SDCycleScrollView类。右下角的图片页码，和下拉的时候图片会放大。

我整个页面使用xib布局的，所以要改变状态就只能把需要变化的约束连线出来就可以了。
使用KVO监听scrollview的偏移量来改变状态。

  [self.scrollContentView addObserver:self forKeyPath:@"contentOffset"
                                options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew
                                context:nil];

视图消失的时候一定要记得释放

    [self.scrollContentView removeObserver:self
                                forKeyPath:@"contentOffset"];

监听，改变需要的状态

#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    
    if ([object isEqual:self.scrollContentView] && [keyPath isEqualToString:@"contentOffset"]) {
        [self refreshNavigationBar];
    }
}

主要就是这些计算需要根据你的实际需求来，其他的没什么要注意的！

#pragma mark NavigationBar
- (void)refreshNavigationBar {
    
    CGPoint offset = self.scrollContentView.contentOffset;
    NSLog(@"%@",NSStringFromCGPoint(offset));
    CGFloat offsetY = offset.y;
    if (offset.y < 0) {
       
        //下拉放大图片
        self.imgIconTop.constant    = offsetY; //图片顶部的约束
        self.imgIconHeight.constant = -offsetY+UIScreenWidth;//图片高
        self.imgIconWidth.constant  = -offsetY+UIScreenWidth;//图片宽
        [self.scrollContentView layoutIfNeeded]; //跟新约束
        [self.cycleView scrollToItemAtIndex:self.currentIndex]; //修改图片位置使其在屏幕中间
        
    } else {
        
        //通过offset.y与 图片高度 减去自定义头部高度再减去图片下标的偏移量 比例来决定透明度
        CGFloat alpha = MIN(1, fabs(offsetY/(AlphaOffSet - offsetY)));
        self.customNavView.alpha = alpha;
        //偏移量超过一定程度就不用改变 否则影响整体滑动，如果不存在商品详情也停止滑动
        if (offsetY <= DetailOffSet - self.detailOffsetY && _webView.hidden == NO) {
            self.imgIconBottom.constant = -offsetY;//图片的底部约束，
            self.cycleView.pageNumberLabelOffset = offsetY;//右下角页面的位置更新
        }
        
        //更新下划线的位置
        if (offsetY >= DetailOffSet - self.detailOffsetY) {
            [self.customNavView selectDetailButton];
        } else {
            [self.customNavView selectGoodsButton];
        }
    }
}

demo https://github.com/TheCodeor/GoodsDetailDemo
这些东西开始一听好像很麻烦，但是想明白代理了也没啥！有问题了可以在评论里问！

模仿淘宝商品详情的上滑图片错位效果

推荐阅读更多精彩内容