CABasicAnimation 从当前位置反转（如进度条动画）

Question

我在我的应用程序中使用一个圆圈 (UIBezierPath) 作为迷你进度条。我遇到的一个问题是我只能在一个方向上为圆圈设置一次动画。假设我把圆画到 80%，我想把它缩小到 60%，整个圆都重新画了，这不是我想要的。

使用进度条时，如果您减少当前显示的百分比，则不会重绘整个进度条，进度条只是从当前位置缩小到新的百分比大小，这就是我想要的圆圈层.

这是我的圈子初始设置代码：

CAShapeLayer *greenPlayButtonCircle;

greenPlayButtonCircle = [CAShapeLayer layer];
[greenPlayButtonCircle setPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(boxView.bounds.origin.x, boxView.bounds.origin.y) radius:(boxView.frame.size.width / 2) startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(270) clockwise:YES].CGPath];
[greenPlayButtonCircle setFillColor:[UIColor clearColor].CGColor];
[greenPlayButtonCircle setStrokeColor:[UIColor greenColor].CGColor];
[greenPlayButtonCircle setLineWidth:6.0];
[greenPlayButtonCircle setPosition:boxView.center];
[greenPlayButtonCircle setAnchorPoint:CGPointMake(0.5, 0.5)];
    
[self.view.layer addSublayer:greenPlayButtonCircle];

这是我用来尝试减少圆百分比（绘制部分）的代码：

[greenPlayButtonCircle setPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(boxView.bounds.origin.x, boxView.bounds.origin.y) radius:(boxView.frame.size.width / 2) startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(270) clockwise:YES].CGPath];
    
// Setup the circle animation.
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
[animation setDuration:0.5];
[animation setRemovedOnCompletion:YES];
[animation setFromValue:@(0)];
[animation setToValue:@(1)];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[animation setFillMode:kCAFillModeBoth];
    
// Begin the circle animation.
[greenPlayButtonCircle addAnimation:animation forKey:@"drawCircleAnimation"];

这是圆圈最初的样子（设置为 100% - 这正是我想要的）：

现在我想减小圆的百分比或大小，这就是我想要它的动画效果：

这是实际发生的事情（整个圆圈都被重绘了，这不是我想要的）：

有什么方法可以实现反转动画吗？

Answer 1

您可以使用 fromValue 和 toValue 属性来控制它，例如将圆形路径从 100% 减少到 80%：

[animation setFromValue:@(1)];
[animation setToValue:@(0.8)];

CABasicAnimation 从当前位置反转（如进度条动画）

CABasicAnimation reverse from current position (like progress bar animation)

ios

objective-c

uibezierpath

cashapelayer

cabasicanimation