How-To's > How do I rotate objects?


How you rotate nodes depends on whether you want to animate the rotation or display a rotated node without animation.

Nonanimated Rotation of a Node

An example of nonanimated rotation is a diamond, which is created from a rectangle rotated 45 degrees.

You can rotate a node In two ways:

  • Use the rotate variable, which all shapes inherit from the Node class. For an example of a diamond created with the rotate variable, see the topic How do I create a diamond?
  • Use the rotation transformation, as described in the following section.

Animated Rotation of a Node

You can animate a rotation in two ways:

  • Use the RotateTransition class in the javafx.animation.transition package to rotate an object through space for a specified duration.
  • Use the rotation transformation and apply an animation to it.

Example Code for RotateTransition

In the following example, a rectangle is rotated 180 degrees clockwise and back again. The image shows the rectangle when it is a little over halfway through its rotation.

Example of rotateTransition

import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.animation.transition.RotateTransition;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;

def node = Rectangle {
    x: 50
    y: 50
    width: 50
    height: 50
    fill:
        RadialGradient {
            stops: [
                Stop {
                    color: Color.web("#80CAFA")
                    offset: 0.0
                 }
                 Stop {
                     color: Color.web("#1F6592")
                     offset: 1.0
                  }
            ]
        }
};

def rotTransition = RotateTransition {
    duration: 10s node: node
    byAngle: 180 repeatCount: 2 autoReverse: true
}
rotTransition.play();

Stage {
    title: "RotateTransition"
    scene: Scene {
        width: 200
        height: 200
        content: node
    }
}

Note that auto reverse counts as one repetition. For example, repeatCount:2 autoReverse: true has one forward rotation and one backward rotation.

Example of RotateTransition

Example Code for the Rotation Transformation

The following code shows a rectangle that has been rotated to a diamond shape, with the pivot point in the center of the rectangle.

Various rotation transformations

import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.transform.Rotate;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

def x = 50;
def y = 50;
def width = 50;
def height = 50;
def rect = Rectangle {
    x: x
    y: y
    width: width
    height: height
    fill:
        RadialGradient {
            stops: [
                Stop {
                    color: Color.web("#80CAFA")
                    offset: 0.0
                 }
                 Stop {
                     color: Color.web("#1F6592")
                     offset: 1.0
                  }
            ]
        }
    transforms: Rotate { 
        angle: 45 
        pivotX: width/2+x
        pivotY: height/2+y
        }    
    //Equivalent code for the transforms variable:
    //transforms: Transform.rotate(45, width/2+x, height/2+y)
};

Stage {
    title: "Rotated Square"
    width: 300
    height: 200
    scene: Scene {
        content: [
            rect,
            Line {
                startX: 50
                startY: 20
                endX: 50
                endY: 140
            }
            Line {
                startX: 20
                startY: 50
                endX: 140
                endY: 50
            }
        ]
    }
}

The pivot points are calculated from the x and y position of the center of the rectangle in the scene graph, which in this example is x: 75, y: 75. The Transform.rotate() function can be used as an abbreviation for the Rotate class, as shown in the comment lines in the previous code.

Animating a Rotated Node

To following code shows a rotated rectangle that is animated back and forth along the x coordinate space. Note that there is a difference when you animate a node transformed with the Rotate transformation and the rotate variable of the Node class, as shown in the following diagram. When you apply the Rotate transformation, the coordinate space rotates with the object, and when you animate the object along the x coordinate, the object moves at a 45-degree angle. When you apply Node.rotate, the object rotates, but the coordinate space is still horizontal for x and vertical for y.

To see the difference in the animation, try out the following code using either the Rotate transformation or the Node.rotate variable.

Rotation transformation, animated

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.transform.Transform;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

var x= 50;
var y= 50;
def rectangle = Rectangle {
    x: bind x
    y: bind y
    width: 50
    height: 50
    fill:
        RadialGradient {
            stops: [
                Stop {
                    color: Color.web("#80CAFA")
                    offset: 0.0
                 }
                 Stop {
                     color: Color.web("#1F6592")
                     offset: 1.0
                  }
             ]
        }
    //rotate: 45
   transforms: Transform.rotate(45,75,75)
};

def t = Timeline {
    repeatCount:Timeline.INDEFINITE
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 0s
            values: [
                x => 20,
            ]
        }
        KeyFrame {
            time: 2s
            values: [
                x => 180 tween Interpolator.LINEAR
            ]
        }
        ]
};
t.play();

Stage {
    title: "Animated Diamond"
    width: 300
    height: 200
    scene: Scene {
        content: rectangle
    }
}

Examples Using the Rotate Transformation

API Documentation

Last Updated: April 2010
[Return to How-To's Home]