How to move a component by animating its position

Purpose. Animate a component’s position in pixels (e.g., slide a card from the right to the center). PositionAnimation interpolates linearly and is not clamped to [0,1] — ideal for coordinates.

APIs used

• new PositionAnimation(float start, float end, float duration [, float fps]) — interpolates start → end linearly, without clamp; duration in seconds; fps optional (default 60).
• PositionAnimation.onUpdate(Runnable) / onComplete(Runnable) / getValue() / start() / stop() / cancel() — same family as AlphaAnimation.
• Component.setX(int) / Component.setY(int) — reposition the component (return Component). Alternative: setBounds(int x, int y, int w, int h) when also changing size.
• Component.getY() / getWidth() / getHeight() — to preserve the axes that are not animating.
• Component.repaint() — static; required in onUpdate (render on demand).

Full example (copy, paste and run)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.animation.*;

/** Runnable main screen: slides a card from the right to the center when opened. */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      Card card = new Card();
      add(card);

      int fromX = Screen.width;          // starts off-screen, to the right
      int toX   = (Screen.width - card.width) / 2;   // centers horizontally

      PositionAnimation slide = new PositionAnimation(fromX, toX, 0.4f);   // 400 ms
      slide.onUpdate(() ->
         {
            card.x = (int) slide.getValue();     // moves only the X axis; Y stays (x is a public field)
            Component.repaint();                 // without this the frame isn't redrawn
         })
         .onComplete(() -> Component.repaint())
         .start();
   }
}

The snippet below shows only the core. To run it, place it inside the MainWindow skeleton above.

Minimal snippet

// verified in the source: PositionAnimation linear without clamp; Component.setX(int)/setY(int); repaint() static
Card card = new Card();
add(card);

int fromX = Screen.width;          // starts off-screen, to the right
int toX   = (Screen.width - card.getWidth()) / 2;   // centers horizontally

PositionAnimation slide = new PositionAnimation(fromX, toX, 0.4f);   // 400 ms
slide.onUpdate(() ->
   {
      card.setX((int) slide.getValue());   // moves only the X axis; Y stays
      Component.repaint();                 // without this the frame isn't redrawn
   })
   .onComplete(() -> Component.repaint())
   .start();

Details:

• If you need to move in X and Y at the same time, use two PositionAnimation (one per axis) or apply setBounds(x, y, w, h) in onUpdate computing both.
• setX/setY change the absolute position within the parent; on screens with automatic layout, prefer animating components whose bounds you control directly (avoid fighting the Layout).
• Unlike AlphaAnimation, there is no easing here: the movement is constant. For smooth movement, chain an easing into your own function or combine it with AlphaAnimation for the opacity effect.

Dig deeper

• Value animations
• Sibling recipe: Fade a component · Pulse in a loop
• Related: Open and close a screen