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

【问题标题】：How to animate transformation of CGPath in SKShapeNode?如何在 SKShapeNode 中对 CGPath 的转换进行动画处理？
【发布时间】：2015-08-08 17:05:24
【问题描述】：

在我的场景中，我使用了三个基本形状节点：正方形、圆形和三角形。我想创建一个自定义 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()
}

【问题讨论】：

标签： swift sprite-kit uibezierpath skaction cgpath

【解决方案1】：

动画序列...

如图1左图所示，用控制点从点P1到P2绘制二次曲线，画出正方形的顶部>CP。控制点在 P1P2 线上，“曲线”将是一条线
将点P1和P2沿着从正方形的角到中心的线少量移动，C
更新控制点CP，使其y位置在正方形上方
使用控制点 CP 从 P1 到 P2 绘制生成的四边形曲线将生成图 1 右侧的曲线。如果正方形顶部到控制点的距离与P1（和P2）到正方形顶部的距离相同，曲线的顶点将在正方形上
对正方形的其他 3 个边重复步骤 2-4
起泡、冲洗、重复步骤 2 - 5，直到 P1 和 P2 出现在圆圈上

还有一幅画……

还有一个视图剪辑...

【讨论】：