iOS列表滚动视差效果

效果：UITableView滚动的时候会有动画加视差效果

一个未处理的列表.png

当cell出现的时候

-(void)tableView:(UITableView *)tableView willDisplayCell:(EveryDayTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

1.cell出现时图片由透明变不透明，由小变大，由下往上

cell的Transform3D动画.png

        CATransform3D rotation;//3D旋转
        //y,z周偏移
        rotation = CATransform3DMakeTranslation(0 ,50 ,20);
//        rotation = CATransform3DMakeRotation( M_PI_4 , 0.0, 0.7, 0.4);
        //x,y缩小0.9，宽高缩小0.9
        rotation = CATransform3DScale(rotation, 0.9, 0.9, 1);
        rotation.m34 = 1.0/ -600;//参数
        
        //设置阴影颜色和偏移量，右下偏移
        cell.layer.shadowColor = [[UIColor blackColor]CGColor];
        cell.layer.shadowOffset = CGSizeMake(10, 10);
        //设置透明度为0
        cell.alpha = 0;
        cell.layer.transform = rotation;
        
        //开始动画，可也使用block
        [UIView beginAnimations:@"rotation" context:NULL];
        //旋转时间
        [UIView setAnimationDuration:0.6];
        //恢复到原始状态
        cell.layer.transform = CATransform3DIdentity;
        cell.alpha = 1;
        cell.layer.shadowOffset = CGSizeMake(0, 0);
        [UIView commitAnimations];

2.改变图片的transform属性，让图片不在cell中显示完

cell层次.png cell上的图片偏移.png

- (CGFloat)cellOffset {

    //得到cell在屏幕中的坐标
    CGRect centerToWindow = [self convertRect:self.bounds toView:self.window];
    //得到cell中心y的坐标
    CGFloat centerY = CGRectGetMidY(centerToWindow);
    //得到父视图的中心点
    CGPoint windowCenter = self.superview.center;
    //得到距离差
    CGFloat cellOffsetY = centerY - windowCenter.y;
    NSLog(@"------%f",cellOffsetY);
    //距离差/两个父视图高度
    CGFloat offsetDig =  cellOffsetY / self.superview.frame.size.height *2;
    //250是cell高度，kHeight/1.7是图片高度
    CGFloat offset =  -offsetDig * (kHeight/1.7 - 250)/2;
    NSLog(@"%f",offset);
    //这项就可以实现让他初始向上偏移，有偏移多的有偏移少的
    CGAffineTransform transY = CGAffineTransformMakeTranslation(0,offset);
    //改变图片的transfrom
    self.picture.transform = transY;
    return offset;
}

当列表正在滚动的时候

iOS6.gif

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

        //获取可以见到的 cell,让图片在cell坐标改变的时候偏移
     NSArray<EveryDayTableViewCell *> *array = [self.tableView visibleCells];
        [array enumerateObjectsUsingBlock:^(EveryDayTableViewCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [obj cellOffset];
            
        }];

    }

下载链接

http://code.cocoachina.com/view/129333