I'd like to flash (and then fade out) the screen right at the moment of camera capture to give the user the indication that a picture has been taken (besides just an auditory clue).
Where would such an animation be placed? Also, how would it be implemented such that I can control the duration of the fadeout?
Note: I've created a custom overlay for my particular camera picker.
Anything indicating that a picture has been taken is what I am looking for.
I'm not sure where you would place the animation because I don't know how exactly you capture the picture (maybe you could post the code), but here's the code for an animation to flash the screen white:
//Header (.h) file
@property (nonatomic, strong) UIView *whiteScreen;
//Implementation (.m) file
@synthesize whiteScreen;
- (void)viewDidLoad {
self.whiteScreen = [[UIView alloc] initWithFrame:self.view.frame];
self.whiteScreen.layer.opacity = 0.0f;
self.whiteScreen.layer.backgroundColor = [[UIColor whiteColor] CGColor];
[self.view addSubview:self.whiteScreen];
}
-(void)flashScreen {
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
NSArray *animationValues = @[ @0.8f, @0.0f ];
NSArray *animationTimes = @[ @0.3f, @1.0f ];
id timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
NSArray *animationTimingFunctions = @[ timingFunction, timingFunction ];
[opacityAnimation setValues:animationValues];
[opacityAnimation setKeyTimes:animationTimes];
[opacityAnimation setTimingFunctions:animationTimingFunctions];
opacityAnimation.fillMode = kCAFillModeForwards;
opacityAnimation.removedOnCompletion = YES;
opacityAnimation.duration = 0.4;
[self.whiteScreen.layer addAnimation:opacityAnimation forKey:@"animation"];
}
You also asked how to control the fadeout duration. You can do this by adjusting the values in the animationTimes
array. If you're not familiar with how CAKeyframeAnimations
work, then here's quick briefer. The total duration of the animation is controlled by the opacityAnimation.duration = 0.4
. This makes the animation 0.4 seconds long. Now onto what animationTimes
does. Each value in the array is a number between 0.0 and 1.0 and corresponds to an element in the 'animationValues' array. The value in the times array defines the duration of the corresponding keyframe value as a fraction of the total duration of the animation.
For example, in the above animation, the times array contains the values 0.3 and 1.0, which correspond to the values 0.8 and 0.0. The total duration is 0.4, so that means that the whiteScreen view which has its opacity initially at 0.0, takes
0.4 * 0.3 = 0.12 seconds.
to raise the opacity to 0.8. The second value, 0.0, makes the layer go transparent again. This takes up the remainder of the time (0.4 - 0.12 = 0.28 seconds).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With