Sequence
The Sequence
Action runs Actions one after another. The next Action does not begin until the current one has finished. The Sequence
Action is considered finished when all of its Actions are finished.
Running three Actions in sequence
Below, we run three Actions on the label after the "GO" button is pushed. An animation to move the label to { x: 100, y: 50 }
, a wait of 250 milliseconds, and then another action to move the label back to where it started at { x: 100, y: 300 }
. Thus, the total duration of the sequence is 1250 milliseconds (500 for the move + 250 for the wait + 500 for the second move).
moveLabel.run(Action.sequence([
Action.move({ point: { x: 100, y: 50 }, duration: 500 }),
Action.wait({ duration: 250 }),
Action.move({ point: { x: 100, y: 300 }, duration: 500 }),
]));
note
The argument to Action.sequence()
is an array of Actions. Notice the square brackets enclosing the move and wait Actions: Action.sequence([ ... ])
.
Loading...
Explore:
- Clicking "GO" multiple times quickly will interfere with the smooth animation. This is because the
run()
method will immediately replace any existing Action that is running on the node. To fix this, to theSequence
Action, add Actions before and after the animations to disable and re-enable the button:- A
Custom
Action sets theisUserInteractionEnabled
property of the button tofalse
before the animations begin. This prevents additional clicks. - When the animations are complete, a
Custom
Action sets theisUserInteractionEnabled
property of the button totrue
so it again responds to clicks.
Now, the user can repeatedly hit the "GO" button, but the animations will not be interrupted.goButton.onTapDown(() => { moveLabel.run(Action.sequence([ Action.custom({ callback: () => { goButton.isUserInteractionEnabled = false; } }) Action.move({ point: { x: 100, y: 50 }, duration: 500 }), Action.wait({ duration: 250 }), Action.move({ point: { x: 100, y: 300 }, duration: 500 }), Action.custom({ callback: () => { goButton.isUserInteractionEnabled = true; } }) ])); console.log("Sequence action has begun."); });
- A