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

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 2

In my case, I set superView.alpha = 0, it stops interaction of button although I setup UIViewAnimationOptionAllowUserInteraction .

Solution? Easy, just reduce alpha to 0.1 instead of 0

[UIView animateWithDuration:durationTime delay:0 options:UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionOverrideInheritedOptions | UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations: ^{
            superView.alpha = 0.1; // 0.0 will make the button unavailable to touch
        } completion:nil];

Answer 3

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

In Swift 3 use: .allowUserInteraction

Answer 4

I have achieved this using NSTimer: First, execute start animation, then you should start a timer, this is the demo code:

-(void)fun···
{
    [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){}];

    then , you should start an timer,example:
    //start timer
   if (timer != nil)
   {
       [timer invalidate];
       timer = nil;
   }
   [self performSelector:@selector(closeButton) withObject:nil afterDelay:0];
}


- (void)closeButton
{
    if (timer != nil)
    {
        return;
    }

    //start timer
    timer = [NSTimer scheduledTimerWithTimeInterval:1.5f target:self selector:@selector(timerEvent) userInfo:nil repeats:NO];
    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
}

- (void)timerEvent
{
    [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; }];
    [timer invalidate];
    timer = nil;
}

Answer 5

Same answer in Swift (2.0), for the lazy. Replace with a loop and outlet collection if necessary:

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let touch = touches.first
    let touchLocation = touch!.locationInView(self.view)
    if self.button.layer.presentationLayer()!.hitTest(touchLocation) != nil {
        action() // Your action, preferably the original button action.
    }
}

Answer 6

Swift 3.0 Create a superview on top in viewdidload

let superView = UIView(frame: view.frame)
    superView.isUserInteractionEnabled = true
    superView.backgroundColor = UIColor.clear
    superView.alpha = 0.1
    view.addSubview(superView)

now implement touchesbagan like this

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    guard let touch = (touches as NSSet).anyObject() as? UITouch else {
        return
    }

    let touchLocation = touch.location(in: self.view)
    if btnone.layer.presentation()?.hitTest(touchLocation) != nil {
        print("1") // Do stuff for button 
    }
    if btntwo.layer.presentation()?.hitTest(touchLocation) != nil {
        print("2") // Do stuff
    }
    if btnthree.layer.presentation()?.hitTest(touchLocation) != nil {
        print(3) // Do stuff
    }
    if btnfour.layer.presentation()?.hitTest(touchLocation) != nil {
        print(4) // Do stuff
    }
}

Answer 7

If you have a subclass of the UIButton the easiest way is by overriding the hitTest like

public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        return self.layer.presentation()?.hitTest(self.convert(point, to: superview)).flatMap { _ in return self } ?? nil
    }

Answer 8

Swift version: '999' is tag value used to identify the target view.

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let touchLocation = (touch?.locationInView(self.rootView))!

        for view in self.view.subviews {
            if let layer = view.layer.presentationLayer()?.hitTest(touchLocation) where view.tag == 999 {
                // Here view is the tapped view
                print(view)
            }
        }
    }

Answer 9

works like a charm

override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? { if bounds.contains(point) && !hidden && userInteractionEnabled && enabled { return self } return super.hitTest(point, withEvent: event) }

Although this answer is also correct

Answer 10

I had 4 buttons on screen which should serve as navigation to left, righ, down and up. I used simple hack from @nahung89 answer and added completion to get full effect I needed. Here is the code:

1. Connected all buttons to Outlet collection in ViewController

   @IBOutlet var navigationButtons: [UIButton]!
   

2. Added this funcion in viewDidAppear:

       navigationButtons.forEach { button in
           UIView.animate(withDuration: 0.5,
                                   delay: 5,
                                   options: [.curveLinear, .allowUserInteraction],
                                   animations: {
                                       button.alpha = 0.1
           }) { _ in button.alpha = 0 }
       }