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