Cycling through states
You can simply animate to the next state with
For this example, I’ve added a third state:
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()
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.
"bigAndBlue" state says:
Make it blue and twice the size.
So that’s precisely what happens, the layer having been rotated or not.
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.