Question

Hello all and thanks for reading,

Im trying to make a simple wave animation using animation block:

[UIView animateWithDuration:0.6 delay:i*delay options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAutoreverse animations:^{
        tab.frame = CGRectMake(tab.frame.origin.x,
                               tab.frame.origin.y-WAVE_SIZE,
                               tab.frame.size.width,
                               tab.frame.size.height);
    } completion:^(BOOL finished) {

        tab.frame = CGRectMake(tab.frame.origin.x,
                               tab.frame.origin.y+WAVE_SIZE,
                               tab.frame.size.width,
                               tab.frame.size.height);
    }];

The problem is when the animation is over, a weird jump sneaks in while im trying to return the views to it’s previous state (because i’m using repeat effect) note the completion block.

If anyone encountered such problem please share,

Thanks again.

Answer 1

This is to do with when the completion block fires with respect to the layer updating from the view’s model values, which are set to the middle of the animation. The only way i’ve found of making this kind of thing work 100% of the time without dropping down an API to CAAnimation is by chaining the animation in two halves as opposed to using UIViewAnimationOptionAutoreverse like so:

[UIView animateWithDuration:0.3
                      delay:i*delay
                    options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationCurveEaseIn
                 animations:^{
                     tab.frame = CGRectMake(tab.frame.origin.x,
                                            tab.frame.origin.y-WAVE_SIZE,
                                            tab.frame.size.width,
                                            tab.frame.size.height);
                 }
                 completion:^(BOOL finished) {
                     [UIView animateWithDuration:0.3
                                           delay:0.0
                                         options: UIViewAnimationCurveEaseOut
                                      animations:^{
                                          tab.frame = CGRectMake(tab.frame.origin.x,
                                                                 tab.frame.origin.y+WAVE_SIZE,
                                                                 tab.frame.size.width,
                                                                 tab.frame.size.height);
                                      }
                                      completion:NULL];

                 }];

This ensures that, at the end of each animation, the view’s model values (i.e. its current position) are the same as the animation’s final frame. This means that you don’t get that jitter effect.

This makes UIViewAnimationOptionAutoreverse seem a bit pointless. Why would one use it if it can leave the model values of the view different to the final frame of the animation? Well when combined with UIViewAnimationOptionRepeat it makes a rather pleasing effect that goes back and forth until removed.