ios - 为圆形 UIBezierPath 设置动画

Question

我有一个项目，我根据设定的进度为 UIBezierPath 制作动画。 BezierPath 呈圆形，位于 UIView 中，现在使用 CADisplayLink 在 drawRect 中完成动画。简单地说，基于设定的进度 x 路径应该径向扩展(如果 x 比以前大)或收缩(如果 x 更小).

self.drawProgress = (self.displayLink.timestamp - self.startTime)/DURATION;

CGFloat startAngle = -(float)M_PI_2;
CGFloat stopAngle = ((self.x * 2*(float)M_PI) + startAngle);
CGFloat currentEndAngle = ((self.oldX * 2*(float)M_PI) + startAngle);
CGFloat endAngle = currentEndAngle-((currentEndAngle-stopAngle)*drawProgress);

UIBezierPath *guideCirclePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];

这是 self 们上次更新以来 x 缩小的情况。我遇到的问题实际上有几个:

1. 形状总是 以 45º 开始绘制(除非我旋转 View )。我还没有找到任何方法来改变它，将 startAngle 设置为 -45º 实际上没有任何区别，因为它总是“弹出”到 45。我能做些什么吗，或者我有求助于其他绘图方法？
2. 有没有其他方法可以让这些东西动起来？我已经阅读了很多关于使用 CAShapeLayer 的内容，但我还不太了解使用这两种方法的实际区别(在缺点和优点方面)。如果有人能澄清，我将非常感激!

更新:我改为将代码迁移到 CAShapeLayer，但现在我面临一个不同的问题。最好用这张图片来描述:

发生的事情是，当层应该收缩时，细外线仍然存在(无论移动方向如何)。当条形缩小时，不会删除 1-x 的增量，除非我明确地在其上创建一个新的白色形状。代码如下。有什么想法吗？

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:stopAngle clockwise:YES];
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [circlePath CGPath];
circle.strokeStart = 0;
circle.strokeEnd = 1.0*self.progress;

// Colour and other customizations here.

if (self.progress > self.oldProgress) {
    drawAnimation.fromValue = @(1.0*self.oldProgress);
    drawAnimation.toValue = @(circle.strokeEnd);
} else { 
    drawAnimation.fromValue = @(1.0*self.oldProgress);
    drawAnimation.toValue = @(1.0*self.progress);
    circle.strokeEnd = 1.0*self.progress;
}

drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //kCAMediaTimingFunctionEaseIn
[circle addAnimation:drawAnimation forKey:@"strokeEnd"];

更新 2:我已经解决了大部分其他错误。原来只是我一直很傻，并且使整个动画过于复杂(更不用说到处都乘以 1 了，什么？)。我已经为我无法解决的错误制作了一个 gif:

有什么想法吗？

更新 3:(和关闭)。我设法通过调用摆脱了这个错误

[self.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];

现在一切正常。感谢所有的帮助!

Answer 1

使用 CAShapeLayer 更容易也更简洁。原因是 CAShapeLayer 包含属性 strokeStart 和 strokeEnd。这些值的范围从 0(路径的开头)到 1(路径的结尾)并且是可动画的。

通过更改它们，您可以轻松绘制圆的任何圆弧(或任意路径的任何部分，就此而言)。这些属性是可动画的，因此您可以创建一个增长/缩小的饼图切片或部分的动画环形。它比在 drawRect 中实现代码更容易且性能更高。