TableView头部图片下拉图片放大

528 阅读1分钟
  1. 下面是自己写的一个小demo,效果图如下:

                          

核心代码:

    //图片剪裁
    _pictureImageView.contentMode = UIViewContentModeScaleAspectFill;
    _pictureImageView.clipsToBounds = YES;

    // 偏移量
    CGFloat offset = scrollView.contentOffset.y;
    
    //导航栏渐变
    if (offset < HeaderHeight) {
        CGFloat navAlpha = offset/HeaderHeight;
        self.navigationController.navigationBar.alpha = navAlpha;
    }

    // 下拉放大
    if ( offset < 0) {
        // 拉伸后图片的高度
        CGFloat totalOffset = HeaderHeight - offset;
        // 图片放大比例
        CGFloat scale = totalOffset / HeaderHeight;
        CGFloat width = self.view.frame.size.width;
        // 拉伸后图片frame
        _pictureImageView.frame = CGRectMake(-(width * scale - width) / 2, offset, width * scale, totalOffset);
    }

在滑动的时候,一旦判定是下拉状态并且是从大于图片高度的地方下拉的,那么我们就要动态的改变图片的纵向位置和图片的高度,demo传送门