The rectangle does not translate in JavaFX 2

Question

I am making a simple animation whereby I attempt to move a rectangle around my screen and convert it to a circle.

Although the shape changes, the rectangle does not translate. I have double checked the KeyFrame and KeyValues of animation but I cant seem to figure it out.

SSCCE:

package anim;

import java.awt.GraphicsDevice;
import java.awt.GraphicsEnvironment;

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.animation.TimelineBuilder;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.StackPaneBuilder;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.RectangleBuilder;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;

public class AroundTheScreen extends Application{

    GraphicsDevice gd = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice();

    int screenWidth = gd.getDisplayMode().getWidth();
    int screenHeight = gd.getDisplayMode().getHeight();

    int rectWidth = screenWidth / 6;
    int rectHeight = screenHeight / 6;

    Rectangle rectangle;
    Timeline animation;
    Scene theScene;

    KeyFrame topRight;
    KeyFrame botRight;
    KeyFrame botLeft;
    KeyFrame topLeft;

    StackPane pane;

    DoubleProperty movableX = new SimpleDoubleProperty(0.0);
    DoubleProperty movableY = new SimpleDoubleProperty(0.0);
    DoubleProperty arcHt =  new SimpleDoubleProperty(0.0);
    DoubleProperty arcWd = new SimpleDoubleProperty(0.0);

    @Override
    public void start(Stage stage) throws Exception {
        pane = StackPaneBuilder
                .create()
                .alignment(Pos.TOP_LEFT)
                .build();

        theScene = SceneBuilder
                    .create()
                    .width(screenWidth)
                    .height(screenHeight)
                    .root(pane)
                    .build();

        rectangle = RectangleBuilder
                    .create()
                    .width(rectWidth)
                    .height(rectHeight)
                    .fill(Color.rgb(128, 128, 128, 0.5))
                    .effect(new Reflection())
                    .build();

        rectangle.xProperty().bind(movableX);
        rectangle.yProperty().bind(movableY);
        rectangle.arcWidthProperty().bind(arcWd);
        rectangle.arcHeightProperty().bind(arcHt);

        topRight = new KeyFrame(new Duration(2000),
                                new KeyValue(arcWd,rectangle.getWidth()),
                                new KeyValue(arcHt,rectangle.getHeight()),
                                new KeyValue(movableX,screenWidth));

        botRight = new KeyFrame(new Duration(4000),
                                new KeyValue(arcWd,rectangle.getWidth()),
                                new KeyValue(arcHt,rectangle.getHeight()),
                                new KeyValue(movableY,screenHeight));

        botLeft = new KeyFrame(new Duration(6000),
                               new KeyValue(arcWd,rectangle.getWidth()),
                               new KeyValue(arcHt,rectangle.getHeight()),
                               new KeyValue(movableX,screenWidth));


        topLeft = new KeyFrame(new Duration(8000),
                   new KeyValue(arcWd,0),
                   new KeyValue(arcHt,0),
                   new KeyValue(movableX, 0),
                   new KeyValue(movableY, 0));


        animation = TimelineBuilder
                .create()
                .keyFrames(
                        topRight,
                        botRight,
                        botLeft,
                        topLeft
                        )
                .cycleCount(Timeline.INDEFINITE)
                .autoReverse(true)
                .build();

        pane.getChildren().add(rectangle);

        stage.setScene(theScene);
        stage.sizeToScene();
        stage.initStyle(StageStyle.TRANSPARENT);
        theScene.setFill(Color.TRANSPARENT);

        stage.show();
        animation.play();
    }
    public static void main(String[] args) {
        Application.launch("anim.AroundTheScreen");
    }
}  

Help me animate it using Timeline

Answer 1

You put rectangle into StackPane which automatically relocates all content to the center of the pane. Thus all your modification to xProperty ant yProperty are ignored.

Use Pane instead.