8

Currently I am using Core Graphics for a shape and to transform the shape in to a different one with CAShapeLayer and CABasicAnimation path animation.

However due to the complexity of the game, If were to step in to SpritKit, using SKShapeNode, (discarding CAShapeLayer and using SKShapeNode) would I be able to smoothly animate it in to a different shape?

I did not see a SKAction method that would let you change the path of a SKShapeNode.

Thanks in advance.

3
  • 1
    How your shape looks like? What do you want to create? What did you try with CAShapeLayer or SKShapeNode?
    – Kamran
    Dec 23, 2018 at 19:38
  • @Kamran CAShapeLayer has a complex shape. About 200+ points. I am able to recreate the shape with SKShapeNode using CGPath. The wall I hit was when I have to animate the shape changes.
    – Gizmodo
    Dec 24, 2018 at 13:47
  • 1
    I believe you can do it with a sequence of actions, some fade in and out and finally add the shape you want to be transformed to. you don't need to use CAShapeLayer or any CoreAnimation. Dec 24, 2018 at 21:03

1 Answer 1

6
+100

Well. Happy holidays.

The simplest way is to use the CALayerAnimation to teach the SKNode how to action like this :

class ViewController: UIViewController {


@IBOutlet weak var skview: SKView!
var  path1: CGPath!
var  path2: CGPath!

override func viewDidLoad() {
    super.viewDidLoad()

  path1  = CGPath.init(rect: CGRect.init(x: 0, y: 0, width: 100, height: 100), transform: nil)

    path2 = CGPath.init(rect: CGRect.init(x: 0, y: 0, width: 250, height: 400), transform: nil)

}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    let shapeLayer = CAShapeLayer()
    self.view.layer.addSublayer(shapeLayer)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.path = path1

    let anim = CABasicAnimation.init(keyPath: "path")
    anim.duration = 1.0
    anim.fromValue  = path1
    anim.toValue = path2
    anim.isRemovedOnCompletion  = false


    let shapeNode = SKShapeNode.init(path: path1)
    shapeNode.fillColor = UIColor.green

    skview.scene?.addChild(shapeNode)


    shapeLayer.add(anim, forKey:
    "prepanimation")
    shapeNode.run(SKAction.customAction(withDuration: anim.duration, actionBlock: { (node, timeDuration) in
        (node as! SKShapeNode).path =
        shapeLayer.presentation()?.path
    }))

}
}

If you path is too big and an optimum way is to consider converting CABasicAnimation to CAKeyFrameAnimation approach.

From the above process you can extract a pair (time, presentation_Path) at design time. Then assign back during the runtime in SKCustomAction. Please refer to SKKeyframeSequence to get the idea (not exactly but similar animation).

4
  • I meant moving away from 'CAShapeLayer' and using SKShapeNode in place of that. Is there a way to do that? Above looks right, yet, seems not efficient because twice the work is done for CAShapeLayer and SKShapeNode.
    – Gizmodo
    Dec 24, 2018 at 21:22
  • 2
    You have to write custom animation for that.
    – E.Coms
    Dec 24, 2018 at 21:45
  • I gave the full bounty since your solution looks clever. However, I am still searching for this animation to be done strictly on SpriteKit.
    – Gizmodo
    Dec 29, 2018 at 17:07
  • Thank you very much
    – E.Coms
    Dec 29, 2018 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.