Animation JavaFX 2: transitions de chemin

L'un des aspects les plus flashy de JavaFX 2 est son support d'animation. L'insightful Creating Transitions and Timeline Animation in JavaFX couvre l'utilisation des transitions et des timelines dans JavaFX 2. Dans ce billet de blog, j'adapte un exemple fourni dans ce didacticiel pour illustrer spécifiquement les transitions de chemin.

L'exemple 2 ("Transition de chemin") présenté dans Création de transitions et d'animation de chronologie dans JavaFX montre la création d'un chemin avec des classes du package JavaFX 2 "forms": javafx.scene.shape.Path, javafx.scene.shape.MoveTo et javafx .scene.shape.CubicCurve. Cet exemple montre ensuite l'instanciation d'un javafx.animation.PathTransition et l'application d'un javafx.scene.shape.Rectangle instancié pour se déplacer le long du chemin créé.

Dans ma liste de codes ci-dessous, j'ai apporté de légères modifications à l'exemple 2 dans Création de transitions et d'animation de chronologie dans JavaFX. J'ai spécifiquement changé la forme en mouvement d'un rectangle à un cercle, ajouté deux "boutons de fin" au chemin en tant que deux cercles séparés, et ajouté la possibilité de changer l'opacité du chemin avec les mouvements du cercle animé. Le bon effet secondaire de l'utilisation d'une opacité nulle est que le chemin lui-même n'apparaît pas et il semble plutôt que le cercle se déplace librement. J'ai essayé de diviser chaque élément majeur de ceci dans sa propre méthode privée pour faciliter la visualisation des «morceaux» de fonctionnalité.

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 série suivante d'instantanés d'écran montre cet exemple d'animation JavaFX simple en action. Ils sont classés par ordre d'opacité décroissante (de 1,0 à 0,0).

Démonstration de l'exemple de transition de chemin adapté (Opacity 1.0)

Démonstration de l'exemple de transition de chemin adapté (opacité 0,2)

Démonstration de l'exemple de transition de chemin adapté (opacité 0,05)

Démonstration de l'exemple de transition de chemin adapté (Opacity 0.0)

Chacun des instantanés d'écran ci-dessus a été pris après l'exécution de l'application avec l'argument de ligne de commande spécifié (1, 0,2, 0,05 et 0).

Cet exemple adapté a démontré l'utilisation PathTransitionpour animer le mouvement d'un nœud le long du chemin prescrit (j'ai déjà blogué sur l'utilisation de Path et de certaines de ses alternatives). Les développeurs peuvent implémenter leur propre dérivé de Transition et d'autres transitions fournies sont également prises en charge (telles que FadeTransition, ParallelTransition et SequentialTransition).

C'est un processus simple pour commencer rapidement à appliquer l'animation JavaFX 2 à l'aide des classes de transition fournies.

Publication originale disponible sur //marxsoftware.blogspot.com/ (Inspiré par des événements réels)

Cette histoire, "JavaFX 2 Animation: Path Transitions" a été initialement publiée par JavaWorld.