使用动画改变UIView的背景颜色

Question

我想用转换动画来更改UIView的背景颜色。例如，如果视图是红色的，我将其更改为蓝色。蓝色将从屏幕底部向上滑动并填满整个屏幕。 我考虑通过创建与所需颜色相同大小的UIView，然后将其从屏幕外部动画地向上移动到顶部来实现此目的。但这似乎不是一个非常优雅的方式。是否有更好的方法可以做到这一点？任何意见都将不胜感激。谢谢！

- Kex

Answer 1

试试这个：

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

- Lucas Huang

---

抱歉，我可能没有正确地表达我的问题。我指的是更多的向上滑动动画。现在正在查看您的代码，看看是否有任何可以替换的内容，使其向上滑动。 - Kex

你需要转换视图控制器的动画还是只需要在同一视图中进行简单的动画呢？ - Lucas Huang

抱歉，我正在忙于某件事情。代码的第一部分应该可以满足你的需求。 - Lucas Huang

你描述的方式更多地使用了高级API，这是可以的。但是 CAAnimation 可以让你理解更多。 - Lucas Huang

Answer 2

您可以：

• 使用另一个UIView作为动画中介，正如您所提到的。虽然不够优雅，但是它能够工作并且简单。
• 使用CALayer，如果您搜索一下，就可以找到很多易于理解的示例。例如，这个来自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];
}

- Erakk

---

嗨，我刚看到了。稍后我会检查它。期待着。干杯！ - Kex