Parallel Animation

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.ParallelTransition;
import javafx.animation.transition.PathTransition;
import javafx.animation.transition.RotateTransition;
import javafx.animation.transition.ScaleTransition;
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 parTransition = ParallelTransition {
    node: node
    content: [
    	// らせんに沿って移動
        PathTransition {
            path: AnimationPath.createFromPath(guidePath)
            orientation: OrientationType.ORTHOGONAL_TO_TANGENT
            duration: 10s
            repeatCount: 2
            autoReverse: true
            interpolate: Interpolator.EASEBOTH
        },
        // 回転
        RotateTransition {
            fromAngle: 0
            byAngle: 1800
            duration: 10s
            repeatCount: 2
            autoReverse: true
            interpolate: Interpolator.EASEBOTH
        },
        // 拡大
        ScaleTransition {
            byX: 1.5
            byY: 1.5
            duration: 10s
            repeatCount: 2
            autoReverse: true
            interpolate: Interpolator.EASEBOTH
        }
    ]
}
 
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 0s
            action : function() {
                parTransition.playFromStart();
            }
        },
        KeyFrame {
            time : 20s
        }
    ]
}.play();