Timelines JavaFX

¿Cómo puedo añadir un retraso entre claves? Quiero que el usuario vea la parte delantera de la tarjeta durante 0.6 segundos antes de que cierre si las tarjetas no coinciden. Aquí está el código Lo intenté en el fondo pero no funciona.

KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle, end).play();



KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame delay = new KeyFrame(
            Duration.millis(600)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle,delay, end).play();

Pregunta hecha hace 3 años, 4 meses, 29 días - Por binarybard1cc8

3 Respuestas:

  • Nota: El siguiente asume que la tarjeta está "escalada" y "escalada". No estoy seguro de que eso es lo que quieres considerando tu uso de Duration.ZERO en la pregunta. Si desea que la tarjeta sólo aparezca inmediatamente, retire la animación de escala en; simplemente muestre la tarjeta y luego comience la animación (donde la PauseTransition es el primero en la configuración secuencial).

    Uso SequentialTranition, PauseTransition, y ScaleTransition a su ventaja. Por ejemplo:

    ScaleTransition start = new ScaleTransition(Duration.millis(150));
start.setToX(1.0);

// plays after 'start' finishes
PauseTransition middle = new PauseTransition(Duration.millis(600));

// plays after 'middle' finishes
ScaleTransition end = new ScaleTransition(Duration.millis(300));
end.setToX(0.0);

// only set the node on the SequentialTransition
SequentialTransition animation = new SequentialTransition(imageView, start, middle, end);

    Si desea que las transiciones de escala tengan la misma duración, entonces lo anterior se puede simplificar a:

    ScaleTransition scale = new ScaleTransition(Duration.millis(150));
scale.setFromX(0.0);
scale.setToX(1.0);

// Set to half the desired time because of the auto-reverse configured below
PauseTransition pause = new PauseTransition(Duration.millis(300));

// Plays 'scale' forwards, followed by 'pause', then plays 'pause' backwards
// followed by `scale`. That's why 'pause' has its duration set to half the full
// desired duration (it's played forwards then immediately backwards for a total
// of 600 ms).
SequentialTransition animation = new SequentialAnimation(imageView, scale, pause);
animation.setAutoReverse(true);
animation.setCycleCount(2);

    Respondida el Dec 17, 2020 a las 07:50 - por codergeek24

    Votos positivos: 0 | Votos negativos: 0

  • En el segundo código que proporcionaste, estás en el camino correcto al agregar un KeyFrame de retraso entre la parte media y final de la animación para lograr el efecto deseado. Sin embargo, el KeyFrame de retraso debe incluir una acción que no haga nada, ya que actualmente está vacío. Aquí te muestro cómo puedes modificar el código para que funcione correctamente:

    java
KeyFrame start = new KeyFrame(
    Duration.ZERO,
    new KeyValue(imageView.scaleXProperty(), 1.0)
);
KeyFrame middle = new KeyFrame(
    Duration.millis(150),
    e -> imageView.setImage(image),
    new KeyValue(imageView.scaleXProperty(), 0.0)
);
KeyFrame delay = new KeyFrame(
    Duration.millis(600) // Retraso de 0.6 segundos
);
KeyFrame end = new KeyFrame(
    Duration.millis(900), // 300 ms + 600 ms de retraso
    new KeyValue(imageView.scaleXProperty(), 1.0)
);
new Timeline(start, middle, delay, end).play();

    Al agregar esta modificación, la animación debería mostrar la parte delantera de la tarjeta durante 0.6 segundos antes de que cierre si las tarjetas no coinciden. Asegúrate de ajustar la duración total de la animación en el KeyFrame final según tus necesidades.

    Respondida el Dec 18, 2020 a las 07:52 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para añadir un retraso entre fotogramas clave en una línea de tiempo de JavaFX, puedes utilizar el método TimelineBuilder.delay(). Este método toma un argumento Duration que especifica la duración del retraso.

    Aquí tienes un ejemplo modificado de tu código con un retraso de 600 milisegundos añadido:

    java
KeyFrame start = new KeyFrame(
        Duration.ZERO,
        new KeyValue(imageView.scaleXProperty(), 1.0));
KeyFrame middle = new KeyFrame(
        Duration.millis(150),
        e -> imageView.setImage(image),
        new KeyValue(imageView.scaleXProperty(), 0.0)
);
KeyFrame delay = KeyFrame.delay(Duration.millis(600));
KeyFrame end = new KeyFrame(
        Duration.millis(300),
        new KeyValue(imageView.scaleXProperty(), 1.0)
);
new Timeline(start, middle, delay, end).play();

    Este código creará una línea de tiempo con cuatro fotogramas clave:

    El primer fotograma clave establece la escala X de imageView a 1.0. El segundo fotograma clave establece la imagen de imageView y escala X a 0.0. El tercer fotograma clave es un retraso de 600 milisegundos. El cuarto fotograma clave establece la escala X de imageView a 1.0.

    La línea de tiempo se reproducirá automáticamente y el retraso de 600 milisegundos se producirá entre el segundo y el tercer fotograma clave. Esto dará al usuario tiempo para ver la parte delantera de la tarjeta antes de que se cierre.

    Respondida el Dec 18, 2020 a las 07:57 - por Gemini

    Votos positivos: 0 | Votos negativos: 0