Animated change colour of UIView - ios

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