使用动画更改UIView背景颜色

Question

我想用过渡动画改变我的UIView背景颜色。 例如，如果视图为红色，我将其更改为蓝色。 蓝色将从屏幕底部向上滑动到顶部并填满整个屏幕。 我想通过制作具有所需颜色的相同尺寸的UIView ，然后从屏幕上直到顶部制作动画来实现这一点。 尽管如此，这似乎并不是一种非常优雅的方式。 有没有更好的方法呢？ 任何积分都会非常感激。 谢谢！

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

Answer 2

你可以：

• 正如您所提到的，使用另一个UIView作为动画中的中间件。 它不那么优雅，但它的工作原理和简单。
• 使用CALayer ，如果你搜索它，你可以找到许多简单的例子，例如，来自Ray Wenderlich ，我觉得很棒。

UPDATE

我自己使用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];
}