Smoothest Way To Implement Back to Back UIAnimations

Question

I need to have my character jump (increase the origin.y by 50 and reverse) in a game I am creating.

So far I have come across two ways of doing this:

Method 1:

[UIView animateWithDuration:1.0
                      delay:0.0
                    options:UIViewAnimationOptionAutoreverse
                 animations:^{
                     CGRect frame = self.kevinImageView.frame;
                     frame.origin.y -= 50;
                     self.kevinImageView.frame = frame;
                 } completion:^(BOOL finished){
                     CGRect frame = self.kevinImageView.frame;
                     frame.origin.y = 135;
                     self.kevinImageView.frame = frame;
                 }];

Issues: At the end of every complete jump animation (up and down) the ImageView jumps up and then back down (due probably to the tiny amount it takes for the completion block to be called). This is noticeable and I would much rather do without it.

Method 2:

[UIView animateWithDuration:1.0
                 animations:^{
                     CGRect frame = self.kevinImageView.frame;
                     frame.origin.y -= 50;
                     self.kevinImageView.frame = frame;
                 } completion:^(BOOL finished){
                     [UIView animateWithDuration:1.0
                                      animations:^{
                                          CGRect frame = self.kevinImageView.frame;
                                          frame.origin.y += 50;
                                          self.kevinImageView.frame = frame;
                                      }];
                 }];

Issues: If I tap the view (I use a UITapGuestureRecognizer) and the ImageView is in the completion animation (going back down), the Image View will snap back to the bottom instead of finishing its animation. Again not a major issue, but something which I should be able to avoid.

Is there any method I have not come across which will resolve both of these issues, or a way to fix one of the methods?

Answer 1

I'm very interested in this question so I do a simple demo to do a back to back animation.

I think maybe you can just use UIViewAnimationOptionAutoreverse and UIViewAnimationRepeat option to achieve a autoreverse animation.

[UIView animateWithDuration:1.0
             delay:0
             options:UIViewAnimationOptionAutoreverse|UIViewAnimationRepeat
             animations:^{
                 [UIView setAnimationRepeatCount:1];
                 self.kevinImageView.center = CGPointMake(self.kevinImageView.center.x ,self.kevinImageView.center.y - 25);
             } completion:^(BOOL finished){
                 self.kevinImageView.center = CGPointMake(self.kevinImageView.center.x ,self.kevinImageView.center.y + 25);
             }];

and you can also set UIViewAnimationOptionAllowUserInteraction if you want to enable use interaction during the animation.

Answer 2

Can you disable your UITapGuestureRecognizer when the animation is still running? And then enable it when the animation finishes.

if (!self.isAnimationRunning) {
        self.isAnimationRunning = YES;
        [UIView animateWithDuration:1.0
             animations:^{
                 CGRect frame = self.kevinImageView.frame;
                 frame.origin.y -= 50;
                 self.kevinImageView.frame = frame;
             } completion:^(BOOL finished){
                 [UIView animateWithDuration:1.0
                                  animations:^{
                                      CGRect frame = self.kevinImageView.frame;
                                      frame.origin.y += 50;
                                      self.kevinImageView.frame = frame;
                                  } completion:^(BOOL finished){
                         self.isAnimationRunning = NO;   
                   }];
             }];
}