ios 横向滚轮效果_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 *array = [self.tableView visibleCells];

[array enumerateObjectsUsingBlock:^(EveryDayTableViewCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

[obj cellOffset];

}];

}

下载链接


版权声明:本文为weixin_31860973原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。