Strange behavior animating a UIView using [UIView animateKeyframesWithDuration]

Question

I'm trying to create an effect where three arrows go from visible to invisible alternatively.

I made a simple algorithm where every arrow would start from a different alpha value (if there is 3 arrows, the first one would start at alpha=1, the second one at alpha=0.6667, the third one at alpha=0.3337). I then start a key frame animation that:

Change the arrow opacity from its current alpha to 0 (the duration is computed)
Set instantly the arrow opacity to 1
Change the arrow opacity from 1 to the first value set

However it seems that some step are skipped for some reason.

A simple example:

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewKeyframeAnimationOptionRepeat animations:^{

    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0 animations:^{
        _animatedView.alpha = 0.5;
    }];

    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
        _animatedView.alpha = 0;
    }];

    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0 animations:^{
        _animatedView.alpha = 1;
    }];

    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        _animatedView.alpha = 0.5;
    }];

} completion:nil];

In that case it should go to 0.5 instantly, 0.5 to 0 in 1 second, go to 1 instantly, 1 to 0.5 in 1 second. It should therefore do a seamless transition that looks like the view is appearing and disappearing but it looks like the animation gets stuck on alpha=0.5 for a few time.

Theoretically, the effect should be the same as if using this key frame animation:

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0 animations:^{
        _animatedView.alpha = 1;
    }];
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
        _animatedView.alpha = 0;
    }];
} completion:nil];

What you are trying to do is similar to using animation groups with relative animation start and duration offset. I tried to do the same once before. trying to animate a seamless transition between 4 different paths within a shape layer. My experience is that they do not work properly for some reason (I tried a lot). So then I wrote my own completion block logic for the layers and within that I triggered one animation after the completion of other. The code looked a bit stupid, but the animation worked like a charm:). So maybe you can try along the same lines. — devluv

Artem Stepanenko Artem Stepanenko · Accepted Answer · 2014-09-04T17:21:01

In case you want to animate N views in the same way:

CGFloat count = [self.animatedViews count];
CGFloat period = 1.0f / count;

__weak NSArray *weakViews = self.animatedViews;

[UIView animateKeyframesWithDuration:2.0f delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewKeyframeAnimationOptionRepeat animations:^{

    for (NSUInteger index = 0; index < count; ++index) {
        UIView *animatedView = weakViews[index];

        CGFloat startDelay = period * index;

        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0 animations:^{
            animatedView.alpha = startDelay;
        }];

        [UIView addKeyframeWithRelativeStartTime:0.0f relativeDuration:startDelay animations:^{
            animatedView.alpha = 0.0f;
        }];

        [UIView addKeyframeWithRelativeStartTime:startDelay relativeDuration:0.0f animations:^{
            animatedView.alpha = 1.0f;
        }];

        [UIView addKeyframeWithRelativeStartTime:startDelay relativeDuration:(1.0f - startDelay) animations:^{
            animatedView.alpha = startDelay;
        }];
    }
} completion:nil];

Strange behavior animating a UIView using [UIView animateKeyframesWithDuration]

1 Answers