CODEWITHSUNDEEP
iosobjective-c-blocksuiviewanimation
spring
spring

Reputation: 18507

Correct way to stack UIView animations and blocks?

I've only worked a bit with UIView animations and blocks, basically one step animations. I'd like to stack a few steps into a sequence. The code below seems to be working but I'm wondering if this is the right approach and/or if there are any issues/limitations with placing blocks within blocks.

Blocks seem great though the code formatting gets sort of unwieldy/unreadable.

CGRect newFrame = CGRectMake(0, 0, 500, 500);
UIView *flashView = [[UIView alloc] initWithFrame:newFrame];

flashView.tag = 999;
[flashView setBackgroundColor:[UIColor grayColor]];
[flashView setAlpha:0.f];
[self.view addSubview:flashView];

[UIView animateWithDuration:.2f
                 animations:^{
                     // STEP 1: FADE IN
                     [flashView setAlpha:1.f];
                 }
                 completion:^(BOOL finished){
                     [UIView animateWithDuration:.9f
                                      animations:^{
                                          // STEP 2: FADE OUT
                                          [flashView setAlpha:0.f];
                                      }
                                      completion:^(BOOL finished){
                                          // STEP 3: CLEAN UP
                                          [flashView removeFromSuperview];
                                      }
                      ];
                 }];

Upvotes: 3

Views: 564

Answers (2)

Christopher Pickslay
Christopher Pickslay

Reputation: 17772

What you're doing is correct. Sometimes the nesting can get ugly. One alternative for readability is to put each animation in its own method:

-(IBAction)someButtonPressed:(id)sender {
    [self saveSomeData];
    [self fadeInAndOut];
}

-(void)fadeInAndOut {
    [UIView animateWithDuration:.2f
                     animations:^{
                         // STEP 1: FADE IN
                         [self.flashView setAlpha:1.f];
                     }
                     completion:[self fadeOut]
     ];
}

-(void (^)(BOOL))fadeOut {
    return ^(BOOL finished) {
        [UIView animateWithDuration:.9f
                         animations:^{
                             // STEP 2: FADE OUT
                             [self.flashView setAlpha:0.f];
                         }
                         completion:[self cleanUpFlashView]
         ];
    };
}

-(void (^)(BOOL))cleanUpFlashView {
    return ^(BOOL finished){
        // STEP 3: CLEAN UP
        [self.flashView removeFromSuperview];
    };
}

Upvotes: 1

Rich Schonthal
Rich Schonthal

Reputation: 452

That way isn't horrible if you're just nesting once with simple code. If you're going to do something more complex you might try animateWithDuration:delay:options:animations:completion: using delay: as a way to link the animations. For example:

[UIView animateWithDuration:.2f delay:0
                    options:UIViewAnimationOptionCurveEaseIn|UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     // STEP 1: FADE IN
                     [flashView setAlpha:1.f];
                 }
                 completion:nil
 ];
[UIView animateWithDuration:.9f delay:.2f
                    options:UIViewAnimationOptionCurveEaseIn|UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     // STEP 2: FADE OUT
                     [flashView setAlpha:0.f];
                 }
                 completion:^(BOOL finished){
                     // STEP 3: CLEAN UP
                     [flashView removeFromSuperview];
                 }
 ];

Upvotes: 1

Related Questions