Animasi JavaFX 2: Transisi Jalur

Salah satu aspek paling mencolok dari JavaFX 2 adalah dukungan animasinya. Menciptakan Transisi dan Animasi Garis Waktu yang berwawasan luas di JavaFX mencakup menggunakan Transisi dan Garis Waktu di JavaFX 2. Dalam posting blog ini, saya mengadaptasi contoh yang diberikan dalam tutorial itu untuk secara khusus mendemonstrasikan Transisi Jalur.

Contoh 2 ("Transisi Jalur") yang ditampilkan dalam Membuat Transisi dan Animasi Garis Waktu di JavaFX mendemonstrasikan pembuatan Jalur dengan kelas dari paket "bentuk" JavaFX 2: javafx.scene.shape.Path, javafx.scene.shape.MoveTo, dan javafx .scene.shape.CubicCurve. Contoh itu kemudian mendemonstrasikan pembuatan javafx.animation.PathTransition dan menerapkan javafx.scene.shape.Rectangle yang dipakai untuk bergerak di sepanjang Path yang dibuat.

Dalam daftar kode saya di bawah ini, saya telah membuat beberapa perubahan kecil pada Contoh 2 dalam Membuat Transisi dan Animasi Timeline di JavaFX. Saya telah secara khusus mengubah bentuk bergerak dari persegi panjang menjadi Lingkaran, menambahkan dua "tombol ujung" ke jalur sebagai dua lingkaran terpisah, dan menambahkan kemampuan untuk mengubah opasitas jalur bersama dengan gerakan lingkaran animasi. Efek samping yang bagus dari menggunakan opasitas nol adalah jalur itu sendiri tidak muncul dan malah tampak seperti lingkaran bergerak bebas. Saya mencoba memecah setiap bagian utama ini menjadi metode pribadinya sendiri untuk membuatnya lebih mudah untuk melihat "potongan" fungsionalitas.

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

Rangkaian snapshot layar berikut menunjukkan cara kerja contoh animasi JavaFX sederhana ini. Mereka dicantumkan dalam urutan opasitas menurun (dari 1,0 hingga 0,0).

Demonstrasi Contoh PathTransition yang Diadaptasi (Opacity 1.0)

Demonstrasi Contoh PathTransition yang Diadaptasi (Opacity 0.2)

Demonstrasi Contoh Transisi Jalur Adaptasi (Opacity 0.05)

Demonstrasi Contoh PathTransition yang Diadaptasi (Opacity 0.0)

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

Contoh yang diadaptasi ini telah mendemonstrasikan penggunaan PathTransitionuntuk menganimasikan gerakan node di sepanjang jalur yang ditentukan (saya telah membuat blog tentang penggunaan Path dan beberapa alternatifnya sebelumnya). Pengembang dapat mengimplementasikan turunan Transition mereka sendiri dan ada juga transisi lain yang disediakan yang didukung (seperti FadeTransition, ParallelTransition, dan SequentialTransition).

Ini adalah proses yang mudah untuk segera mulai menerapkan animasi JavaFX 2 menggunakan kelas Transisi yang disediakan.

Pengeposan asli tersedia di //marxsoftware.blogspot.com/ (Terinspirasi oleh Acara Aktual)

Artikel ini, "JavaFX 2 Animation: Path Transitions" awalnya diterbitkan oleh JavaWorld.