JavaFX 2 Animasi: Peralihan Laluan

Salah satu aspek paling menarik dari JavaFX 2 adalah sokongan animasinya. Membuat Peralihan dan Animasi Garis Masa yang berwawasan di JavaFX merangkumi kedua-dua Peralihan dan Garis Masa di JavaFX 2. Dalam catatan blog ini, saya menyesuaikan contoh yang diberikan dalam tutorial tersebut untuk secara khusus menunjukkan Peralihan Laluan.

Contoh 2 ("Path Transition") yang ditunjukkan dalam Membuat Transisi dan Timeline Animation di JavaFX menunjukkan membuat Path dengan kelas dari pakej "bentuk" JavaFX 2: javafx.scene.shape.Path, javafx.scene.shape.MoveTo, dan javafx .scene.shape.CubicCurve. Contoh itu kemudian menunjukkan instansiasi javafx.animation.PathTransition dan mengaplikasikan javafx.scene.shape. Segi empat tepat untuk bergerak di sepanjang Laluan yang dibuat.

Dalam senarai kod saya di bawah, saya telah membuat sedikit perubahan pada Contoh 2 dalam Membuat Peralihan dan Animasi Garis Masa di JavaFX. Saya secara khusus telah mengubah bentuk bergerak dari segi empat tepat menjadi Lingkaran, menambahkan dua "tombol hujung" ke jalan sebagai dua bulatan yang berasingan, dan menambahkan kemampuan untuk mengubah kelegapan jalan bersama dengan pergerakan lingkaran animasi. Kesan sampingan yang baik dari penggunaan kelegapan sifar ialah jalan itu sendiri tidak muncul dan sebaliknya kelihatan bulatan bergerak bebas. Saya cuba memecahkan setiap bahagian utama ini ke dalam kaedah peribadinya untuk memudahkan melihat "bahagian" fungsi.

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); } } 

Siri tangkapan gambar berikut menunjukkan contoh animasi JavaFX ringkas ini dalam tindakan. Mereka disenaraikan mengikut urutan kelegapan menurun (dari 1.0 hingga 0.0).

Demonstrasi Contoh Peralihan Laluan Diadaptasi (Opacity 1.0)

Demonstrasi Contoh Peralihan Laluan Diadaptasi (Kelegapan 0.2)

Demonstrasi Contoh Peralihan Laluan yang Diadaptasi (Opacity 0.05)

Demonstrasi Contoh Peralihan Laluan Diadaptasi (Opacity 0.0)

Setiap tangkapan gambar di atas diambil setelah menjalankan aplikasi dengan argumen baris perintah yang ditentukan (1, 0.2, 0.05, dan 0).

Contoh yang disesuaikan ini telah menunjukkan penggunaan PathTransitionuntuk menghidupkan pergerakan nod di sepanjang jalan yang ditentukan (saya telah menulis blog mengenai penggunaan Path dan beberapa alternatifnya sebelumnya). Pembangun boleh melaksanakan turunan Transisi mereka sendiri dan terdapat peralihan lain yang disokong juga (seperti FadeTransition, ParallelTransition, dan SequentialTransition).

Ini adalah proses yang mudah untuk mula menerapkan animasi JavaFX 2 dengan cepat menggunakan kelas Transisi yang disediakan.

Pengeposan asal boleh didapati di //marxsoftware.blogspot.com/ (Diilhamkan oleh Peristiwa Sebenar)

Kisah ini, "JavaFX 2 Animation: Path Transitions" pada asalnya diterbitkan oleh JavaWorld.