Trying to animate a subview in and out of sight using didSelectAnnotationView and didDeselectAnnotationView

Question

I have multiple annotations set up on an MKMapView. Instead of using map annotation callouts when a pin is clicked, I instead want to animate a subview (self.detailView) up into the bottom of the screen, and move it back out when nothing is selected. When the user has a pin selected, and then selects another pin, I want my view to animate off screen, and then immediately animate back on screen (with different information corresponding to the newly selected annotation, of course).

Without thinking too hard, I tried what seemed like the easy thing to do - when annotation is selected, animate self.detailView onto screen, and when it is deselected, animate self.detailView off screen:

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{
    NSLog( @"selected annotation view" );

    [UIView animateWithDuration:0.2f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                      animations:^{
                          [self.detailView setFrame:CGRectMake(0, 307, 320, 60)];       
                      }
                      completion:^(BOOL finished){                

                      }];
}

- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view
{
    NSLog( @"deselected annotation view" );

    [UIView animateWithDuration:0.2f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                      animations:^{
                          [self.detailView setFrame:CGRectMake(0, 367, 320, 60)];       
                      }
                      completion:^(BOOL finished){

                      }];

}

This works fine when no pin is selected and the user selects a pin, and when a pin is selected and the user deselects it by clicking on empty space. Of course, the problem occurs when a pin is already selected: if the user then clicks on another pin, didDeselectAnnotationView and didSelectAnnotationView are fired in rapid succession, both animations try to run at the same time, and as a result the effect doesn't work properly. Normally I would chain the animations together by putting the second animation in the completion block of the first, but since they are in separate methods I obviously can't do that here.

Anyone have any ideas on how I might be able to get around this issue? Thanks!

Use flags to coordinate your animations. You can chain animations in the completion blocks, but you can also do successive animations by setting the delay of the second animation to be the duration of the first animation, though the timing isn't as exact. — yuf, Oct 31 '12 at 22:37

score 2 · Accepted Answer · edited May 23 '17 at 12:03

There may be a better way to do what you want, but I'll answer your specific question first.

Implement public methods in your controller that controls the view that animates off and on again:

- (void)showInfoView:(MyInfoClass*)theInfo;
- (void)hideInfoView;

In showInfoView you set a flag that it is shown/showing and animate it on-screen - do this code in a block and call it immediately just to get it working like this...

dispatch_block_t showBlock = ^
{
    self.isShowing = YES;
    /* show code goes here */
};
showBlock();

In hideInfoView you animate it off and unset the flag in the animation completion block.

Now in showInfoView before calling that showBlock check the flag to make sure it's not already shown - if it is then instead of executing the block immediately, add it to the end of an NSMutableArray called toShowBlocks. Then in hideInfoView before unsetting the flag check if the toShowBlocks array is not empty, if it's not then you remove and call the first item (using the array as a FIFO queue) like this...

dispatch_block_t nextShowBlock = [toShowBlocks objectAtIndex:0];
[toShowBlocks removeObjectAtIndex:0];
nextShowBlock();

Then you simply need to call your show and hide methods as the pins are selected/deselected and this will take care of it for you. This should set you on the right path at least.

Maybe a better way:

There are a few problems with the above, the animated view might get hidden and shown a lot if the user goes nuts pressing pins, resulting in a long-winded queue of animations before the user gets the last one. Also, views don't follow the map around like annotations do when the user pans and zooms the map. So you might be better off using custom annotations for your info view. This is a real pain because MKAnnotation views don't behave like regular UIViews and this causes all sorts of problems. However, I describe a way to use MKAnnotations as custom call-outs in this answer: https://stackoverflow.com/a/8649951/461492.

Great answer. I did a bunch of research into custom annotations and decided it wasn't worth going down that road - instead, the view that I am showing and hiding based on pin selection will just sit across the entire bottom of the screen, regardless of where the pin is or how the map is moved. Slightly different feel than custom call-outs, but I think it will still result in a nice effect. You're right about the possibility of the user "going nuts," but I'm going to play with your block method for now and see how it goes. — cowfaboo, Nov 01 '12 at 04:55

Trying to animate a subview in and out of sight using didSelectAnnotationView and didDeselectAnnotationView

1 Answers1