ios - 排队 CAAnimations 时出现故障

Question

我有一个 CAShapeLayer，我在其中设置了一个圆圈的动画。动画是先顺时针“撤消”圆圈，然后顺时针重画圆圈。有点像“旋转圈”。另一种说法是:将路径描边终点移动到起点，然后将起点移到终点。

动画本身可以工作，但时不时会产生故障。当它应该“未画”时，它表现为对整个圆的短暂一瞥。

为什么会发生这种情况，如何解决？

谢谢，

// Shape creation
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, self.width - 2 * OUTER_BORDER_WIDTH, self.width - 2* OUTER_BORDER_WIDTH)].CGPath;

// Animation queuing
-(void) applyNextAnimation
{

    CABasicAnimation* animation;

    if (self.animatingOpening)
    {
        animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat:1.0f];
        self.animatingOpening = NO;
    }
    else
    {
    animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat:1.0f];
        self.animatingOpening = YES;
    }

    animation.duration = 1.0f;
    animation.autoreverses = NO;
    animation.delegate = self;
    animation.removedOnCompletion = YES;
    [self.outerCircleLayer addAnimation:animation forKey:@"stroke"];
}

// Animation stop callback
-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (self.isAnimating)
    {
        [self applyNextAnimation];
    }
}

Answer 1

它闪烁是因为您没有在图层上设置相应的属性。因此，当动画完成时，层的模型仍处于动画前的状态，这就是您在两个动画之间瞬间看到的状态。

这会让你走向你想要的......

if (self.animatingOpening)
{

    self.outerCircleLayer.strokeStart = 0.0;

    animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = [NSNumber numberWithFloat:0.0f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    self.animatingOpening = NO;
}
else
{
    self.outerCircleLayer.strokeStart = 1.0;

    animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animation.fromValue = [NSNumber numberWithFloat:0.0f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    self.animatingOpening = YES;
}

animation.duration = 1.0f;
animation.autoreverses = NO;

这几乎可以工作，但是当您从未绘制状态过渡到开始动画绘制状态时，您会注意到一个更微妙的故障。圆圈开始时有一个小的反向动画。这是通过将 strokeStart 从 1.0 设置为 0.0 触发的隐式动画:您需要摆脱它，以便所有动画效果都在您的控制之下。您可以通过在 CATransaction 上将 disableActions 设置为 YES 来最简单地实现这一点:

[CATransaction setDisableActions:YES];

(将其添加到 if (self.animatingOpening) 上方)