Saltar al contenido
CrossFly es 100% open sourceSíguenos en GitHub
CrossFlyCrossFly
Empezar

Esta página fue traducida automáticamente del portugués y puede contener errores. La versión en portugués es la canónica.

Cómo mover un componente animando su posición

Propósito. Animar la posición en píxeles de un componente (ej.: deslizar una card de la derecha al centro). PositionAnimation interpola linealmente y no está limitada a [0,1] — ideal para coordenadas.

APIs usadas

  • new PositionAnimation(float start, float end, float duration [, float fps]) — interpola start → end linealmente, sin clamp; duration en segundos; fps opcional (por defecto 60).
  • PositionAnimation.onUpdate(Runnable) / onComplete(Runnable) / getValue() / start() / stop() / cancel() — misma familia que AlphaAnimation.
  • Component.setX(int) / Component.setY(int) — reposicionan el componente (retornan Component). Alternativa: setBounds(int x, int y, int w, int h) cuando también cambie el tamaño.
  • Component.getY() / getWidth() / getHeight() — para preservar los ejes que no se están animando.
  • Component.repaint() — estático; obligatorio en el onUpdate (render bajo demanda).

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** Pantalla principal ejecutable: desliza un card de la derecha al centro al abrir. */
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;          // comienza fuera de la pantalla, a la derecha
      int toX   = (Screen.width - card.width) / 2;   // centra horizontalmente

      PositionAnimation slide = new PositionAnimation(fromX, toX, 0.4f);   // 400 ms
      slide.onUpdate(() ->
         {
            card.x = (int) slide.getValue();     // mueve solo el eje X; Y permanece (x es campo público)
            Component.repaint();                 // sin esto el cuadro no se redibuja
         })
         .onComplete(() -> Component.repaint())
         .start();
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

// verificado en la fuente: PositionAnimation lineal sin clamp; Component.setX(int)/setY(int); repaint() estático
Card card = new Card();
add(card);

int fromX = Screen.width;          // comienza fuera de la pantalla, a la derecha
int toX   = (Screen.width - card.getWidth()) / 2;   // centra horizontalmente

PositionAnimation slide = new PositionAnimation(fromX, toX, 0.4f);   // 400 ms
slide.onUpdate(() ->
   {
      card.setX((int) slide.getValue());   // mueve solo el eje X; Y permanece
      Component.repaint();                 // sin esto el cuadro no se redibuja
   })
   .onComplete(() -> Component.repaint())
   .start();

Detalles:

  • Si necesitas mover en X y Y al mismo tiempo, usa dos PositionAnimation (una por eje) o aplica setBounds(x, y, w, h) en el onUpdate calculando ambos.
  • setX/setY alteran la posición absoluta en el padre; en pantallas con layout automático, prefiere animar componentes cuyo bounds controlas directamente (evita pelear con el Layout).
  • A diferencia de AlphaAnimation, aquí no hay easing: el movimiento es constante. Para un movimiento suave, encadena un easing en tu propia función o combínalo con AlphaAnimation para el efecto de opacidad.

Profundiza

¿Te resultó útil esta página?