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

时间:2016-10-16 15:37:11

标签: ios swift swift3 uibezierpath skspritenode

我创建了一个带有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行宽时,由于纵横填充,我现在设置的非常小。所以当我眨眼它看起来像这样:

enter image description here

但我需要它像这样缩小 - 保持20行宽:

enter image description here

我该怎么做?

不知道这是否会影响任何事情,但精灵正在与SKAction永远一起旋转

- 编辑 - 现在,我如何使用此方法缩放到特定大小?喜欢将226x226转为183x183

1 个答案:

答案 0 :(得分:4)

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

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

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

  2. 与缩放动画一起运行并行动画,不断调整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)
    
  3. 在此示例中,您的形状将缩放0.5,因此,如果初始线宽为10,则最终宽度为20.首先,我们创建具有指定持续时间的scaleAction,然后创建将更新的自定义操作每次调用actionBlock时线条的宽度,通过使用动画的进度使线条的宽度看起来没有变化。最后,我们将这两个操作分组,以便在您拨打run时将它们并行运行。

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