How do I detect a touch event on a moving UIImageView?

Question

When researching "How do I detect a touch event on a moving UIImageView?" I've come across several answers and I tried to implement them to my app. Nothing I've come across seems to work. I'll explain what I'm trying to do then post my code. Any thoughts, suggestions, comments or answers are appreciated!

My app has several cards floating across the screen from left to right. These cards are various colors and the object of the game is the drag the cards down to their similarly colored corresponding container. If the user doesn't touch and drag the cards fast enough, the cards will simply drift off the screen and points will be lost. The more cards contained in the correct containers, the better the score.

I've written code using core animation to have my cards float from the left to right. This works. However when attempting to touch a card and drag it toward it's container, it isn't correctly detecting that I'm touching the UIImageView of the card.

To test if my I'm properly implementing the code to move a card, I've also written some code allows movement for a non-moving card. In this case my touch is being detected and acting accordingly.

Why can I only interact with stationary cards? After researching this quite a bit it seems that the code:

 options:UIViewAnimationOptionAllowUserInteraction

is the key ingredient to get my moving UIImages to be detected. However I tried this doesn't seem to have any effect.

I another key thing that I may be doing wrong is not properly utilizing the correct presentation layer. I've added code like this to my project and I also only works on non-moving objects:

UITouch *t = [touches anyObject];
UIView *myTouchedView = [t view];
CGPoint thePoint = [t locationInView:self.view];
if([_card.layer.presentationLayer hitTest:thePoint])
{
    NSLog(@"You touched a Card!");
}
else{
    NSLog(@"backgound touched");
}

After trying these types of things I'm getting stuck. Here is my code to understand this a bit more completely:

#import "RBViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface RBViewController ()
@property (nonatomic, strong) UIImageView *card;

@end

@implementation RBViewController

- (void)viewDidLoad
{
srand(time (NULL)); // will be used for random colors, drift speeds, and locations of cards
[super viewDidLoad];

[self setOutFirstCardSet]; // this sends out 4 floating cards across the screen

// the following creates a non-moving image that I can move.  
_card = [[UIImageView alloc] initWithFrame:CGRectMake(400,400,100,100)];
_card.image = [UIImage imageNamed:@"goodguyPINK.png"];
_card.userInteractionEnabled = YES;
[self.view addSubview:_card];

}

the following method sends out cards from a random location on the left side of the screen and uses core animation to drift the card across the screen. Notice the color of the card and the speed of the drift will be randomly generated as well.

-(void) setOutFirstCardSet 
{

for(int i=1; i < 5; i++) // sends out 4 shapes
{
    CGRect cardFramei;
    int startingLocation = rand()  % 325;

    CGRect cardOrigini = CGRectMake(-100,startingLocation + 37, 92, 87);

    cardFramei.size = CGSizeMake(92, 87);
    CGPoint origini;

    origini.y = startingLocation + 37;
    origini.x = 1200;
    cardFramei.origin = origini;

    _card.userInteractionEnabled = YES;
    _card = [[UIImageView alloc] initWithFrame:cardOrigini];

    int randomColor = rand() % 7;
    if(randomColor == 0)
    {
        _card.image = [UIImage imageNamed:@"goodguy.png"];
    }
    else if (randomColor == 1)
    {
        _card.image = [UIImage imageNamed:@"goodguyPINK.png"];
    }
    else if (randomColor == 2)
    {
        _card.image = [UIImage imageNamed:@"goodGuyPURPLE.png"];
    }
    else if (randomColor == 3)
    {
        _card.image = [UIImage imageNamed:@"goodGuyORANGE.png"];
    }
    else if (randomColor == 4)
    {
        _card.image = [UIImage imageNamed:@"goodGuyLightPINK.png"];
    }
    else if (randomColor == 5)
    {
        _card.image = [UIImage imageNamed:@"goodGuyBLUE.png"];
    }
    else if (randomColor == 6)
    {
        _card.image = [UIImage imageNamed:@"goodGuyGREEN.png"];
    }

    _card.userInteractionEnabled = YES;  // this is also written in my viewDidLoad method
    [[_card.layer presentationLayer] hitTest:origini]; // not really sure what this does
    [self.view addSubview:_card];

    int randomSpeed = rand() % 20;
    int randomDelay = rand() % 2;
    [UIView animateWithDuration:randomSpeed + 10
                          delay: randomDelay + 4
                        options:UIViewAnimationOptionAllowUserInteraction // here is the method that I thought would allow me to interact with the moving cards.  Not sure why I can't
                     animations: ^{
                         _card.frame = cardFramei;
                     }
                     completion:NULL];
    }
}

