Search code examples
iosobjective-cuiviewanimationuiviewanimationtransitionuiviewanimation-curve

transitionFromView: and strange behavior with flip.


I have a image wall (UIScrollView) and in there I have a lot of UIImageView's.

Here is my code:

for (ThumbPosterModel *tPoster in _thumbsPosterStack) {

    UIImageView *imageView = [[UIImageView alloc] initWithImage:tPoster.thumb];
    imageView.userInteractionEnabled = YES;
    imageView.frame = CGRectMake(i, imageView.frame.origin.y, imageView.frame.size.width, imageView.frame.size.height);

    [tPoster setTag:tag];
    [_posterTagArr addObject:(BasicPosterModel*)tPoster];

    imageView.tag = tag;
    tag++;
    [posterWallScrollView addSubview:imageView];

    UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageDoubleTapped:)];
    doubleTap.numberOfTapsRequired = 2;
    [imageView addGestureRecognizer:doubleTap];
}

And Here is my IBAction:

-(IBAction)imageDoubleTapped:(id)sender {
    NSInteger selectTag = (((UIGestureRecognizer*)sender).view.tag);
    for (BasicPosterModel *bPoster in _posterTagArr) {
        if(bPoster.tag == selectTag) {
            [UIView transitionFromView:(UIImageView*)((UIGestureRecognizer*)sender).view
                                toView:mySecordView //let's say next ImageView. Doesn't matter
                              duration:1.0
                               options:UIViewAnimationOptionTransitionCrossDissolve  
                            completion:^(BOOL finished) {
                                // animation completed
                            }];

        }
    }
}

And when I use:

UIViewAnimationOptionTransitionCrossDissolve this is effect ONLY on my image in ScrollView. When I use in this code UIViewAnimationOptionTransitionFlipFromTop this affect to my scrollView.

How it's possible?

Of course I want to my Animation effect only for single image.


Solution

  • Here's how the transition works conceptually:

    1. The system renders the current state of the parent view of the fromView to an off-screen buffer ("before" state)
    2. the fromView is removed from its parent view
    3. the toView is added to the parentView (can be nil, you're right about that; in that case nothing is added)
    4. The system renders the parent view into an off-screen buffer ("after" state")
    5. the system animates the transition of the parent view from the "before" state to the "after" state

    In your case the parent view is the scroll view, so the whole scroll view is transitioned. Counter to your perception, that's the case even when using a cross dissolve. It's just that most of the scrollview (the part that's not covered by fromView) is identical before and after, so it looks as if that part does not take part in the transition - but it does.

    If I understand correctly, your are arranging multiple stacks of image views horizontally in your scroll view, and whenever someone double taps on the "uppermost" image view in a stack, you want to "reveal" the image directly below it, without affecting the other stacks.

    If you add a container view to the scrollView for each of these stacks that is the same size as the stack, and put all the ImageViews for this stack into this container view instead of directly into the scroll view, it will work. On tap, just do a transition from the tapped view to nil as you originally did. The transition's size on the screen will be limited to the container view (roughly - curls and flips use some space beyond its frame).

    Depending on your requirements, you might want to remove the stack's container view after the last image in the stack is removed.