Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SceneKit - How to Add Animations to Change SCNNode's Color?

Tags:

swift

scenekit

I would like to know how I can animate an SCNNode's color using Swift.

For example: I would like the node to constantly be changing color or I would like the node to fade from black to blue.

Do I use the SCNAction fadeIn or fadeOut?

like image 920
Matthew Anguelo Avatar asked Nov 07 '16 18:11

Matthew Anguelo


2 Answers

You can create a custom action.

If you have a red sphere in your scene

let sphereNode = scene.rootNode.childNode(withName: "sphere", recursively: false)!
sphereNode.geometry!.firstMaterial!.diffuse.contents = UIColor.red

This is how you build the custom action

let changeColor = SCNAction.customAction(duration: 10) { (node, elapsedTime) -> () in
    let percentage = elapsedTime / 5
    let color = UIColor(red: 1 - percentage, green: percentage, blue: 0, alpha: 1)
    node.geometry!.firstMaterial!.diffuse.contents = color
}

Finally you just need to run the action on the sphere

sphereNode.runAction(changeColor)

Result

enter image description here

like image 171
Luca Angeletti Avatar answered Nov 15 '22 23:11

Luca Angeletti


Got idea from @Luca Angeletti, I write the code so we can animate between any colors, include their alphas:

func aniColor(from: UIColor, to: UIColor, percentage: CGFloat) -> UIColor {
    let fromComponents = from.cgColor.components!
    let toComponents = to.cgColor.components!

    let color = UIColor(red: fromComponents[0] + (toComponents[0] - fromComponents[0]) * percentage,
        green: fromComponents[1] + (toComponents[1] - fromComponents[1]) * percentage,
        blue: fromComponents[2] + (toComponents[2] - fromComponents[2]) * percentage,
        alpha: fromComponents[3] + (toComponents[3] - fromComponents[3]) * percentage)
    return color
}

Use:

let oldColor = UIColor.red
let newColor = UIColor(colorLiteralRed: 0.0, green: 0.0, blue: 1.0, alpha: 0.5)
let duration: TimeInterval = 1
let act0 = SCNAction.customAction(duration: duration, action: { (node, elapsedTime) in
    let percentage = elapsedTime / CGFloat(duration)
    node.geometry?.firstMaterial?.diffuse.contents = self.aniColor(from: newColor, to: oldColor, percentage: percentage)
})
let act1 = SCNAction.customAction(duration: duration, action: { (node, elapsedTime) in
    let percentage = elapsedTime / CGFloat(duration)
    node.geometry?.firstMaterial?.diffuse.contents = self.aniColor(from: oldColor, to: newColor, percentage: percentage)
})

let act = SCNAction.repeatForever(SCNAction.sequence([act0, act1]))
node.runAction(act)
like image 35
Tony Avatar answered Nov 16 '22 00:11

Tony