CODEWITHSUNDEEP
iosiphoneobjective-c
gravicle
gravicle

Reputation: 324

iOS 7 photos app like custom UIViewController Transition

I am a bit new to iOS development. I am working on an app that has about 5,000 visual data points, organized in categories. I want to present them in a UICollectionView with very tiny UICollectionViewCells. When a user taps on something in a category, the category zooms in with the selected cell in focus. Pretty much like how the "Photos" tab of the iOS 7 Photos app works: Years > Collections > Moments.

How do I go about implementing a custom transition like that? Are there any open-source libraries already written for accomplishing this?

Upvotes: 4

Views: 1412

Answers (1)

Calin Chitu
Calin Chitu

Reputation: 1099

If you can't find any library, try to play with this code I wrote for custom animations. You can specify a start point, an end point, start scale and end scale of a view that you want to zoom and scale in or out. See below an example how I use it. The point is to use a fake view to push it with animation, then push and pop your real view without animation. viewobj is set to fade in from alpha 0 to alpha 1, zoomableView will scale from the point/scale you give as parameter to the final position you set it in your storyboard/xib. Hope it will help.

@ you can create a category vor UIView 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 to use them:

@ your did select item at index 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;

@ back button 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;

Upvotes: 3

Related Questions