Create UIView Animation that will loop after the completion method is run

Question

I'm having a bit of trouble. I've set my UIView Animation to repeat itself infinitely, however it does this before the animation starts it's completion function. I want it to wait until after the completion function fully runs because I want to run multiple animations. Any idea how to do this? If not is there a different way I can accomplish the same thing?

I'll post my code below:

-(void) createBlueControlAnimation:(int)messageCount{
    if(messageCount == 0) {
        return;
    }
    [blueControl setContentOffset:CGPointMake(0, 0)];
    [UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionRepeat
        animations:^{
            [blueControl setContentOffset:CGPointMake(screenWidth, 0)];
        } completion:^(BOOL finished){
            if(messageCount >= 2){
                [UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
                    animations:^{
                        [blueControl setContentOffset:CGPointMake(screenWidth * 2, 0)];
                    } completion:^(BOOL finished){
                        if(messageCount == 3) {
                            [UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
                                animations:^{
                                    [blueControl setContentOffset:CGPointMake(screenWidth * 3, 0)];
                                }completion:^(BOOL finished){
                                    [self scrollAnimationToStart];
                                }];
                        }else{
                            [self scrollAnimationToStart];
                        }
                    }];
            }else{
                [self scrollAnimationToStart];
            }
        }];
}

-(void) scrollAnimationToStart {
    [UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
        animations:^{
            [blueControl setContentOffset:CGPointMake(0, 0)];
        } completion:^(BOOL finished){}];
}

So based on the number of messages I want the animation to continue running, and then when it gets to the last message, loop back to the first message and then restart the animation. However right now it just loops infinitely between the first and the second message. Any ideas on how to fix this would be greatly appreciated, thanks.

Nat Nat · Accepted Answer · 2015-08-03T14:38:59

Firstly: You should create separate consts for anything that is in code.

extern NSTimeInterval const animationDuration;
NSTimeInterval const animationDuration = 0.5;

extern NSTimeInterval const animationDelay;
NSTimeInterval const animationDelay = 2;

Secondly: intent your code in reasonable way, it's quite hard to read what you've pasted. Use one method and push every repeatable part of code into another method.

- (void)createBlueControlAnimation:(NSUInteger)messageCount {
    if (messageCount == 0) {
        return;
    }
    __weak typeof(self) weakSelf = self;
    [self offsetBlueControl:0];
    [UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
        [weakSelf offsetBlueControl:screenWidth];
    } completion:^(BOOL finished) {
        if (messageCount < 2) {
            [self scrollAnimationToStart];
        } else {
            [UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
                [weakSelf offsetBlueControl:screenWidth * 2];
            } completion:^(BOOL finished) {
                if (messageCount != 3) {
                    [self scrollAnimationToStart];
                } else {
                    [UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
                        [weakSelf offsetBlueControl:screenWidth * 3];
                    } completion:^(BOOL finished) {
                        [self scrollAnimationToStart];
                    }];
                }
            }];
        }
    }];
}

- (void)scrollAnimationToStart {
    [UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
        [blueControl setContentOffset:CGPointMake(0, 0)];
    } completion:^(BOOL finished) {}];
}

- (void)offsetBlueControl:(CGFloat)xOffset {
    [blueControl setContentOffset:CGPointMake(xOffset, 0)];
}

I should mention here that this animation block is in fact similar everywhere. I'd set it as a separate method also.

Thirdly, keep same way of spacing everywhere (eg check out https://github.com/NYTimes/objective-c-style-guide).

That's all about code, the quality, readibility etc. I'd set it as comment, but there's too much code in my response, so it has to be an answer.

I don't fully understand what do you want to do. As far as I understood:

You have a UI element, called BlueControl.
You want to move this element.
Basing on some counter you want to move your view by some width (btw I advise to switch to NSIntegers from ints and use unsigned option, so NSUInteger etc). The move steps: 3.1. Move button right during 0.5s 3.2. Wait 2 seconds if counter is large enough, otherwise end step 3 3.3. Increase counter, repeat step 3.
You want to repeat the process infinitely.

Is that right? I need to understand the problem to edit this answer and paste a full response here.

Create UIView Animation that will loop after the completion method is run

1 Answers