IOS仿网易云音乐账号界面滑动效果

#define topHeight 100 //红色部分的高度
#define topSpace  47 //会员卡片露出来部分的高度

@property (nonatomic, strong) UIView *topView;
@property (nonatomic, strong) UIImageView *cardImageView;
@property (nonatomic) CGFloat distance;//可以向下滑动的距离
@property (nonatomic) CGFloat normalY;//正常状态下的纵坐标

UI部分

 UIScrollView *scrollView=[[UIScrollView alloc] init];
    scrollView.frame=CGRectMake(0,64,WinSize.width,WinSize.height-64);
    scrollView.contentInset=UIEdgeInsetsZero;
    scrollView.delegate=self;
    scrollView.showsVerticalScrollIndicator=NO;
    scrollView.showsHorizontalScrollIndicator=NO;
    scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    [self.view addSubview:scrollView];
    UIView *contentView=[[UIView alloc] initWithFrame:CGRectMake(0,0,WinSize.width,WinSize.height+200)];
    [scrollView addSubview:contentView];
    contentView.backgroundColor=[UIColor blueColor];
    scrollView.contentSize=contentView.frame.size;
    UIView *topView=[[UIView alloc] init];
    [contentView addSubview:topView];
    [topView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.equalTo(contentView);
        make.height.mas_equalTo(topHeight);
    }];
    topView.backgroundColor=[UIColor redColor];
    UIImageView *headImageView=[[UIImageView alloc] init];
    [topView addSubview:headImageView];
    [headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(60*kScreenWidthRatio,60*kScreenWidthRatio));
        make.left.top.mas_equalTo(20*kScreenWidthRatio);
    }];
    headImageView.layer.masksToBounds=YES;
    headImageView.layer.cornerRadius=30*kScreenWidthRatio;
    headImageView.backgroundColor=[UIColor blackColor];
    self.topView=topView;
    UIImageView *cardImageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mine_buy_vip"]];//这里是会员卡图片
    [contentView addSubview:cardImageView];
    [cardImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(cardImageView.superview);
        make.size.mas_equalTo(CGSizeMake(cardImageView.image.size.width*kScreenWidthRatio, cardImageView.image.size.height*kScreenWidthRatio));
        make.top.equalTo(topView.mas_bottom);
    }];
    self.cardImageView=cardImageView;
    UIView *bottomView=[[UIView alloc] init];
    bottomView.backgroundColor=[UIColor yellowColor];
    [contentView addSubview:bottomView];
    [bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.bottom.equalTo(contentView);
        make.top.equalTo(cardImageView).offset(topSpace);
    }];
    [scrollView layoutIfNeeded];
    self.normalY=topView.bottom;    
    self.distance=(cardImageView.height-topSpace)*2;
//开始的小动画
        [scrollView setContentOffset:CGPointMake(0,-self.distance)];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [scrollView setContentOffset:CGPointZero animated:YES];    
        });

滑动代理部分关键代码

#pragma mark - scrollViewDelegate

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"%f",scrollView.contentOffset.y);
    CGFloat contentOffY=scrollView.contentOffset.y;
    if(contentOffY<0&&fabs(contentOffY)>self.distance)
    {
        [scrollView setContentOffset:CGPointMake(0,-self.distance)];
    }
    if(contentOffY<=0&&fabs(contentOffY)<=self.distance)
    {
     //这里仿网易云，滑动过程会有稍微的间距变化，所以设置成0.55
        self.topView.y=contentOffY*0.55f;
        self.cardImageView.y=self.normalY+contentOffY*0.5f;
    } 
}

最后效果图

123456.gif