Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MKMapView: how can I replicate the 'bounce-zoom' seen in Apple's 'Find my iPhone/Friends' apps?

Background

MKMapView comes with several methods that let you set the visible map rect (or region, coordinate span etc). These methods have an animated parameter, and when set to true, a linear animation of roughly 0.3 seconds is used to animate the change.

Question

While this is nice, I'd like to replicate the animation Apple has used in their Find my Friends and Find my iPhone apps, when tapping on the map. If you try it yourself, you'll notice a much quicker animation (roughly 0.15 seconds) with a non-linear curve. For now, let's call it a 'bounce-zoom' transition.

I'd like to replicate both the non linear animation curve, and custom animation duration. Wrapping map updates in UIView's animateWithSpring... method doesn't seem to work (I could be doing it wrong of course). Very aware Apple may have the ability to do things not publicly available in MKMapView's API, however Apple's App Store distributed apps do usually seem to stick to their guidelines about public API.

Is this possible? If so - how? Merely changing the animation duration is not what I'm after. I'd like to have control over the animation curve too.

Sample Code

See here for a playground attempting to do the above. Note that MKMapView seems to take the animation duration into account, but not the springiness, like Find my iPhone/Find my Friends.

like image 255
Jordan Smith Avatar asked Oct 30 '22 03:10

Jordan Smith


1 Answers

I think you are looking for AnimateWithDuration and use the UIViewAnimationOptionCurveEaseInOut option. I did something similar in an app i created but with buttons. I had to chain animations together. Make it 100% of the intended size, then 80%, then back to 100%

like image 80
Brendan Miller Avatar answered Nov 15 '22 07:11

Brendan Miller