UIButton can't be touched while animated with UIView animateWithDuration

Question

I have the following code:

[UIView animateWithDuration:0.3
                      delay:0.0
                    options:UIViewAnimationCurveEaseOut | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     CGRect r = [btn frame];
                     r.origin.y -= 40;
                     [btn setFrame: r];
                 }
                 completion:^(BOOL done){
                     if(done){
                         [UIView animateWithDuration:0.3
                                               delay:1
                                             options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAllowUserInteraction
                                          animations:^{
                                              CGRect r = [btn frame];
                                              r.origin.y += 40;
                                              [btn setFrame: r];
                                          }
                                          completion:^(BOOL done){if(done) zombiePopping = 0; }];
                     }

                 }];

The problem is, it seems the button doesnt respond to touches while being animated even though i'm using UIViewAnimationOptionAllowInteraction, which is a bit weird to me.

Maybe this most be done with Core Animation to work? and if so, how would i go about that?

Answer 1

Swift 5

In my case, when I set button.alpha = 0, the button interaction stops working, no matter if I setup UIViewAnimationOptionAllowUserInteraction as an option.

Reason

Whenever you define the animation or not, the view's property is applying to view's layer immediately. Because of this, when you set the view.alpha=0, you hide the view completely.

Solution

Easy, just reduce alpha=0.1 (or even 0.05)

UIView.animate(withDuration: 2,
                       delay: 0,
                       options: [.allowUserInteraction, .overrideInheritedOptions, .curveEaseOut, .repeat, .autoreverse],
                       animations: {
                           self.button.layer.opacity = 0.01 // 0.0 will make the button unavailable to touch
        })

Answer 2

The touchable part of the button will not coincide with the button's visible frame when it is being animated.

Internally, the button's frame will be set to the final value from your animation. You should find that you can tap in this area, and it would work.

To hit a moving button, you need to do hit testing on the button's .layer.presentationLayer property (need to import the QuartzCore framework to do this). This would typically be done in touch handling methods in your view controller.

I am happy to expand on this answer if you need more.

Here is how you would respond to a touch event by hit testing presentation layers. This code is in the view controller subclass that is managing your buttons. When I did this I was interested in the initial touch rather than the touch ending (which is typically when a tap would register) but the principle is the same.

Remember to import the QuartzCore framework and add it to your project.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self.view];
    for (UIButton *button in self.buttonsOutletCollection)
    {
        if ([button.layer.presentationLayer hitTest:touchLocation])
        {
            // This button was hit whilst moving - do something with it here
            break;
        }
    }
}

Answer 3

The order of the options are matters, you have to place UIViewAnimationOptionAllowUserInteraction first, then add other options.

In Swift 3 use: .allowUserInteraction