JavaFX 2 Animation: Path Transitions

Uno degli aspetti più appariscenti di JavaFX 2 è il suo supporto all'animazione. L'intelligente creazione di transizioni e animazione della linea temporale in JavaFX copre l'utilizzo sia delle transizioni che delle linee temporali in JavaFX 2. In questo post del blog, adeguo un esempio fornito in quel tutorial per dimostrare specificamente le transizioni del percorso.

L'Esempio 2 ("Transizione del percorso") mostrato in Creazione di transizioni e animazione della linea temporale in JavaFX dimostra la creazione di un percorso con classi dal pacchetto JavaFX 2 "shapes": javafx.scene.shape.Path, javafx.scene.shape.MoveTo e javafx .scene.shape.CubicCurve. Questo esempio mostra quindi la creazione di un'istanza di javafx.animation.PathTransition e l'applicazione di un'istanza di javafx.scene.shape.Rectangle per spostarsi lungo il percorso creato.

Nel mio elenco di codice di seguito, ho apportato alcune lievi modifiche all'esempio 2 in Creazione di transizioni e animazione della sequenza temporale in JavaFX. Ho specificamente modificato la forma in movimento da un rettangolo a un cerchio, aggiunto due "manopole di estremità" al percorso come due cerchi separati e aggiunto la possibilità di modificare l'opacità del percorso insieme alle mosse del cerchio animato. Il piacevole effetto collaterale dell'utilizzo di un'opacità zero è che il percorso stesso non appare e sembra invece che il cerchio si muova liberamente. Ho provato a suddividere ogni parte principale di questo nel proprio metodo privato per rendere più facile vedere i "pezzi" di funzionalità.

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 seguente serie di istantanee dello schermo mostra questo semplice esempio di animazione JavaFX in azione. Sono elencati in ordine decrescente di opacità (da 1.0 a 0.0).

Dimostrazione dell'esempio di PathTransition adattato (Opacity 1.0)

Dimostrazione dell'esempio di PathTransition adattato (opacità 0.2)

Dimostrazione dell'esempio di PathTransition adattato (opacità 0,05)

Dimostrazione dell'esempio di PathTransition adattato (opacità 0.0)

Ciascuna delle istantanee della schermata sopra è stata acquisita dopo aver eseguito l'applicazione con l'argomento della riga di comando specificato (1, 0,2, 0,05 e 0).

Questo esempio adattato ha dimostrato l'utilizzo PathTransitionper animare il movimento di un nodo lungo il percorso prescritto (ho scritto sul blog sull'uso di Path e alcune delle sue alternative prima). Gli sviluppatori possono implementare la propria derivata di Transition e sono supportate anche altre transizioni fornite (come FadeTransition, ParallelTransition e SequentialTransition).

È un processo semplice per iniziare rapidamente ad applicare l'animazione JavaFX 2 utilizzando le classi Transition fornite.

Pubblicazione originale disponibile su //marxsoftware.blogspot.com/ (Ispirato da eventi effettivi)

Questa storia, "JavaFX 2 Animation: Path Transitions" è stata originariamente pubblicata da JavaWorld.