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