Animación JavaFX 2: Transiciones de ruta

Uno de los aspectos más llamativos de JavaFX 2 es su soporte de animación. La perspicaz Creación de transiciones y animación de línea de tiempo en JavaFX cubre el uso de transiciones y líneas de tiempo en JavaFX 2. En esta publicación de blog, adapto un ejemplo proporcionado en ese tutorial para demostrar específicamente las transiciones de ruta.

El ejemplo 2 ("Transición de ruta") que se muestra en Creación de transiciones y animación de línea de tiempo en JavaFX demuestra la creación de una ruta con clases del paquete de "formas" de JavaFX 2: javafx.scene.shape.Path, javafx.scene.shape.MoveTo y javafx .scene.shape.CubicCurve. Ese ejemplo luego demuestra la instanciación de un javafx.animation.PathTransition y la aplicación de un javafx.scene.shape.Rectangle instanciado para moverse a lo largo de la ruta creada.

En mi lista de código a continuación, hice algunos cambios leves al Ejemplo 2 en Creación de transiciones y animación de línea de tiempo en JavaFX. He cambiado específicamente la forma en movimiento de un rectángulo a un círculo, agregué dos "perillas finales" a la ruta como dos círculos separados y agregué la capacidad de cambiar la opacidad de la ruta junto con los movimientos del círculo animado. El buen efecto secundario de usar una opacidad cero es que la ruta en sí no aparece y, en cambio, parece que el círculo se mueve libremente. Traté de dividir cada parte importante de esto en su propio método privado para que sea más fácil ver los "trozos" de funcionalidad.

JavaFxAnimations.java

package dustin.examples; import java.util.List; import javafx.animation.PathTransition; import javafx.animation.Timeline; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.*; import javafx.stage.Stage; import javafx.util.Duration; /** * Simple example demonstrating JavaFX animations. * * Slightly adapted from Example 2 ("Path Transition") which is provided in * "Creating Transitions and Timeline Animation in JavaFX" * (//docs.oracle.com/javafx/2.0/animations/jfxpub-animations.htm). * * @author Dustin */ public class JavaFxAnimations extends Application { /** * Generate Path upon which animation will occur. * * @param pathOpacity The opacity of the path representation. * @return Generated path. */ private Path generateCurvyPath(final double pathOpacity) { final Path path = new Path(); path.getElements().add(new MoveTo(20,20)); path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120)); path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240)); path.setOpacity(pathOpacity); return path; } /** * Generate the path transition. * * @param shape Shape to travel along path. * @param path Path to be traveled upon. * @return PathTransition. */ private PathTransition generatePathTransition(final Shape shape, final Path path) { final PathTransition pathTransition = new PathTransition(); pathTransition.setDuration(Duration.seconds(8.0)); pathTransition.setDelay(Duration.seconds(2.0)); pathTransition.setPath(path); pathTransition.setNode(shape); pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); pathTransition.setCycleCount(Timeline.INDEFINITE); pathTransition.setAutoReverse(true); return pathTransition; } /** * Determine the path's opacity based on command-line argument if supplied * or zero by default if no numeric value provided. * * @return Opacity to use for path. */ private double determinePathOpacity() { final Parameters params = getParameters(); final List parameters = params.getRaw(); double pathOpacity = 0.0; if (!parameters.isEmpty()) { try { pathOpacity = Double.valueOf(parameters.get(0)); } catch (NumberFormatException nfe) { pathOpacity = 0.0; } } return pathOpacity; } /** * Apply animation, the subject of this class. * * @param group Group to which animation is applied. */ private void applyAnimation(final Group group) { final Circle circle = new Circle(20, 20, 15); circle.setFill(Color.DARKRED); final Path path = generateCurvyPath(determinePathOpacity()); group.getChildren().add(path); group.getChildren().add(circle); group.getChildren().add(new Circle(20, 20, 5)); group.getChildren().add(new Circle(380, 240, 5)); final PathTransition transition = generatePathTransition(circle, path); transition.play(); } /** * Start the JavaFX application * * @param stage Primary stage. * @throws Exception Exception thrown during application. */ @Override public void start(final Stage stage) throws Exception { final Group rootGroup = new Group(); final Scene scene = new Scene(rootGroup, 600, 400, Color.GHOSTWHITE); stage.setScene(scene); stage.setTitle("JavaFX 2 Animations"); stage.show(); applyAnimation(rootGroup); } /** * Main function for running JavaFX application. * * @param arguments Command-line arguments; optional first argument is the * opacity of the path to be displayed (0 effectively renders path * invisible). */ public static void main(final String[] arguments) { Application.launch(arguments); } } 

La siguiente serie de instantáneas de pantalla muestra este sencillo ejemplo de animación JavaFX en acción. Se enumeran en orden descendente de opacidad (de 1.0 a 0.0).

Demostración del ejemplo de transición de ruta adaptada (Opacity 1.0)

Demostración del ejemplo de transición de ruta adaptada (opacidad 0.2)

Demostración del ejemplo de transición de ruta adaptada (opacidad 0.05)

Demostración del ejemplo de transición de ruta adaptada (opacidad 0.0)

Cada una de las capturas de pantalla anteriores se tomó después de ejecutar la aplicación con el argumento de línea de comando especificado (1, 0.2, 0.05 y 0).

Este ejemplo adaptado ha demostrado el uso PathTransitionpara animar el movimiento de un nodo a lo largo de la ruta prescrita (he escrito en un blog sobre el uso de Path y algunas de sus alternativas antes). Los desarrolladores pueden implementar su propio derivado de Transition y también se admiten otras transiciones suministradas (como FadeTransition, ParallelTransition y SequentialTransition).

Es un proceso sencillo para comenzar a aplicar rápidamente la animación JavaFX 2 utilizando las clases de transición proporcionadas.

Publicación original disponible en //marxsoftware.blogspot.com/ (inspirado en eventos reales)

Esta historia, "JavaFX 2 Animation: Path Transitions" fue publicada originalmente por JavaWorld.