Make UIImageView animate after another UIImageView has finished

Question

I am trying to animate the dealing of cards. Currently I have two cards, the dealer card (dCard1) and the player card (pCard1).

The player card should be dealt and as soon as it is dealt, the dealer card should then be dealt.

What is currently happening is the player card will animate properly when I press the deal button, but instead of waiting till the player card is done animating, the dealer card just appears at the dealerTo location. It does not animate. I am new to doing animations any help would be greatly appreciated.

-(void) animateHandsDealt: (Hand*) pHand:(Hand*) dHand{
pCard1= [[UIImageView alloc] initWithFrame:CGRectMake(125, 0, 75, 110)];
dCard1= [[UIImageView alloc] initWithFrame:CGRectMake(125, 0, 75, 110)];

CGFloat start = 0;
CGFloat duration = 1;

CGPoint playerTo = CGPointMake(120, 300);
CGPoint dealerTo = CGPointMake(120, 70);

pCard1.image = [UIImage imageNamed:[[pHand.cardArr objectAtIndex:0 ] imagePath]];
[self.view addSubview: pCard1];
[playerImages addObject:pCard1];

CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"position" ];
move.fillMode = kCAFillModeBoth;
move.beginTime = start;
[move setToValue:[NSValue valueWithCGPoint:playerTo]];
[move setDuration:duration];
move.removedOnCompletion = FALSE;
[[pCard1 layer] addAnimation:move forKey:@"position"];


dCard1.image = [UIImage imageNamed:@"back-red-75-1.png"];
[self.view addSubview: dCard1];
CABasicAnimation *move2 = [CABasicAnimation animationWithKeyPath:@"position" ];
[move2 setToValue:[NSValue valueWithCGPoint:dealerTo]];
move2.beginTime = start + duration;
[move2 setDuration:duration];
move2.fillMode = kCAFillModeBoth;
move2.removedOnCompletion = FALSE;
[[dCard1 layer] addAnimation:move2 forKey:@"position"];

}

score 1 · Answer 1 · answered May 02 '12 at 18:27

If you're just animating the frame of the view, you can use the much simpler UIView animateWithDuration... methods.

You chain them by using the animateWithDuration:animations:completion: version. You can specify the second animation in the completion: block of the first animation.

http://developer.apple.com/library/ios/#documentation/uikit/reference/uiview_class/UIView/UIView.html#//apple_ref/doc/uid/TP40006816-CH3-SW109

score 0 · Accepted Answer · answered May 02 '12 at 19:23

I don't have access to your classes (of course), but I think this is pretty close to "drop-in-ready" code. What do you think?

- (void)deal {
    // Of course, you'd replace these NSString objects with actual card objects...
    NSArray *array = [NSArray arrayWithObjects:@"pCard1", @"dCard1", @"pCard2", @"dCard2", @"pCard3", @"dCard3", nil];
    [self performSelectorOnMainThread:@selector(animateDealWithArray:) withObject:array waitUntilDone:YES];
}
- (void)animateDealWithArray:(NSArray *)array {
    // constants that won't change call to call
    static CGFloat duration = 1;
    static CGSize  cardSize = {75,  110};
    static CGPoint playerTo = {120, 300};
    static CGPoint dealerTo = {120, 70};

    // Seems like you want the card to start at the top of the "deck" whether it's a player card or not
    UIImageView *card = [[UIImageView alloc] initWithFrame:CGRectMake(125, 0, 75, 110)];
    // Figure out if the first object (the one we're currently using) is a player or dealer card
    if ([[array objectAtIndex:0] isKindOfClass:[PlayerCard Class]]) {
        // Player card, so show the "face"
        [card setImage:[UIImage imageNamed:[(PlayerCard *)[array objectAtIndex:0] imagePath]]];
        [UIView animateWithDuration:duration
                         animations:^{
                             [card setFrame:CGRectMake(playerTo.x, playerTo.y, cardSize.width, cardSize.height)];
                         }
                         completion:^(BOOL finished) {
                             [self dealNext:array];
                         }
         ];
    } else {
        // Dealer card, so show the back
        [card setImage:[UIImage imageNamed:@"back-red-75-1.png"]];
        [UIView animateWithDuration:duration
                         animations:^{
                             [card setFrame:CGRectMake(dealerTo.x, dealerTo.y, cardSize.width, cardSize.height)];
                         }
                         completion:^(BOOL finished) {
                             [self dealNext:array];
                         }
         ];
    }
}
- (void)dealNext:(NSArray *)array {
    int count = [array count];
    if (count > 1) {
        NSArray *newArray = [array subarrayWithRange:NSMakeRange(1, count - 1)];
        [self animateDealWithArray:newArray];
    }
}

I can't get the images to show up, this definitely looks like a better way of going about it than I was previously attempting. Any clue why the images won't show? — , May 03 '12 at 17:22
You might want to split out some of the lines of code so you can step through in debug mode and make sure you've got valid values. — mbm29414, May 03 '12 at 17:49
I was just never adding the UIImageView as a subview. I modified your code some more just to fit my needs, but everything appears to work fine. Thanks — , May 03 '12 at 23:52

Make UIImageView animate after another UIImageView has finished

2 Answers2