Cycling through states

You can simply animate to the next state with stateCycle().

For this example, I’ve added a third state: "rotated".

redSquare.states =
    bigAndBlue:
        scale: 2
        backgroundColor: "blue"
    rotated:
        rotation: 45
redSquare.animationOptions =
    curve: Spring
# go to the next state when the layer is tapped
redSquare.onTap ->
    redSquare.stateCycle()

By default stateCycle() will use the order in which the states were created, but you can pass in a different order.

redSquare.onTap ->
    redSquare.stateCycle "default", "rotated", "bigAndBlue"

This has a different result: in the "bigAndBlue" state the square will now be big, blue, but also 45 degrees rotated because the "rotated" state preceded it.

It’s because state changes (or any other animation) will always happen from the current properties of the layer to the new properties.

The "bigAndBlue" state says:

Make it blue and twice the size.

So that’s precisely what happens, the layer having been rotated or not.

Animation options

Just as with animate() you can add animation settings to stateCycle() as well.

redSquare.onTap ->
    redSquare.stateCycle "default", "rotated", "bigAndBlue",
        time: 0.25
        curve: Bezier.linear

You can omit the extra comma when not adding a custom order.

redSquare.onTap ->
    redSquare.stateCycle
        time: 0.25
        curve: Bezier.linear

To define the animation settings for each state independently you can always add them to the states themselves.