调整精灵大小而不缩小内容

Question

我用 UIBezierPath 创建了一个大圆圈，并使用它把它变成了 Sprite，

let path = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: CGFloat(226), startAngle: 0.0, endAngle: CGFloat(M_PI * 2), clockwise: false)

// create a shape from the path and customize it
let shape = SKShapeNode(path: path.cgPath)
shape.lineWidth = 20
shape.position = center
shape.strokeColor = UIColor(red:0.98, green:0.99, blue:0.99, alpha:1.00)

let trackViewTexture = self.view!.texture(from: shape, crop: outerPath.bounds)
let trackViewSprite = SKSpriteNode(texture: trackViewTexture)
trackViewSprite.physicsBody = SKPhysicsBody(edgeChainFrom: innerPath.cgPath)
self.addChild(trackViewSprite)

它工作正常。它完美地创建了圆圈。但我需要使用

调整它的大小

SKAction.resize(byWidth: -43, height: -43, duration: 0.3)

这会使它变小一点。但是，当它调整我现在设置的 20 线宽时，由于纵横填充，它非常小。所以当我觉得它看起来像这样：

但我需要它像这样缩小——保持 20 线宽：

我该怎么做？

不知道这是否会影响任何事情，但精灵会永远随着 SKAction 旋转

-- 编辑-- 现在，如何使用此方法缩放到特定大小？比如把226x226转183x183？

Answer 1

由于通过缩小圆，不仅它的半径被缩放，它的线宽也被缩放，你需要设置一个与比例成比例的新 lineWidth。例如，将圆缩小 2 倍时，需要将 lineWidth 加倍。

这可以通过两种方式完成：

1. 在 run(SKAction, completion: @escaping () -> Void) 方法的完成块中设置 lineWidth。然而，这将导致在动画运行时看到线条缩小，然后在动画完成后跳转到新的宽度。如果你的动画很短，这可能不容易观察到。

2. 与缩放动画一起运行并行动画，不断调整线宽。为此，您可以使用 SKAction 的 customAction 方法。 这是您的案例的示例：

   let scale = CGFloat(0.5)
   let finalLineWidth = initialLineWidth / scale
   let animationDuration = 1.0
   
   let scaleAction = SKAction.scale(by: scale, duration: animationDuration)
   
   let lineWidthAction = SKAction.customAction(withDuration: animationDuration) { (shapeNode, time) in
       if let shape = shapeNode as? SKShapeNode {
           let progress = time / CGFloat(animationDuration)
   
           shape.lineWidth = initialLineWidth + progress * (finalLineWidth - initialLineWidth)
       }
   }
   
   let group = SKAction.group([scaleAction, lineWidthAction])
   
   shape.run(group)
   

在此示例中，您的形状将缩放 0.5，因此如果初始线宽为 10，最终宽度将为 20。首先我们创建一个具有指定持续时间的 scaleAction，然后创建一个自定义操作，该操作将更新每次调用actionBlock 时，线条的宽度，通过使用动画的进度使线条的宽度看起来没有变化。最后，我们将这两个操作分组，以便在您调用 run 时它们将并行运行。

作为提示，您不需要使用 Bezier 路径来创建圆，SKShapeNode 有一个 init(circleOfRadius: CGFloat) 初始化程序，可以为您创建一个圆。