Animated change colour of UIView

Question

I want to change colour of my view while swiping but i don't know how to do animated colour change. I'll be grateful for the help.

Answer 1

backgroundColor is animatable right out of the box

[UIView animateWithDuration:0.5 delay:1.0 options: UIViewAnimationCurveEaseOut animations:^{
    //this is the animation block here
    myView.backgroundColor = newColor;
} completion:^(BOOL finished) {
    if (finished){
        NSLog(@"Colour animation complete!");
    }
}];

Answer 2

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.

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

One very simple way to accomplish this would be to use a UIView animation block.

[UIView animateWithDuration:1.0 animations:^{
    view.backgroundColor = [UIColor redColor];
}];

Answer 3

Assumming that you have implemented left swipe gesture,

UISwipeGestureRecognizer * swipeleft=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeleft:)];
swipeleft.direction=UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:swipeleft];

// Implement Gesture Methods

-(void)swipeleft:(UISwipeGestureRecognizer*)gestureRecognizer 
{
   //Do what you want here
    [UIView animateWithDuration:.5
                     animations:^{
                       self.view.backgroundColor = [UIColor yellowColor];
                     }
                     completion:^(BOOL finished){
                         NSLog(@"completion block");
                     }];
}
}