使用动画更改 UIView 背景颜色

Question

我想用过渡动画更改 UIView 背景颜色。例如，如果视图是红色的，我将其更改为蓝色。蓝色将从屏幕底部向上滑动到顶部并填满整个屏幕。我正在考虑通过制作具有所需颜色的相同大小的 UIView 然后将其从屏幕外动画化到顶部来实现。不过，这似乎不是一种非常优雅的方式。有没有更好的方法来做到这一点？任何一点将不胜感激。谢谢！

Answer 1

你可以：

如您所述，在动画中使用另一个 UIView 作为中间件。它不是那么优雅，但它的工作原理和它的简单。
与 CALayer, if you search for it you could find lot's of easy examples, this one for example, from Ray Wenderlich 一起工作，我觉得这很棒。

更新

我自己使用 CAShapeLayer 创建了这个效果，我还使用 UIView 动画创建了这个效果。以下是摘录，已评论，欢迎随时修改：

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];
}

Answer 2

试试这个：

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"];

你可以试试这个：

[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];

我还有另一个建议可以让过渡顺利进行：

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

使用动画更改 UIView 背景颜色

Changing UIView background color using an animation

objective-c

uiview

caanimation

uiviewanimation

ios