AVFoundation focus animation using Core Animation - ios

Question

So,I want to show a square box, a I typical focus animation when a user taps on the screen. Here is what I have tried:
-(void)showFocusAnimation:(CGPoint)location{
UIView *square = [[UIView alloc]initWithFrame:CGRectMake(location.x, location.y, 40, 40)];
square.alpha=1.0;
square.layer.borderColor = (__bridge CGColorRef)[UIColor colorWithRed:12.0/255.0 green:185.0/255.0 blue:249.0/255.0 alpha:1];
square.layer.borderWidth = 2.0;
[overlayView addSubview:square];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.1];
square.frame = CGRectMake(location.x, location.y, 90, 90);
[UIView commitAnimations];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.1];
square.frame = CGRectMake(location.x, location.y, 40, 40);
[UIView commitAnimations];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.2];
square.frame = CGRectMake(location.x, location.y, 90, 90);
square.alpha = 0;
[UIView commitAnimations];
}
I have a couple of problems that I cant seem to solve :
I can't get my border to show up.
Currently I am drawing a square starting from the point where the user tapped the screen. The point at which the user taps it, should actually be the center of the square.
I can't seem to get the animation correct. What I am trying to do is, decrease the square size, increase it and then decrease it again and then the alpha = 0.
I thought if I have 3 different separate animations maybe it will work, is not working.

Answer 1

Your problem is that triggering animations is asynchronous so they all start at the same time and first two frame animations are replaced by the third.
One thing that you could do instead is to use Core Animation (your question actually uses UIView animation and the not even the new block stuff) to create an animation group for the size and opacity animations. It would look something like this (note I didn't run this so it may contain typos and such)
CAKeyframeAnimation *resize = [CAKeyframeAnimation animationWithKeyPath:#"bounds.size"];
resize.values = #[[NSValue valueWithCGSize:CGSizeMake(40, 40)],
[NSValue valueWithCGSize:CGSizeMake(90, 90)],
[NSValue valueWithCGSize:CGSizeMake(40, 40)],
[NSValue valueWithCGSize:CGSizeMake(90, 90)]];
resize.keyTimes = #[#0, #.25, #.5, #1];
CABasicAnimation *fadeOut = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeOut.toValue = #0;
fadeOut.beginTime = .2;
CAAnimationGroup *both = [CAAnimationGroup animation];
both.animations = #[resize, fadeOut];
CALayer *squareLayer = nil; // Your layer code here.
[squareLayer addAnimation:both forKey:#"Do the focus animation"];
// Make sure to remove the layer after the animation completes.
Things to note are:
I'm animating bounds.size because the frame isn't really changing and it's better to be precise.
The group has the total duration
keyTimes are specified from 0 to 1
When the animation completes it will be removed from the layer.
Since the last thing in your animation is to fade the opacity to 0 you should removed it when you are done. One way of doing this is to become the delegate of the group and implement
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
// remove layer here since it should have faded to 0 opacity
}