如何在SKShapeNode中对CGPath的转换进行动画处理？

Question

在我的场景中，我使用了三个基本的shapenode：正方形，圆形和三角形。我想创建一个自定义SKAction，它可以动画从一种形状到另一种形状的转换。

我正在尝试在SpriteKit中重新创建类似this的内容。

我使用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 到 P2 的二次曲线来绘制正方形的顶部，控制点为 CP 。使用 P1P2 行上的控制点，“曲线”将成为一行
2. 将点 P1 和 P2 沿着从广场角落到中心的线移动一小部分 C
3. 更新控制点 CP ，使其 y 位置高于正方形
4. 使用控制点 CP 将生成的四边形曲线从 P1 绘制到 P2 将生成图1右侧的曲线。如果从正方形顶部到控制点的距离与从P1（和P2）到正方形顶部的距离相同，曲线的顶点将在正方形上
5. 对于方形
的其他3个边重复步骤2-4
6. 泡沫，冲洗，重复步骤2 - 5直到 P1 和 P2 在圆圈上

和图纸......



和视图剪辑......