animation similar to opening app in ios7

Question

I want to create an animation similar to app opens in iPhone in iOS7. In this animation it just shows that app is opening from which point and closing at same point.

Answer 1

I have small repo that uses a UICollectionViewFloatLayout to create the zoom effect, https://github.com/MichaelQuan/ios7ZoomEffect. It is still a work in progress but the basic idea is there

The layout code is:

@interface ExpandingCollectionViewLayout ()

@property (nonatomic, assign) CGRect selectedCellFrame;
@property (nonatomic, strong) NSIndexPath *selectedIndexPath;

@end

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *layoutAttributes = [super layoutAttributesForElementsInRect:rect];

    [layoutAttributes enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *obj, NSUInteger idx, BOOL *stop) {
        [self _transformLayoutAttributes:obj];
    }];

    return layoutAttributes;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];

    [self _transformLayoutAttributes:layoutAttributes];

    return layoutAttributes;
}

- (void)_transformLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    if (self.selectedIndexPath != nil)
    {
        if ([layoutAttributes.indexPath isEqual:self.selectedIndexPath]) {
            // set the frame to be the bounds of the collectionView to expand to the entire collectionView
            layoutAttributes.frame = self.collectionView.bounds;
        } else {
            //scale = collectionView.size / cell_selected.size
            //translate = (scale - 1)(cell_i.center - cell_selected.center) + (collectionView.center - cell_selected.center)

            CGRect collectionViewBounds = self.collectionView.bounds;

            CGRect selectedFrame = self.selectedCellFrame;
            CGRect notSelectedFrame = layoutAttributes.frame;

            // Calculate the scale transform based on the ratio between the selected cell's frame and the collection views bound
            // Scale on that because we want everything to look scaled by the same amount, and the scale is dependent on how much the selected cell has to expand
            CGFloat x_scale = collectionViewBounds.size.width / selectedFrame.size.width;
            CGFloat y_scale = collectionViewBounds.size.height / selectedFrame.size.height;
            CGAffineTransform scaleTransform = CGAffineTransformMakeScale(x_scale, y_scale);

            // Translation based on how much the selected cell has been scaled
            // translate based on the (scale - 1) and delta between the centers
            CGFloat x_zoomTranslate = (x_scale - 1) * (CGRectGetMidX(notSelectedFrame) - CGRectGetMidX(selectedFrame));
            CGFloat y_zoomTranslate = (y_scale - 1) * (CGRectGetMidY(notSelectedFrame) - CGRectGetMidY(selectedFrame));
            CGAffineTransform zoomTranslate = CGAffineTransformMakeTranslation(x_zoomTranslate, y_zoomTranslate); //Translation based on how much the cells are scaled

            // Translation based on where the selected cells center is
            // since we move the center of the selected cell when expanded to full screen, all other cells must move by that amount as well
            CGFloat x_offsetTranslate = CGRectGetMidX(collectionViewBounds) - CGRectGetMidX(selectedFrame);
            CGFloat y_offsetTranslate = CGRectGetMidY(collectionViewBounds) - CGRectGetMidY(selectedFrame);
            CGAffineTransform offsetTranslate = CGAffineTransformMakeTranslation(x_offsetTranslate, y_offsetTranslate);

            // multiply translations first
            CGAffineTransform transform = CGAffineTransformConcat(zoomTranslate, offsetTranslate);
            transform = CGAffineTransformConcat(scaleTransform, transform);

            layoutAttributes.transform = transform;
        }

    }
}

To expand a cell using this layout code, set both the selectedCellFrame and selectedIndexPath to the cell you want expanded and call performBatchUpdates:completion: on the collection view. To collapse set selectedCellFrame = CGRectNull and selectedIndexPath = nil and call performBatchUpdates:completion: