我想动画一个形状，使其从圆形过渡到圆角三角形。
TL;DR：如何在两个CGPath形状之间动画CAShapeLayer的路径？ 我知道它们需要具有相同数量的控制点，但我认为我正在做到这一点 - 这段代码有什么问题？
开始和结束状态应该看起来像这样：transition http://clrk.it/4vJS+ 到目前为止，我尝试了以下方法：我正在使用CAShapeLayer，并动画更改其路径属性。
根据文档（我强调）：documentation 路径对象可使用任何
以下是我的代码：
我有两个小函数可以让代码更易读：
TL;DR：如何在两个CGPath形状之间动画CAShapeLayer的路径？ 我知道它们需要具有相同数量的控制点，但我认为我正在做到这一点 - 这段代码有什么问题？
开始和结束状态应该看起来像这样：transition http://clrk.it/4vJS+ 到目前为止，我尝试了以下方法：我正在使用CAShapeLayer，并动画更改其路径属性。
根据文档（我强调）：documentation 路径对象可使用任何
CAPropertyAnimation 的具体子类进行动画处理。路径将作为“在线”点的线性混合插值；“离线”点可能会被非线性插值（例如，为了保持曲线导数的连续性）。如果两条路径具有不同数量的控制点或线段，则结果是未定义的。
为了让圆形和三角形具有相同数量的控制点，我将它们都制作成了四个点的形状：圆形是一个高度圆角矩形，而三角形在一侧“隐藏”了第四个控制点。以下是我的代码：
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中，已经减小了角半径以使变换更加明显。
你认为正在发生什么？还有什么其他方法可以实现这种效果？