如何将CGPath在SKShapeNode中的转换动画化？

Question

在我的场景中，我使用了三个基本的形状:正方形、圆圈和三角形。我想要创建一个自定义SKAction来动画从一种形状到另一种形状的转换。

我正在尝试重新创建类似于这 in SpriteKit的东西。

我使用UIBezierPath为每个形状生成CGPath：

//Circles
UIBezierPath(ovalInRect: CGRect)

//Squares
UIBezierPath(rect: CGRect)

//Triangles
convenience init(triangleInRect:CGRect, centered:Bool) {
    self.init()
    var origin = CGPointZero
    if centered {
        origin = CGPoint(x: -triangleInRect.width / 2, y: -triangleInRect.height / 2)
    }
    moveToPoint(origin)
    addLineToPoint(CGPoint(x: origin.x + triangleInRect.width, y: origin.y))
    addLineToPoint(CGPoint(x: origin.x + triangleInRect.width / 2, y: origin.y + triangleInRect.height))
    closePath()
}

Answer 1

动画序列..。

1. 如图1左边的图表所示，通过绘制从点P1到带有控制点CP的P2的二次曲线来绘制正方形的顶部。在P1P2线上的控制点上，“曲线”将是一条线
2. 沿着直线将点P1和P2从正方形的角移动到中心，c。
3. 更新控制点CP，使其y位置高于方格。
4. 用控制点CP绘制从P1到P2的四次曲线将在图1的右边产生曲线。如果从正方形顶部到控制点的距离与从P1 (和P2)到正方形顶部的距离相同，则曲线的顶点将位于正方形上。
5. 对广场的其他3面重复步骤2-4。
6. 泡沫，冲洗，重复步骤2-5，直到P1和P2在圆圈上。

还有一幅画..。

​

​

还有一个视图剪辑..。

​

​