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?

>> In your Method 2 you miss the completion block. Did you add it? — Rashad, Jan 16 '14 at 04:12
In your second animation you missed completion block (In method 2). — Rashad, Jan 16 '14 at 04:16
The `completion` block is not required. I did not think I needed one until now (see answer). — carloabelli, Jan 16 '14 at 04:21

score 1 · Accepted Answer · edited Jan 16 '14 at 04:33

1

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;   
                   }];
             }];
}

edited Jan 16 '14 at 04:33

Nayan

3,014
2
17
33

answered Jan 16 '14 at 04:16

Ethan Fang

1,271
10
15

hmm... why is there a down voting with this answer? – Ethan Fang Jan 16 '14 at 04:19
I modified you idea slightly to work with option 2. I just disabled the `UITapGestureRecognizer` before any of the animations and reenabled it in the second `completion` block. – carloabelli Jan 16 '14 at 04:20
1

I also do not know why this answer was down voted. It would be helpful if that person explained their reasoning. – carloabelli Jan 16 '14 at 04:24

score 0 · Answer 2 · answered Jan 16 '14 at 04:45

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.

Smoothest Way To Implement Back to Back UIAnimations

2 Answers2