2 animations on same object, only last shows. How to show first one w/o nesting completion block?

Question

I'm doing two animations on the same UIImageView, using blocks. Animations are not quite back to back, but almost; there is some logic inbetween.

animate UIImageView from one location on the view to another.
execute logic that determines whether image is allowed to stay there
if not allowed, undo the animation (UIImageView springs back to original location)

If I implement this as above, only the second animation shows (this is normal behavior from what I understand). If I nest the logic and the second animation block inside the completion block of the first, I see both animations, but there's a fair amount of code to jam into that completion block and it just seems ugly and out of place.

In the non-nested configuration, why does iOS want to cut short the previous animations and execute only the final one, and how can I force it to wait on the first one before going to the next? I don't think it needs to block the main thread or "sit and spin" in a completion block; I just want all animations to be shown. Tried adding delay to second animation to no avail.

Is this a job for CAKeyframeAnimation?

// first animation

[UIView animateWithDuration:0.5
                      delay:0.0
                    options: UIViewAnimationCurveLinear
                 animations:^{movingColor.center = newCenter;
                     movingColor.transform = scaleTransform;}
                 completion:^(BOOL finished){ NSLog(@"forward animation done");}];

if (/* ...color is allowed at that location */) {

    // do some stuff

} else {

    // undo the animation

    [UIView animateWithDuration:0.5
                          delay:0.0
                        options: UIViewAnimationCurveLinear
                     animations:^{movingColor.center = origCenter;
                         movingColor.transform = scaleTransform;}
                     completion:^(BOOL finished){ NSLog(@"back animation done");}];
}

Funny about "ugly and out of place". I often do this too: judge the code based on how it looks on the page. The block syntax (esp with nesting) is a bit clunky, but it's powerful and appropriate here. Fussing with the timings is imprecise (and not that readable... imagine coming in later and trying to figure out what's going on by reading those time constants). The completion block is exactly for things to be done on completion. Maybe a little ugly, but correct. See my answer for a way to get it done and be little prettier. — danh, Jun 17 '12 at 15:14

score 1 · Answer 1 · answered Jun 17 '12 at 14:35

The correct way to do it is as you said to set the second one in the completition of the first one that is the correct way,

You can also adda delay on the start of the other, this may or may not work it depends on alot of variables

Your second animation will have a delay of .5 (time for first animation to complete )

[UIView animateWithDuration:0.5
                      delay:0.5
                    options: UIViewAnimationCurveLinear
                 animations:^{movingColor.center = origCenter;
                     movingColor.transform = scaleTransform;}
                 completion:^(BOOL finished){ NSLog(@"back animation done");}];

score 1 · Answer 2 · answered Jun 17 '12 at 14:44

The animateWithDuration is executed asynchronously, and returns right away. That is, the next line of code is executed without waiting for the animation to finish. You either put your code in the completion block if you want it to be executed after the animation is finished, or you accept that the second animation is started (thus canceling the first) immediately.

If you want to indicate to the user that something was wrong by starting the animation, but not completing it, you could execute the second animation with a delay. Remember to also set the the UIViewAnimationOptionBeginFromCurrentState option if you delay the second animation with less than the duration of the first:

[UIView animateWithDuration:0.5 
                      delay:0.25 //or some number
                    options: (UIViewAnimationCurveLinear | UIViewAnimationOptionBeginFromCurrentState)
                 animations:^{movingColor.center = origCenter;
                     movingColor.transform = scaleTransform;}
                 completion:^(BOOL finished){ NSLog(@"back animation done");}];

danh · Accepted Answer · 2012-06-17T14:54:02.547

The second animation should be done conditionally inside the first's completion block. Putting it into a function will make it more readable.

- (void)moveColor:(UIView *)view to:(CGPoint)center delay:(NSTimeInterval)delay completion:(void (^)(BOOL finished))complete {

    [UIView animateWithDuration:0.5 delay:delay options:UIViewAnimationCurveLinear animations:^{
        view.center = center;
        view.transform = scaleTransform;  // probably don't need this
    } completion:completion];
}

This way your logic can be separate from the animation code

- (void)someMethod {

    [self moveColor:movingColor to:newCenter delay:0.0 completion:^(BOOL finished) {
        if (/*it can stay*/) {
            // stuff
        } else {
            [self moveColor:movingColor to:origCenter delay:2.0 completion:^(BOOL finished) {}];
        }
    }];
}

2 animations on same object, only last shows. How to show first one w/o nesting completion block?

3 Answers3