Flickering for multiple concurrent calls to UIView transitionWithView with UIViewAnimationOptionTransitionCrossDissolve on UIImageView

Question

I would like to animate the change of an image to another from a UIImageView with:

[UIView transitionWithView:self.scrollView
                      duration:1
                       options:UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction
                    animations:^
    {
        self.imageView.image = image;

    } completion:nil];

which works perfectly fine for one animation. But if I have one or more animations starting while the first one is still in progress I get some wired behavior it looks like some sort of jumps or flickering. If I use slow animations in the simulator it seems the first animation is stopped and jumps right to the end image of the first animation and starts then with the second one. Does anyone have an idea how to prevent this to happen?

score 4 · Answer 1 · answered Oct 04 '13 at 14:00

Try to tell the animation that it should begin from the current state. (UIViewAnimationOptionBeginFromCurrentState)

[UIView transitionWithView:self.imageView
                      duration:1
                       options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction 
                    animations:^
    {
        self.imageView.image = image;

    } completion:nil];

Lukas Kukacka · Answer 2 · 2013-10-04T12:30:58.567

Try this instead

[UIView transitionWithView:self.imageView...

By using [UIView transitionWithView:self.scrollView... you are basically saying "Hey, I want to animate whole scroll view" which you probably don't want. You always want to animate only the particular changed image view.

Edit:

Take a look this piece of code. It performs cross-fade (cross dissolve) animation of changing the image in the image view. It works fine, I have used this code many times.

[UIView transitionWithView:imageView
              duration:0.4
               options:UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction
            animations:^{
                //  Set the new image
                //  Since its done in animation block, the change will be animated
                imageView.image = newImage;
            } completion:^(BOOL finished) {
                //  Do whatever when the animation is finished
            }];

If I understand your problem correctly, here is the explanation of where the problem probably is:

[UIView transitionWithView:self.scrollView start animation for the whole scroll view. The cross dissolve animation includes following steps:

Create "snapshot" of animated view's (scroll view's in your case) layer
Perform changes in the animation block
Create new snapshot of view. This time, the snapshot already contains the changes (image view has new image)
Perform cross dissolve (cross-fade) of the two snapshots.
Done

Here you can see where the problem comes from. You are probably mixing multiple scroll view animations (cross-fades) caused by improperly defined animation block view (whole scroll view instead of just the internal image view)

Thanks for your help. Tried it but still same problem. And the documentation says: The container view that performs the transition. so that should be in my case the scrollView where the imageView is on. — BObereder, Oct 04 '13 at 12:22
Please take a look at my edited answer. I have added piece of code performing cross fade animation changing the image. This code works fine, I have used this one many times. — Lukas Kukacka, Oct 04 '13 at 12:28

Flickering for multiple concurrent calls to UIView transitionWithView with UIViewAnimationOptionTransitionCrossDissolve on UIImageView

2 Answers2