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])— interpolastart → endlinealmente, sin clamp;durationen segundos;fpsopcional (por defecto 60).PositionAnimation.onUpdate(Runnable)/onComplete(Runnable)/getValue()/start()/stop()/cancel()— misma familia queAlphaAnimation.Component.setX(int)/Component.setY(int)— reposicionan el componente (retornanComponent). 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 elonUpdate(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
MainWindowde 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 aplicasetBounds(x, y, w, h)en elonUpdatecalculando ambos. setX/setYalteran la posición absoluta en el padre; en pantallas con layout automático, prefiere animar componentes cuyo bounds controlas directamente (evita pelear con elLayout).- 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 conAlphaAnimationpara el efecto de opacidad.
Profundiza
- Animaciones de valor
- Receta hermana: Fade de un componente · Pulso en loop
- Relacionado: Abrir y cerrar una pantalla
¿Te resultó útil esta página?¡Gracias por tu opinión!