Path Transition Sample

import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
 
import java.lang.Math;
 
// 度からラジアンへの変換係数
def TO_RADIAN = Math.PI/180.0;
 
// 花
var node: Node = Group {
    content: [
        // 90 度ずつ回転させた花びらを　4 枚
        for (angle in [0, 90, 180, 270]) {
            Path {
                stroke: null
                fill: RadialGradient {
                    centerX: 0.5 centerY: 1.0
                    stops: [
                        Stop { offset: 0.0 color: Color.web("#FFEEEE") },
                        Stop { offset: 0.8 color: Color.PINK }
                    ]
                }
 
                // (0, 0) を中心に回転
                transforms: Rotate { pivotX: 0.0 pivotY: 0.0 angle: angle }
 
                elements: [
                    MoveTo { x: 0 y: 0},
                    CubicCurveTo {
                        x: 7.321 y: -12.68
                        controlX1: 0 controlY1: 0
                        controlX2: 7.321 controlY2: -8.68
                    },
                    ArcTo {
                        x: -7.321 y: -12.68
                        radiusX: 7.32 radiusY: 7.32
                    }
                    CubicCurveTo {
                        x: 0 y: 0
                        controlX1: -7.321 controlY1: -8.68
                        controlX2: 0 controlY2: 0
                    },
                ]
            }
        }
    ]
}
 
// node を移動させるガイドパス
var guidePath = Path {
    elements: [
        MoveTo { x: 100 y: 100 },
        for (deg in [0.0..1800.0 step 15.0]) {
            // 度からラジアンに変換
            var rad = deg * TO_RADIAN;
            LineTo {
                x: 2.0 * rad * Math.sin(rad) + 100
                y: 2.0 * rad * Math.cos(rad) + 100
            }
        }
    ]
}
 
Stage {
    title: "Path Transitioon Sample"
    scene: Scene {
        width: 200
        height: 200
        content: node
    }
}
 
var pathTransition = PathTransition {
    // パスに沿って移動する対象ノード
    node: node
 
    // パスから AnimationPath オブジェクトを作成
    path: AnimationPath.createFromPath(guidePath)
 
    // パスに沿って回転
    orientation: OrientationType.ORTHOGONAL_TO_TANGENT
 
    duration: 10s
    repeatCount:4
    autoReverse: true
}
pathTransition.play();