notice the following method is where I put CALayer and hit test information. I'm not sure if I'm doing this correctly.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 {

 UITouch *t = [touches anyObject];
 UIView *myTouchedView = [t view];
 CGPoint thePoint = [t locationInView:self.view];

 thePoint = [self.view.layer convertPoint:thePoint toLayer:self.view.layer.superlayer];
 CALayer *theLayer = [self.view.layer hitTest:thePoint];

 if([_card.layer.presentationLayer hitTest:thePoint])
 {
    NSLog(@"You touched a Shape!"); // This only logs when I touch a non-moving shape
 }
 else{
     NSLog(@"backgound touched"); // this logs when I touch the background or an moving shape.  
 }


if(myTouchedView == _card)
{
   NSLog(@"Touched a card");
    _boolHasCard = YES;
}
    else
    {
        NSLog(@"Didn't touch a card");
        _boolHasCard = NO;
    }


}

I want the following method to work on moving shapes. It only works on non-moving shapes. Many answers say to have the touch ask which class the card is from. As of now all my cards on of the same class (the viewController class). When trying to have the cards be their own class, I was having trouble having that view appear on my main background controller. Must I have various cards be from different classes for this to work, or can I have it work without needing to do so?

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  
{
UITouch *touch = [[event allTouches] anyObject];
if([touch view]==self.card)
{
    CGPoint location = [touch locationInView:self.view];
    self.card.center=location;
}
}

This next method resets the movement of a card if the user starts moving it and then lifts up on it.

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
 if(_boolHasCard == YES)
 {

 [UIView animateWithDuration:3
                      delay: 0
                    options:UIViewAnimationOptionAllowUserInteraction
                 animations: ^{
                     CGRect newCardOrigin = CGRectMake(1200,_card.center.y - 92/2, 92, 87);
                     _card.frame = newCardOrigin;
                 }
                 completion:NULL];
   }


}

@end

Answer 1

It looks to me that your problem is really with just an incomplete understanding of how to convert a point between coordinate spaces. This code works exactly as expected:

- (void)viewDidLoad
{
  [super viewDidLoad];

  CGPoint endPoint = CGPointMake([[self view] bounds].size.width, 
                                 [[self view] bounds].size.height);

  CABasicAnimation *animation = [CABasicAnimation 
                                        animationWithKeyPath:@"position"];
  animation.fromValue = [NSValue valueWithCGPoint:[[_imageView layer] position]];
  animation.toValue = [NSValue valueWithCGPoint:endPoint];
  animation.duration = 30.0f;

  [[_imageView layer] addAnimation:animation forKey:@"position"];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *t = [touches anyObject];
  CGPoint thePoint = [t locationInView:self.view];

  thePoint = [[_imageView layer] convertPoint:thePoint 
                                      toLayer:[[self view] layer]];

  if([[_imageView layer].presentationLayer hitTest:thePoint])
  {
    NSLog(@"You touched a Shape!");
  }
  else{
    NSLog(@"backgound touched");
  }

}

Notice the line in particular:

  thePoint = [[_imageView layer] convertPoint:thePoint 
                                      toLayer:[[self view] layer]];

When I tap on the layer image view while it's animating, I get "You touched a Shape!" in the console window and I get "background touched" when I tap around it. That's what you're wanting right?

Here's a sample project on Github

UPDATE

To help with your follow up question in the comments, I've written the touchesBegan code a little differently. Imagine that you've add all of your image views to an array (cleverly named imageViews) when you create them. You would alter your code to look something like this:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *t = [touches anyObject];
  CGPoint thePoint = [t locationInView:self.view];

  for (UIImageView *imageView in [self imageViews]) {
    thePoint = [[imageView layer] convertPoint:thePoint 
                                        toLayer:[[self view] layer]];

    if([[imageView layer].presentationLayer hitTest:thePoint]) {
      NSLog(@"Found it!!");
      break; // No need to keep iterating, we've found it
    } else{
      NSLog(@"Not this one!");
    }
  }
}

I'm not sure how expensive this is, so you may have to profile it, but it should do what you're expecting.

Answer 2

The short answer is, you can't.

Core Animation does not actually move the objects along the animation path. They move the presentation layer of the object's layer.

The moment the animation begins, the system thinks the object is at it's destination.

There is no way around this if you want to use Core Animation.

You have a couple of choices.

1. You can set up a CADisplayLink on your view controller and roll your own animation, where you move the center of your views by a small amount on each call to the display link. This might lead to poor performance and jerky animation if you're animating a lot of objects however.

2. You can add a gesture recognizer to the parent view that contains all your animations, and then use layer hit testing on the paren't view's presentation view to figure out which animating layer got tapped, then fetch that layer's delegate, which will be the view you are animating. I have a project on github that shows how to do this second technique. It only detects taps on a single moving view, but it will show you the basics: Core Animation demo project on github.

(up-votes always appreciated if you find this post helpful)