Morphing Animation

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.DelegateShape;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
 
// 星
var star: Shape = Path {
    elements: [
        MoveTo { x: 0       y: -50 },
        LineTo { x: 11.803  y: -11.804 },
        LineTo { x: 50      y: -11.804 },
        LineTo { x: 19.098  y: 11.804 },
        LineTo { x: 30.902  y: 50 },
        LineTo { x: 0       y: 26.394 },
        LineTo { x: -30.902 y: 50 },
        LineTo { x: -19.098 y: 11.804 },
        LineTo { x: -50     y: -11.804 },
        LineTo { x: -11.803 y: -11.804 },
        LineTo { x: 0       y: -50 }
    ]
};
 
// 花
var flower: Shape = Path {
    elements: [
        MoveTo { x: -0 y: -0},
        CubicCurveTo {
            x: -14.642 y: -25.36
            controlX1: 0 controlY1: 0
            controlX2: -14.642 controlY2: -17.36
        },
        ArcTo {
            x: 14.642 y: -25.36
            radiusX: 14.642 radiusY: 14.642
            sweepFlag: true
        },
        CubicCurveTo {
            x: 0 y: -0
            controlX1: 14.642 controlY1: -17.36
            controlX2: 0 controlY2: 0
        },
        CubicCurveTo {
            x: 25.36 y: -14.642
            controlX1: 0 controlY1: 0
            controlX2: 17.36 controlY2: -14.642
        },
        ArcTo {
            x: 25.36 y: 14.642
            radiusX: 14.642 radiusY: 14.642
            sweepFlag: true
        },
        CubicCurveTo {
            x: 0 y: 0
            controlX1: 17.36 controlY1: 14.642
            controlX2: 0 controlY2: 0
        },
        CubicCurveTo {
            x: 14.642 y: 25.36
            controlX1: 0 controlY1: 0
            controlX2: 14.642 controlY2: 17.36
        },
        ArcTo {
            sweepFlag: true
            x: -14.642 y: 25.36
            radiusX: 14.642 radiusY: 14.642
        },
        CubicCurveTo {
            x: -0 y: 0
            controlX1: -14.642 controlY1: 17.36
            controlX2: 0 controlY2: 0
        },
        CubicCurveTo {
            x: -25.36 y: 14.642
            controlX1: 0 controlY1: 0
            controlX2: -17.36 controlY2: 14.642
        },
        ArcTo {
            x: -25.36 y: -14.642
            radiusX: 14.642 radiusY: 14.642
            sweepFlag: true
        },
        CubicCurveTo {
            x: -0 y: -0
            controlX1: -17.36 controlY1: -14.642
            controlX2: 0 controlY2: 0
        }
    ]
}
 
// 円
var circle = Circle {
    centerX: 0 centerY: 0
    radius: 40
}
 
var shape: Shape;
var color: Color;
 
Stage {
    title: "Morphing Sample"
    scene: Scene {
        width: 200
        height: 200
        fill: LinearGradient {
            startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
            proportional: true
            stops: [
                Stop { offset: 0.0 color: Color.WHITE },
                Stop { offset: 0.5 color: Color.LIGHTGRAY }
            ]
        }
        content: DelegateShape {
            // モーフィングする対象
            shape: bind shape
 
            // 色もいっしょに変更する
            fill: bind color
 
            // ドロップシャドウ
            effect: DropShadow {
                offsetX: 5
                offsetY: 5
                radius: 5
            }
 
            translateX: 100
            translateY: 100
        }
    }
}
 
var timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            // 星
            time: 0s
            values: [
                shape => star,
                color => Color.YELLOW
            ]
        },
        KeyFrame {
            // 星から花
            time: 5s
            values: [
                shape => flower,
                color => Color.PINK
            ]
        },
        KeyFrame {
            // 花から丸
            time: 10s
            values: [
                shape => circle,
                color => Color.RED,
            ]
        },
        KeyFrame {
            // 丸から星
            time: 15s
            values: [
                shape => star,
                color => Color.YELLOW
            ]
        }
    ]
};
timeline.play();