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([ ... ]).

Run

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 the Sequence Action, add Actions before and after the animations to disable and re-enable the button:
  • A Custom Action sets the isUserInteractionEnabled property of the button to false before the animations begin. This prevents additional clicks.
  • When the animations are complete, a Custom Action sets the isUserInteractionEnabled property of the button to true so it again responds to clicks.

  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.");
  });

  Now, the user can repeatedly hit the "GO" button, but the animations will not be interrupted.