使用动画更改 UIView 背景颜色

Posted 2023-03-13

【中文标题】使用动画更改 UIView 背景颜色

【英文标题】：Changing UIView background color using an animation

【发布时间】：2015-05-21 17:47:59

【问题描述】：

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

【参考方案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];

【讨论】：

抱歉，我的问题可能写得不正确。我的意思是更多的上滑动画。现在看看你的代码，看看是否有任何我可以插入的东西让它向上滑动。

实际上，您想要用于转换视图控制器的动画还是只是在同一视图中的简单动画？

对不起，我正忙着做点事。代码的第一部分应该做你想做的事。

您描述的方式更多的是使用更高级别的API，这没关系。但是CAAnimation可以让你了解更多。

【参考方案2】：

你可以：

如您所述，在动画中使用另一个 UIView 作为中间体。它不是那么优雅，但它有效且简单。 使用CALayer，如果你搜索它，你会发现很多简单的例子，例如这个来自Ray Wenderlich，我觉得很好。

更新

我自己使用 CAShapeLayer 创建了这个效果，我还使用 UIView 动画创建了这个效果。这里是 sn-ps，它的注释，随意修改：

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

【讨论】：

嘿，马上出去。我稍后会检查一下。期待它。干杯！