IOS 7 photos app as UIViewController custom transition

Question

I am a little new to iOS development. I am working on an application that contains about 5,000 visual data points organized in categories. I want to present them in a UICollectionView with a very small UICollectionViewCells. When a user types something in a category, the category scales with the selected cell in focus. Very similar to how the Photos tab of the iOS 7 Photos: Years> Collections> Moments app works.

How can I implement such a custom transition? Are there any open source libraries already written for this?

Answer 1

If you can’t find any library, try playing with this code that I wrote for custom animations. You can specify the start point, end point, start scale, and end scale of the view that you want to scale and scale to or from. Below is an example of how I use it. The point is to use a fake view to push it with animation, and then click and pop your real view without animation. viewobj is set to gradually decrease from alpha-0 to alpha-1, the zoomableView will scale from the point / scale that you specify as a parameter to the end position that you set in your / xib storyboard. Hope this helps.

@ you can create a vor UIView category and add these methods

- (void) addSubView:(UIView*)viewObj animateFromPoint:(CGPoint)point zoomableView:(UIView*)view minScale:(CGSize)scale completion:(void (^)(void))completionBlock{
    CGPoint center = view.center;
    [view  setTransform:CGAffineTransformMakeScale(scale.width, scale.height)];
    viewObj.alpha = 0;
    view.center = point;

    [self addSubview:viewObj];
    [self addSubview:view];

    [UIView animateWithDuration:0.3
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         view.center = center;
                         [view  setTransform:CGAffineTransformMakeScale(1.0, 1.0)];
                         viewObj.alpha = 1;
                     }
                     completion:^(BOOL fin){
                         if(completionBlock)
                             completionBlock();
                     }];
}

- (void) removeFromSuperviewAnimateToPoint:(CGPoint)point zoomableView:(UIView*)view minScale:(CGSize)scale completion:(void (^)(void))completionBlock{
    CGRect startFrame = view.frame;
    self.alpha = 1;

    [self.superview addSubview:view];

    [UIView animateWithDuration:0.3
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         view.center = point;
                         [view  setTransform:CGAffineTransformMakeScale(scale.width, scale.height)];
                         self.alpha = 0;
                     }
                     completion:^(BOOL fin){

                         [self removeFromSuperview];
                         [view removeFromSuperview];
                         [view  setTransform:CGAffineTransformMakeScale(1, 1)];
                         view.frame = startFrame;
                         [self addSubview:view];

                         if(completionBlock)
                             completionBlock();
                     }];
}

And use them:

@, you have selected the element along the pointer path:

            self.itemDetails = [self.storyboard instantiateViewControllerWithIdentifier:@"ItemDetailsVC"];
            ItemDetailsVC* itd = [self.storyboard instantiateViewControllerWithIdentifier:@"ItemDetailsVC"];
            __weak UIViewController* wself = self;
            [self.view addSubView:self.itemDetails.view animateFromPoint:self.zoomedFrom zoomableView:self.itemDetails.viewZoomable minScale:CGSizeMake(0.371134, 0.371134) completion:^{
                [wself.navigationController pushViewController:itd animated:NO];
            }];
self.addSubviewIsUp = YES;

Button

@ back of the view you added:

        [self.navigationController popViewControllerAnimated:NO];

@viewdidapear of your main screen

if(self.addSubviewIsUp){
    [self.addVc.view removeFromSuperviewAnimateToPoint:CGPointMake(160, 75) zoomableView:self.addVc.zoomableView minScale:CGSizeMake(0.01, 0.01) completion:^{
    }];
}
self.addSubviewIsUp = NO;