Question

我创建了一个带有UIBezierPath的大圆圈并使用它将其转换为精灵，

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

由于通过按比例缩小圆圈，不仅其半径会缩放，而且线条的宽度也会缩放，因此您需要设置与比例成比例的新线宽。例如，将圆圈缩小2时，您需要将lineWidth加倍。

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

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

与缩放动画一起运行并行动画，不断调整lineWidth。为此，您可以使用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)初始化程序，可以为您创建一个圆圈。

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

1 个答案: