top / index / prev / next / target / source

2012-09-09 diary: [JavaFX] Transition パス・アニメーションのサンプル

いがぴょんの日記 日記形式でつづる いがぴょんコラム ウェブページです。

[JavaFX] Transition パス・アニメーションのサンプル

結構複雑なパス付きアニメーションについて、少ないコーディングで実現できます。私の経験ベースだと、結構新鮮な感動がありました。

<Sample001.java>

package sample;

import javafx.animation.PathTransition;
import javafx.animation.PathTransition.OrientationType;
import javafx.animation.PathTransitionBuilder;
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.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * パス・アニメーションの JavaFX 2 サンプル
 */
public class Sample001 extends Application {
    private PathTransition transition;

    @Override
    public void start(final Stage primaryStage) throws Exception {
        final Group root = new Group();
        primaryStage.setScene(new Scene(root, 400, 200));

        final Rectangle rect = new Rectangle(0, 0, 60, 60);
        root.getChildren().add(rect);
        rect.setFill(Color.YELLOWGREEN);

        final Path path = new Path();
        root.getChildren().add(path);
        path.getElements().addAll(new MoveTo(10, 10), new CubicCurveTo(325, 150, 50, 195, 375, 50),
                new CubicCurveTo(128, 50, 150, 375, 195, 50));
        path.setStrokeWidth(8);
        path.setStroke(Color.BLUEVIOLET);

        transition = PathTransitionBuilder.create().duration(Duration.seconds(10)).path(path).node(rect)
                .orientation(OrientationType.ORTHOGONAL_TO_TANGENT).cycleCount(Timeline.INDEFINITE).autoReverse(true)
                .build();

        primaryStage.show();

        transition.play();
    }

    @Override
    public void stop() {
        transition.stop();
    }

    public static void main(final String[] args) {
        launch(args);
    }
}

登場キーワード

この日記について