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?

Solution 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;
        }
    }
}

Solution 2

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
        })

Solution 3

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

In Swift 3 use: .allowUserInteraction

Solution 4

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
    }
}

Solution 5

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
    }

View more solutions

Comments

[jrturton]

Your other option is to move the buttons in very small increments on a repeating timer, as you would in a game updating loop. Hit tests on 8 buttons is pretty trivial, if they are in an array.

[Shai Mishali]

Can you give me some code examples? im not sure exactly what are my options, thanks again :)

[Shai Mishali]

The buttons are in an array (IBOutletCollection)

[jrturton]

I've updated the answer. I don't have a sample for the timer option, I've only done it this way.

[TonyMkenu]

@jrturton Tks Tks... +10.. I spent a day in the dark... before that

[SteBra]

Can anyone explain where would I call this method? (NSSet *)touches is not clear to me. I can't figure out what is this

[jrturton]

@Stebra You don't call this method. UIKit calls it for you, on your view controller.

[Mohit]

what is buttonsOutletCollection in above code?? please explain me

[jrturton]

@mohitpopat it's an outlet to an IBOutletCollection, which is an array of items that you can link up in interface builder.

[msweet168]

any chance you can rewrite this in swift

[jrturton]

@msweet168 feel free to try it yourself and update the answer

[msweet168]

Havent figured it out

[Xu Yin]

this small hack need 100 thumbs up. 1 sec change and everything works. Awesome

[Swindler]

Definitely the best answer.

[Zhen Liu]

Best answer ever.

[Antony Ouseph]

Swift Code UIView.animate(withDuration: 2.0, delay: 0, options:[UIViewAnimationOptions.repeat, UIViewAnimationOptions.allowUserInteraction], animations: { button.transform = CGAffineTransform(scaleX: 1.5, y: 1.5) }, completion:nil);

[Albert Renshaw]

Also worth looking into, though I haven't tested, you might be able to animate the view.layer.opacity to 0.0 and still keep touches available, if you do need to fade ALL the way out for some reason.

[Mike Keskinov]

OMG!!? Why?? Why when I have delayed animation which have alpha=0 the interaction DOESN'T WORK even before animation started?! Even if I set UIViewAnimationOptionAllowUserInteraction option... which idiot comes to this so called "solution"

[DevAndArtist]

Can you elaborate why the order supposed to be important? It's an OptionSet type which implies a bitmask, the order in which you provide each flag should not patter at all. I also don't see the justification of the up-votes, because there is no source provided that confirms your claim.

[Elvis]

@DevAndArtist you can try it yourself, then you will know why I said that the order matters. Let me know if you have different result, or be nice, no one is paid for answering questions.