Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flash screen white at moment of camera capture?

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.

like image 893
Rohan Avatar asked Jul 31 '12 01:07

Rohan


1 Answers

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).

like image 77
pasawaya Avatar answered Sep 19 '22 10:09

pasawaya