Move

The Move action animates a node's position over time.

The options object for the Move action has the following properties:

• point: The point to move to. This is an object with x and y properties.
• duration: The duration of the animation in milliseconds.
• easing: The easing function to use. This is an optional property. If not specified, the default Linear easing function is used.
• runDuringTransition: A boolean indicating whether the action should run during a transition. This is an optional property. If not specified, the default is false.

The below example will move the circle when the button is clicked.

clickMeButton.onTapDown(() => {
    circle.run(Action.move({
        point: { x: 50, y: 50 },
        duration: 1500,
        easing: Easings.quadraticInOut
    }));
    console.log("Circle move action has begun.");
});`

Actions are asynchronous

Note that the message, "Circle move action has begun," will be printed to the console immediately after the button is clicked and does not wait until the move animation is done. This is because Actions are asynchronous. The run() method schedules the Action.move() Action to begin running in the background, and then the run() method finishes because it does not wait for the Action to complete. Execution proceeds to the next line: console.log() prints the message.

Once the circle has finished moving, repeated clicks will run the move action again, but because the circle is already at its destination of { x: 50, y: 50 }, there will be no visible change.

Run

Loading...

Explore:

• Reload the example and try clicking "Click me" multiple times quickly. This will interfere with the smooth animation. This is because the run() method will immediately replace any existing Action that is running on the node. You probably do not want this behavior. One way to fix this is to prevent the user from clicking the "Click me" button until the animation is complete: in the event handler for the button, set the isUserInteractionEnabled property of the button to false. This prevents additional clicks:

  clickMeButton.onTapDown(() => {
      clickMeButton.isUserInteractionEnabled = false;
      circle.run(Action.move({
          point: { x: 50, y: 50 },
          duration: 1500,
          easing: Easings.quadraticInOut
      }));
      console.log("Circle move action has begun.");
  });

  Now, the user can repeatedly hit the "Click me" button, but the animation will not be interrupted.