使用[UIView animateKeyframesWithDuration]为UIView设置动画的奇怪行为

Question

我正在尝试创建一个效果，其中三个箭头从可见变为不可见。

我做了一个简单的算法，其中每个箭头都从不同的alpha值开始（如果有3个箭头，第一个将从alpha = 1开始，第二个在alpha = 0.6667，第三个在alpha = 0.3337）。 然后我开始一个关键帧动画：

• 将箭头不透明度从其当前alpha更改为0（计算持续时间）
• 立即将箭头不透明度设置为1
• 将箭头不透明度从1更改为第一个值集

然而，由于某种原因，似乎跳过了一些步骤。

一个简单的例子：

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

在这种情况下，它应该立即变为0.5，在1秒内变为0.5到0，立即变​​为1，在1秒内变为1到0.5。 因此，它应该进行无缝过渡，看起来视图正在出现并消失，但看起来动画会在alpha = 0.5上停留几次。

从理论上讲，效果应该与使用此关键帧动画相同：

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

Answer 1

如果您想以相同的方式为N个视图设置动画：

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