Changing UIView background color using an animation

问题

I want to change my UIView background color with a transition animation. For example, if the view is red and I change it to blue. The blue color will slide up from the bottom of the screen to the top and fill the whole screen. I was thinking of doing this by making a UIView of identical size with the desired color and then animating it from off screen up to the top. This doesn't seem like a very elegant way to do it though. Is there any better way of doing this? Any points would be really appreciated. Thanks!

回答1:

Try this:

CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(0, self.view.bounds.size.height, self.view.bounds.size.width, self.view.bounds.size.height);
layer.backgroundColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:layer];

CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"position.y";
animation.byValue = @(-self.view.bounds.size.height);
animation.duration = 1;

animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;

[layer addAnimation:animation forKey:@"Splash"];

You can try this out:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
                       forView:self.view cache:NO];
self.view.layer.backgroundColor = [UIColor blueColor].CGColor;
[UIView commitAnimations];

I also have another suggestion that make the transition smooth:

[UIView animateWithDuration:2.0 animations:^{
    self.view.layer.backgroundColor = [UIColor blueColor].CGColor;
} completion:nil];

回答2:

You could:

• Use another UIView as a intermediate in the animation, as you mentioned. its not that elegant but it works and its simple.
• Work with CALayer, if you search for it you could find lot's of easy examples, this one for example, from Ray Wenderlich, which i find great.

UPDATE

I took upon myself to create this effect using CAShapeLayer, and i also created the effect using UIView animation. Here are the snippets, its commented, and feel free to modify:

UIView

- (void)changeColorWithFillingAnimation {
    //we create a view that will increase in size from top to bottom, thats why it starts with these frame parameters
    UIView *fillingView = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height - 1, self.view.bounds.size.width, 1)];
    //set the color we want to change to
    fillingView.backgroundColor = [UIColor blueColor];
    //add it to the view we want to change the color
    [self.view addSubview:fillingView];

    [UIView animateWithDuration:2.0 animations:^{
        //this will make so the view animates up, since its animating the frame to the target view's size
        fillingView.frame = self.view.bounds;
    } completion:^(BOOL finished) {
        //set the color we want and then disappear with the filling view.
        self.view.backgroundColor = [UIColor blueColor];
        [fillingView removeFromSuperview];
    }];
}

CAShapeLayer + CABasicAnimation + CATransition

- (void)changeColorWithShapeLayer {
    //create the initial and the final path.
    UIBezierPath *fromPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, self.view.bounds.size.height - 1, self.view.bounds.size.width, 1)];
    UIBezierPath *toPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
    //create the shape layer that will be animated
    CAShapeLayer *fillingShape = [CAShapeLayer layer];
    fillingShape.path = fromPath.CGPath;
    fillingShape.fillColor = [UIColor blueColor].CGColor;
    //create the animation for the shape layer
    CABasicAnimation *animatedFill = [CABasicAnimation animationWithKeyPath:@"path"];
    animatedFill.duration = 2.0f;
    animatedFill.fromValue = (id)fromPath.CGPath;
    animatedFill.toValue = (id)toPath.CGPath;

    //using CATransaction like this we can set a completion block
    [CATransaction begin];

    [CATransaction setCompletionBlock:^{
        //when the animation ends, we want to set the proper color itself!
        self.view.backgroundColor = [UIColor blueColor];
    }];

    //add the animation to the shape layer, then add the shape layer as a sublayer on the view changing color
    [fillingShape addAnimation:animatedFill forKey:@"path"];
    [self.view.layer addSublayer:fillingShape];

    [CATransaction commit];
}

来源：https://stackoverflow.com/questions/30380910/changing-uiview-background-color-using-an-animation