ios - 仅水平动画 CAGradientLayer

我正在尝试为 CAGradientLayer(渐变和框架)设置动画，当我将框架设置为 0 时，它会缩小到 View 的左上角，我希望它只是动画出来水平。现在它的动画水平和垂直都为 0。

这是动画当前的样子:

我想要的是当它变为零时，仅水平收缩，并始终保持相同的高度。

这是我目前使用的代码:

- (void)drawRectCGRect)rect
{
// Drawing code
if (!gradientLayer) {
    gradientLayer = [CAGradientLayer layer];
    [gradientLayer setFrame:[self createRectForFrame:rect]];
    [gradientLayer setColors[(id)fromColor.CGColor, (id)toColor.CGColor]];
    [gradientLayer setStartPoint:CGPointMake(fillPct/100, 0.5)];
    [gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
    [self.layer addSublayer:gradientLayer];
}
else {
    [gradientLayer removeAllAnimations];

    [CATransaction begin];

    [CATransaction setAnimationDuration:ANIMATION_DURATION];
    CGRect newFrame = [self createRectForFrame:rect];
    CABasicAnimation *frameAnimation = [CABasicAnimation animationWithKeyPath"frame"];
    [frameAnimation setDuration:ANIMATION_DURATION];
    [frameAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [frameAnimation setFromValue:[NSValue valueWithCGRect:gradientLayer.bounds]];
    [frameAnimation setToValue:[NSValue valueWithCGRect:newFrame]];
    [frameAnimation setFillMode:kCAFillModeForwards];
    [frameAnimation setRemovedOnCompletion:NO];
    [gradientLayer setFrame:newFrame];
    [gradientLayer addAnimation:frameAnimation forKey"frame"];

    CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.99), 0.5);
    CABasicAnimation *startPointAnimation = [CABasicAnimation animationWithKeyPath"startPoint"];
    [startPointAnimation setDuration:ANIMATION_DURATION];
    [startPointAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [startPointAnimation setFromValue:[NSValue valueWithCGPoint:gradientLayer.startPoint]];
    [startPointAnimation setToValue:[NSValue valueWithCGPoint:startPoint]];
    [startPointAnimation setFillMode:kCAFillModeForwards];
    [startPointAnimation setRemovedOnCompletion:NO];
    [gradientLayer setStartPoint:startPoint];
    [gradientLayer addAnimation:startPointAnimation forKey"startPoint"];

    [CATransaction setCompletionBlock:^{
        [self updateInnerLabelTextColor];
    }];

    [CATransaction commit];
}
[self bringInnerLabelToFront];
}

- (CGRect)createRectForFrameCGRect)frame {
if (fillPct == 0)
    return CGRectZero;
else if (fillPct >= 100)
    return frame;
else
    return CGRectMake(frame.origin.x, frame.origin.y, frame.size.width * (fillPct / 100), frame.size.height);
}

fillPct 是条形应填充的值，介于 0 和 100 之间。

---

Best Answer-推荐答案

问题出在这一行:

CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.99), 0.5);

如果你把它改成:

CGPoint startPoint = CGPointMake(0.0, 0.5);

它可以随心所欲地工作 - 不会在角落收缩。

或者，如果您希望保留当前代码，也可以更改此值:

CGPoint startPoint = CGPointMake(MIN(fillPct/100, 0.0), 0.5);

刚刚测试过；它水平动画。希望这会有所帮助。

更新 1:

我真的没有遇到你在评论中提到的问题；但是，我决定再看一遍。由于您没有为 rect 以及您一遍又一遍地调用它的方式提供任何任意值，因此我想出了自己的值并再次对其进行了测试。

我用这个值设置了 gradientLayer:

[gradientLayer setFrameCGRect){{150.0f, 240.0f}, 150.0f, 20.0f}];

在第一个CABasicAnimation中，出于测试目的，我改变了这个:

[frameAnimation setToValue:[NSValue valueWithCGRectCGRect){{150.0f, 240.0f}, 0.0f, 20.0f}]];

如您所见，它与图层的矩形完全相同，只是宽度为 0.0f。想象一下，这会导致宽度为 0。

上述方法有效吗？是的。

上面的工作是否如您所愿？没有。

原因是这会导致框架均匀收缩 - 这不是您想要的。

所以，在你创建 gradientLayer 时添加这个:

gradientLayer.anchorPoint = (CGPoint){0.0f, 0.5f};

我再次对其进行了测试，在撰写本文时它正在我面前运行。顺便看看很有趣。

希望这再次对您有所帮助。

关于ios - 仅水平动画 CAGradientLayer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23281961/