Push and pull. GIF

I saw this kind of photo browsing effect in an APP before, and it was so amazing that I also thought about it and realized it. Now I share it with you.

1. The train of thought

When you see this effect, the first guess is to use UICollectionView to achieve, but normal UICollectionView each Cell is connected end to end, but now each Cell is directly under the previous Cell. So MY guess is to slide the next Cell under the sliding Cell and move it with the offset of the Y-axis.

2. Implement

Core code:

- (void) scrollViewDidScroll: (scrollView UIScrollView *) {/ / access to the current cell int offset = scrollView. ContentOffset. Y / [UIScreen mainScreen].bounds.size.height ; NSIndexPath *index = [NSIndexPath indexPathForItem:offset inSection:0]; UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:index]; NSIndexPath *nextIndex = [NSIndexPath indexPathForItem:offset + 1 inSection:0]; UICollectionViewCell *nextCell = [self.collectionView cellForItemAtIndexPath:nextIndex]; CGRect rect = nextcell.frame; // insert the nextCell below the current cell and move it with the offset of the Y axis. rect.origin.y = scrollView.contentOffset.y; nextCell.frame = rect; [self.collectionView insertSubview:nextCell belowSubview:cell]; / / the drop-down set transparency 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.offsetY = scrollView.contentOffset.y; The self. The currentCell. Alpha = 1.0; }Copy the code

3. The source code

The initial effect is so, specific use with respect to benevolence, wisdom. Source code on gitHub, welcome correction, remember star oh!