CODEWITHSUNDEEP
iphoneiosobjective-ccocoa-touchanimation
kyleplattner
kyleplattner

Reputation: 633

I would like to UIViewAnimationOptionTransitionFlipFromRight while scaling to a new view

Here is what I currently have: http://cl.ly/PIFB

And the code behind it:

UIView *smallView = [[_tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:recognizer.view.tag inSection:0]] contentView];
CGRect initialSize = smallView.frame;
CGRect finalSize = CGRectMake(150.0, 100.0, 660.0, 450.0);
UIView *largeView = [[UIView alloc] initWithFrame:initialSize];
[largeView setBackgroundColor:[UIColor blackColor]];
[largeView setClipsToBounds:NO];
[UIView transitionFromView:smallView toView:largeView duration:2 options:UIViewAnimationOptionTransitionFlipFromRight completion:^(BOOL finished) {
     [[_tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:recognizer.view.tag inSection:0]] contentView].frame = finalSize;
     [largeView setFrame:finalSize];
     [smallView removeFromSuperview];
     [self addSubview:largeView];
     [UIView animateWithDuration:2 animations:^{
         smallView.frame = finalSize;
         [largeView setFrame:finalSize];
     }];
 }];

Basically I have a UITableView of views. When one of those views is tapped I would like to scale and flip it at the same time so that it shows a new larger view in the center of the screen. Currently it flips the smaller view and eventually shows the larger view at the right size but it doesn't transition smoothly.

In the code above smallView is the currently tapped cells content view. largeView is the new view that will eventually be developed to show more data relevant to the cell that was tapped. Right now it is represented by the black view. I really would like the small cell to grow and flip at the same time so that it smoothly transitions into the larger view.

Your help would be greatly appreciated. My experience with objective c, cocoa touch, and performing animations is pretty limited.

Thanks so much.

Upvotes: 0

Views: 1002

Answers (3)

kyleplattner
kyleplattner

Reputation: 633

I finally figured it out. See here: http://cl.ly/PQqP

It required me to do two separate UIView transitionWithView methods:

        [_transitionView addSubview:smallView];
        [smallView setFrame:CGRectMake(0, 0, _transitionView.frame.size.width, _transitionView.frame.size.height)];
        [UIView transitionWithView:_transitionView duration:.5 options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionLayoutSubviews | UIViewAnimationOptionCurveEaseOut animations:^(){
            [UIView transitionWithView:cellView duration:.25 options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionLayoutSubviews | UIViewAnimationOptionCurveEaseIn animations:^(){
                [cellView setFrame:smallViewOrigin];
            } completion:NULL];
            _transitionView.frame = finalSize;
            smallView.frame = smallViewOrigin;
            [_transitionView insertSubview:metricModalViewController.view belowSubview:smallView];
            [smallView removeFromSuperview];
            metricModalViewController.view.frame = metricModalEndSize;
        } completion:^(BOOL finished) {
            [_transitionView setFinalView:metricModalViewController.view];;
        }];

Upvotes: 1

morningstar
morningstar

Reputation: 9122

Maybe try this. Set up a view containerView that is a child of self and initially contains smallView. Make the frame of containerView what you initially had for smallView. Make the size of smallView the same as the size of containerView but the origin (0,0) so that smallView fills containerView entirely.

[UIView transitionWithView:containerView
        duration:2
        options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionAllowAnimatedContent
        animations:^(){
            containerView.frame = finalSize;
            smallView.frame.size = finalSize.size;
            [smallView removeFromSuperview];
            [containerView addSubview:largeView];
            largeView.frame.size = finalSize.size;
        }
        completion:NULL];

I'm just guessing, again.

Upvotes: 0

morningstar
morningstar

Reputation: 9122

It looks like you should use transitionWithView:duration:options:animations:completion: instead. Like this:

[UIView transitionWithView:self
        duration:2
        options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionAllowAnimatedContent
        animations:^(){
            smallView.frame = finalSize;
            [smallView removeFromSuperview];
            [self addSubview:largeView];
            largeView.frame = finalSize;
        }
        completion:NULL];

That might flip the self view, which might not look exactly right. If that's a problem, then add an extra view in your hierarchy which does nothing but contain smallView or largeView at the same size as them. Set the frame of that view in addition to those of the smallView and largeView. (Or just set the container view transform, or just set the container view frame and configure appropriate autoresizing options for the smallView and largeView.)

Upvotes: 0

Related Questions