UIView transitionWithView: animation behavior with background color

I created a simple project to experiment with a piece of animation UIView transitionWithView:

and ran into some rather strange behavior.

enter image description here

The animation only works as intended with the label text (changes it while viewing it halfway through), but the color change happens at the end of the animation, yes. Is there a way to use this kind of animation to change the background colors (images?) Halfway through the animation? I can create something similar to myself with Core Animation, but I don't want to reinvent the wheel. I feel like I just am not using this method correctly

The whole example code:

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *containerView;
@property (weak, nonatomic) IBOutlet UIView *innerView;
@property (weak, nonatomic) IBOutlet UILabel *label;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.innerView.layer.cornerRadius = 25.0;
    // Do any additional setup after loading the view, typically from a nib.
}

- (UIColor *)randomColor {

    CGFloat hue = ( arc4random() % 256 / 256.0 );  
    CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  
    CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  
    UIColor *color = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

    return color;
}


- (IBAction)flipAction:(id)sender {

    static int i = 0;
    i++;

    [UIView transitionWithView:self.containerView
                      duration:0.5
                       options:UIViewAnimationOptionTransitionFlipFromTop
                    animations:^{

                        self.innerView.backgroundColor = [self randomColor];
                        self.label.text = [NSString stringWithFormat:@"Flip - %d", i];

                    } completion:nil];

}

@end

      

Sidenote. Interestingly, I found that when the animation parameters are set to UIViewAnimationOptionTransitionCrossDissolve

, it does the same thing, but! if you set it to 0 it will animate the color property by duration. Pretty sure that in this case we see an implicit animation of the layer

enter image description here

+3


source to share


1 answer


Wrap the color change line in the performWithoutAnimation block.



Why I assume this works is that the transition captures a screenshot before the transition block and one after it is triggered. When you changed the color without doing nothing, there will be no changed color immediately after the screenshot (make it liven up). With performWithoutAnimation function after screenshot has final color which will be correctly captured in screenshot after.

+7


source







All Articles