JavaFX 2アニメーション:パス遷移

JavaFX 2の最も派手な側面の1つは、アニメーションのサポートです。JavaFXでの洞察に満ちたトランジションとタイムラインアニメーションの作成では、JavaFX 2でのトランジションとタイムラインの両方の使用について説明します。このブログ投稿では、そのチュートリアルで提供されている例を採用して、パストランジションを具体的に示します。

JavaFXでのトランジションとタイムラインアニメーションの作成に示されている例2(「パストランジション」)は、JavaFX 2の「shapes」パッケージのクラス(javafx.scene.shape.Path、javafx.scene.shape.MoveTo、およびjavafx)を使用してパスを作成する方法を示しています。 .scene.shape.CubicCurve。次に、その例は、javafx.animation.PathTransitionのインスタンス化と、インスタンス化されたjavafx.scene.shape.Rectangleを適用して、作成されたパスに沿って移動する方法を示しています。

以下のコードリストでは、JavaFXでのトランジションとタイムラインアニメーションの作成の例2に若干の変更を加えました。具体的には、移動する形状を長方形から円に変更し、2つの「終了ノブ」を2つの別々の円としてパスに追加し、アニメーション化された円の移動に合わせてパスの不透明度を変更する機能を追加しました。不透明度をゼロにすることの良い副作用は、パス自体が表示されず、代わりに円が自由に移動しているように見えることです。機能の「チャンク」が見やすくなるように、これの主要な部分をそれぞれ独自のプライベートメソッドに分割しようとしました。

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

次の一連の画面スナップショットは、この単純なJavaFXアニメーションの例を実際に示しています。それらは不透明度の降順(1.0から0.0)でリストされています。

適応されたPathTransitionの例のデモンストレーション(不透明度1.0)

適応されたPathTransitionの例のデモンストレーション(不透明度0.2)

適応されたPathTransitionの例のデモンストレーション(不透明度0.05)

適応されたPathTransitionの例のデモンストレーション(不透明度0.0)

上記の各画面スナップショットは、指定されたコマンドライン引数(1、0.2、0.05、および0)を使用してアプリケーションを実行した後に取得されました。

この適応された例はPathTransition、指定されたパスに沿ったノードの動きをアニメーション化するために使用することを示しています(私は以前にPathとその代替のいくつかの使用についてブログを書きました)。開発者はTransitionの独自の派生物を実装でき、他の提供された遷移もサポートされています(FadeTransition、ParallelTransition、SequentialTransitionなど)。

提供されているTransitionクラスを使用してJavaFX2アニメーションの適用をすばやく開始するのは簡単なプロセスです。

//marxsoftware.blogspot.com/で利用可能な元の投稿(実際のイベントに触発された)

このストーリー「JavaFX2アニメーション:パス遷移」は、もともとJavaWorldによって公開されました。