An ultra-visual iOS application, such as animation using a UICollectionViewLayout without overlapping images

Question

I created the same component that is currently available in the UltraVisual iOS app for viewing recordings in animations such as parallax . See the GIF image below for more information. I want the same animation as in this video.

For this, I found two GitHub URLs, which is almost the same, but it does not match the same animation that was used in the UltraVisual iOS application. For more information, please find below two URLs for this.

URL: https://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0
URL: https://github.com/RobotsAndPencils/RPSlidingMenu

Problem:
Now I am faced with the problem of how to compress a focused image, given that the lower part remains stationary. The first focused image should be compressed from above (the lower part remains stationary), and at the same time, the next image will be focused, given that the upper part of the second image remains stationary.

Current Code:

 - (void)prepareLayout { NSMutableArray *cache = [NSMutableArray array]; NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0]; // last rect will be used to calculate frames past the first one. We initialize it to a non junk 0 value CGRect frame = CGRectZero; CGFloat y = 0; CGFloat footerTop = 0; for (NSUInteger item = 0; item < numberOfItems; item++) { NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:0]; UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath] ; // Important because each cell has to slide over the top of the previous one attributes.zIndex = item; // Initially set the height of the cell to the standard height CGFloat height = self.standardHeight; if (indexPath.item == self.currentFocusedItemIndex) { // The featured cell CGFloat yOffset = self.standardHeight * self.nextItemPercentageOffset; y = self.collectionView.contentOffset.y - yOffset; //y = yOffset - self.standardHeight * self.nextItemPercentageOffset; height = self.focusedHeight; //*********CURRENTLY WORKING ON THIS LINE TO ACHIEVE THE REQUIRED ANIMATION ****************** //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); //Solution might be here… } else if (indexPath.item == (self.currentFocusedItemIndex + 1) && indexPath.item != numberOfItems) { // The cell directly below the featured cell, which grows as the user scrolls CGFloat maxY = y + self.standardHeight; height = self.standardHeight + MAX((self.focusedHeight - self.standardHeight) * self.nextItemPercentageOffset, 0); y = maxY - height; //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); } else { y = frame.origin.y + frame.size.height; //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); } frame = CGRectMake(0, y, self.collectionView.frame.size.width, height); attributes.frame = frame; [cache addObject:attributes]; y = CGRectGetMaxY(frame); if (item == numberOfItems-1) { footerTop = CGRectGetMaxY(frame); } }; for (NSUInteger item = 0; item < numberOfItems; item++) { if (item == 0) { footerTop = footerTop + self.focusedHeight; } else { footerTop = footerTop + self.standardHeight; } } CGSize footerSize = [self footerReferenceSizeInSection:0]; if (footerSize.height > 0) { UICollectionViewLayoutAttributes *footerAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]]; footerAttributes.zIndex = 0; footerAttributes.frame = CGRectMake(0, footerTop, footerSize.width, footerSize.height); self.footerAttributes[0] = footerAttributes; } self.cachedLayoutAttributes = [cache copy]; } 

I changed the existing code ( https://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0 ) SFFocusLayout , and here is the code on which I have made changes so far, For this I mentioned a comment in the code where I feel that the solution lies, but is unable to succeed, because I have been fighting it for 3 to 4 days.

Please help me and thanks in advance.

Answer 1

If you want to achieve animation, for example, the UltraVisual app. I changed the prepareLayout method in RPSlidingMenu .

The following are changes to the prepareLayout Method in the RPSlidingMenuLayout.m file

It is necessary to change for the first frame of the cell:

 if (indexPath.row == topFeatureIndex) { // our top feature cell CGFloat yOffset = normalHeight * topCellsInterpolation; yValue = self.collectionView.contentOffset.y - yOffset; CGFloat amountToGrow = MAX(featureHeight * topCellsInterpolation, 0); attributes.frame = CGRectMake(0.0f, self.collectionView.contentOffset.y -amountToGrow , screenWidth, featureHeight); } 

For the second cell, but not for the last cell:

 else if (indexPath.row == (topFeatureIndex + 1) && indexPath.row != numItems) { yValue = lastRect.origin.y + lastRect.size.height; CGFloat amountToGrow = MAX((featureHeight - normalHeight) *topCellsInterpolation, 0); CGFloat bottomYValue = yValue + normalHeight + amountToGrow; NSInteger newHeight = normalHeight + amountToGrow; attributes.frame = CGRectMake(0.0f, 0.0f , screenWidth, screenWidth); } 

There is no need to change for all other cell frames.

You can see the animation in the attached gif.

Hope this helps you ...

Answer 2

Here is what I will do.

Make UIScrollView and put UIImage in it. Give them all the same size, except for the top, which should be larger, obviously. Now you can scroll beautifully.

Now you need to write the code.

Has a link to each UIImage.

You should get the origin.y of the top image and check its position when scrolling. When position.origin.y is above UIView.frame.height, you know you need to compress it. Then reduce the image for each pixel that you scroll over the view. The image below will grow for each pixel, the above image is above the view.

You can implement the delegate methods from UIScrollView specified in the link below. To image position when scrolling.

Be careful how you configure UiImages with restrictions and do not try to use Autolayout. Sometimes it is difficult to change the values ​​set automatically.

UiScrollView Delegate Methods