Tapping a UIImage while it's being animated

Question

I've been trying to be able to tap a UIImage as it animates to the top of my screen and print("Image Tapped"), yet to no success.

override func viewDidLoad() {
    super.viewDidLoad()

    redBalloon.image = UIImage(named: "redBalloon")
    redBalloon.contentMode = .scaleAspectFit
    redBalloon.frame = CGRect(x: Int(xOrigin), y: 667, width: Int(redBalloon.frame.size.width), height: Int(redBalloon.frame.size.height))

    UIView.animate(withDuration: 5, delay: 0, options: UIImageView.AnimationOptions.allowUserInteraction, animations: {
        self.redBalloon.frame = CGRect(x: Int(self.xEnding), y: -192, width: 166, height: 192)
    }, completion: {(finished:Bool) in
        self.endGame()
    })

    let imageTap = UITapGestureRecognizer(target: self, action: #selector(imageTapped))
    redBalloon.isUserInteractionEnabled = true
    redBalloon.addGestureRecognizer(imageTap)
}

@objc func imageTapped(_ sender: UITapGestureRecognizer) {
    // do something when image tapped
    print("image tapped")
}

Answer 1

The problem is that the image view is not in the spot where you see it during animation (it's at the endpoint of the animation). So you are not tapping on the image view at the point where it is, and thus the tap is not detected.

Therefore, either you must hit-test the presentation layer or, if you don't want to do that, you must use a UIViewPropertyAnimator instead of calling UIView.animate.

As an example of the first approach, I'll subclass UIImageView. Make your UIImageView an instance of this subclass:

class TouchableImageView : UIImageView {
    override func hitTest(_ point: CGPoint, with e: UIEvent?) -> UIView? {
        let pres = self.layer.presentation()!
        let suppt = self.convert(point, to: self.superview!)
        let prespt = self.superview!.layer.convert(suppt, to: pres)
        return super.hitTest(prespt, with: e)
    }
}

However, personally I think it's a lot simpler to use UIViewPropertyAnimator. In that case, do not make your UIImageView a TouchableImageView! You don't want to do extra hit-test munging. Just let the property animator do all the work:

    redBalloon.image = UIImage(named: "redBalloon")
    redBalloon.contentMode = .scaleAspectFit
    redBalloon.frame = CGRect(x: Int(xOrigin), y: 667, width: Int(redBalloon.frame.size.width), height: Int(redBalloon.frame.size.height))

    let anim = UIViewPropertyAnimator(duration: 5, timingParameters: UICubicTimingParameters(animationCurve: .easeInOut))
    anim.addAnimations {
        self.redBalloon.frame = CGRect(x: Int(xEnding), y: -192, width: 166, height: 192)
    }
    anim.addCompletion { _ in
        self.endGame()
    }

    let imageTap = UITapGestureRecognizer(target: self, action: #selector(imageTapped))
    redBalloon.isUserInteractionEnabled = true
    redBalloon.addGestureRecognizer(imageTap)
    anim.startAnimation()