Skip to content

Instantly share code, notes, and snippets.

@samvermette
Created January 27, 2012 22:27
Show Gist options
  • Save samvermette/1691280 to your computer and use it in GitHub Desktop.
Save samvermette/1691280 to your computer and use it in GitHub Desktop.
MapKit callout bubble pop animation
self.view.layer.anchorPoint = CGPointMake(0.50, 1.0);
CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
bounceAnimation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.05],
[NSNumber numberWithFloat:1.08],
[NSNumber numberWithFloat:0.92],
[NSNumber numberWithFloat:1.0],
nil];
bounceAnimation.duration = 0.3;
[bounceAnimation setTimingFunctions:[NSArray arrayWithObjects:
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
nil]];
bounceAnimation.removedOnCompletion = NO;
[self.view.layer addAnimation:bounceAnimation forKey:@"bounce"];
@nfarina
Copy link

nfarina commented Aug 10, 2012

I analyzed UICalloutView "under a microscope" while it animated, inspecting its sequence of CABasicAnimations as it appeared, and I believe this is the exact sizing+timing sequence:

CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
CAMediaTimingFunction *easeInOut = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

bounceAnimation.values = @[@0.05, @1.11245, @0.951807, @1.0];
bounceAnimation.keyTimes = @[@0, @(4.0/9.0), @(4.0/9.0+5.0/18.0), @1.0];
bounceAnimation.duration = 0.3;
bounceAnimation.timingFunctions = @[easeInOut, easeInOut, easeInOut, easeInOut];

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment