之前在某款APP中看到了这种照片浏览效果,惊艳之余也用心思考并实现了出来,现在特地拿出来分享给大家。
1.思路
看到这种效果的时候,首先�猜测是用UICollectionView实现的,但是正常的UICollectionView的每个Cell都是首尾相连的,现在却是每个Cell都在上一个Cell的正下方,因此我猜测是在滑动的时候将下一个Cell插入到正在滑动的Cell的下方并随着Y轴方向的偏移量而移动。
2.实现
核心代码:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.y < 0) {//顶部第一个cell下拉不产生效果
return;
}
//获取到当前cell
int offset = scrollView.contentOffset.y / [UIScreen mainScreen].bounds.size.height ;
NSIndexPath *index = [NSIndexPath indexPathForItem:offset inSection:0];
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:index];
//获取到下一个cell
NSIndexPath *nextIndex = [NSIndexPath indexPathForItem:offset + 1 inSection:0];
UICollectionViewCell *nextCell = [self.collectionView cellForItemAtIndexPath:nextIndex];
//将下一个cell插入到当前cell的下方并随着Y轴方向的偏移量而移动
CGRect rect = nextCell.frame;
rect.origin.y = scrollView.contentOffset.y;
nextCell.frame = rect;
[self.collectionView insertSubview:nextCell belowSubview:cell];
//下拉设置透明度
if (scrollView.contentOffset.y < self.offsetY) {
CGFloat progress = (self.offsetY - scrollView.contentOffset.y) / [UIScreen mainScreen].bounds.size.height;
cell.alpha = progress;
self.currentCell = nil;
self.currentCell = cell;
}
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
[self adjustCurrentCell:scrollView];//暂时修复底部间隙BUG,待修改,还望大家指导
self.offsetY = scrollView.contentOffset.y;
self.currentCell.alpha = 1.0;
}
- (void)adjustCurrentCell:(UIScrollView *)scrollView {
//获取到当前cell
NSInteger offset = scrollView.contentOffset.y / [UIScreen mainScreen].bounds.size.height ;
NSIndexPath *index = [NSIndexPath indexPathForItem:offset inSection:0];
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:index];
CGRect rect = cell.frame;
rect.origin.y = self.collectionView.contentOffset.y;
cell.frame = rect;
}
3.源码
初步效果就这样了,具体使用就仁者见仁、智者见智了。源码放在gitHub上,欢迎大家指正,记得�star哦!