将CAShapeLayer圆圈设置为圆角三角形

Question

我希望在从圆形过渡到圆角三角形时为动画设置动画。

TL; DR：如何在两个CAShapeLayer形状之间为path CGPath制作动画？我知道他们需要拥有相同数量的控制点，但我认为我这样做了 - 这段代码有什么问题？

开始和结束状态看起来像这样： transition http://clrk.it/4vJS+

以下是我迄今为止尝试过的内容：我使用的是CAShapeLayer，并动画了其path属性的更改。

根据documentation（强调我的）：

  

路径对象可以使用CAPropertyAnimation的任何具体子类进行动画处理。路径将作为＆＃34;在线＆＃34;的线性混合进行插值。点; ＆＃34;离线＆＃34;可以非线性地插入点（例如，以保持曲线的导数的连续性）。 如果两条路径具有不同数量的控制点或细分，则结果未定义。

为了让圆圈和三角形具有相同数量的控制点，我将它们制作成四角形：圆形是一个圆角矩形，三角形是＆＃34;隐藏＆＃34 ;一边是第四个控制点。

这是我的代码：

self.view.backgroundColor = .blueColor()

//CREATE A CASHAPELAYER
let shape = CAShapeLayer()
shape.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
shape.fillColor = UIColor.redColor().CGColor
self.view.layer.addSublayer(shape)

let bounds = shape.bounds

//CREATE THE SQUIRCLE
let squareRadius: CGFloat = CGRectGetWidth(shape.bounds)/2

let topCorner = CGPointMake(bounds.midX, bounds.minY)
let rightCorner = CGPointMake(bounds.maxX, bounds.midY)
let bottomCorner = CGPointMake(bounds.midX, bounds.maxY)
let leftCorner = CGPointMake(bounds.minX, bounds.midY)

let squarePath = CGPathCreateMutable()
let squareStartingPoint = midPoint(leftCorner, point2: topCorner)
CGPathMoveToPoint(squarePath, nil, squareStartingPoint.x, squareStartingPoint.y)
addArcToPoint(squarePath, aroundPoint: topCorner, onWayToPoint: rightCorner, radius: squareRadius)
addArcToPoint(squarePath, aroundPoint: rightCorner, onWayToPoint: bottomCorner, radius: squareRadius)
addArcToPoint(squarePath, aroundPoint: bottomCorner, onWayToPoint: leftCorner, radius: squareRadius)
addArcToPoint(squarePath, aroundPoint: leftCorner, onWayToPoint: topCorner, radius: squareRadius)
CGPathCloseSubpath(squarePath)
let square = UIBezierPath(CGPath: squarePath)

//CREATE THE (FAKED) TRIANGLE
let triangleRadius: CGFloat = 25.0

let trianglePath = CGPathCreateMutable()
let triangleStartingPoint = midPoint(topCorner, point2: rightCorner)

let startingPoint = midPoint(topCorner, point2: leftCorner)
CGPathMoveToPoint(trianglePath, nil, startingPoint.x, startingPoint.y)
let cheatPoint = midPoint(topCorner, point2:bottomCorner)
addArcToPoint(trianglePath, aroundPoint: topCorner, onWayToPoint: cheatPoint, radius: triangleRadius)
addArcToPoint(trianglePath, aroundPoint: cheatPoint, onWayToPoint: bottomCorner, radius: triangleRadius)
addArcToPoint(trianglePath, aroundPoint: bottomCorner, onWayToPoint: leftCorner, radius: triangleRadius)
addArcToPoint(trianglePath, aroundPoint: leftCorner, onWayToPoint: topCorner, radius: triangleRadius)
CGPathCloseSubpath(trianglePath)
let triangle = UIBezierPath(CGPath: trianglePath)


shape.path = square.CGPath

......以及之后的viewDidAppear：

let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = self.square.CGPath
animation.toValue = self.triangle.CGPath
animation.duration = 3
self.shape.path = self.triangle.CGPath
self.shape.addAnimation(animation, forKey: "animationKey")

我有两个快速的小功能，可以使代码更清晰：

func addArcToPoint(path: CGMutablePath!, aroundPoint: CGPoint, onWayToPoint: CGPoint, radius: CGFloat) {
    CGPathAddArcToPoint(path, nil, aroundPoint.x, aroundPoint.y, onWayToPoint.x, onWayToPoint.y, radius)
}

func midPoint(point1: CGPoint, point2: CGPoint) -> CGPoint {
    return CGPointMake((point1.x + point2.x)/2, (point1.y + point2.y)/2)
}

我目前的结果如下：

注意：我试图从一个非常圆的方块构建圆圈，试图在矢量形状中获得相同数量的控制点。在上面的GIF中，角半径已减小，使转换更加明显。

您认为怎么回事？我怎么能达到这个效果呢？

Answer 1

如果路径的当前点和第一个参数相等，则addArcToPoint()会跳过创建线段的结果，因此您没有得到相同数量的控制点。

从其文档（强调我的）：

  

如果当前点和弧的第一个切点（起点）不等于，则Quartz会将当前点的直线段附加到第一个切点。

你的三角形代码中的这两个调用不会产生线段，而相应的调用使得squircle会调用：

addArcToPoint(trianglePath, aroundPoint: cheatPoint, onWayToPoint: bottomCorner, radius: triangleRadius)
addArcToPoint(trianglePath, aroundPoint: bottomCorner, onWayToPoint: leftCorner, radius: triangleRadius)

但是，您可以通过调用CGPathAddLineToPoint手动创建行。您可以使用CGPathApplierFunction检查您的工作，这样您就可以枚举控制点。

还~~~ 我可能会建议旋转一个显示链接并编写一个为每个t ∈ [0, 1]指定所需形状的函数，这可能是一个更清晰，更易于维护的解决方案。