How-To's > How do I move objects in a straight line?

Use either a "translate" transition or a timeline to move objects in a straight line.

The TranslateTransition class inherits from the Timeline class, but it is a more convenient way to do simple animation.

Timelines can achieve the same result but are better used to coordinate the timing of complex animation. Timelines minimally contain two components:

• Key frames, which define the position of the object at the beginning, end, and any intermediate states
• An interpolation method, which specifies the type of motion that will occur between one key frame and the next

Example Code

The following code shows a blue rectangle moving horizontally with a Translate transition, and an orange rectangle moving along an identical horizontal path with a timeline.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.animation.transition.TranslateTransition;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

// Code for the Translate transition
def node = Rectangle {
    translateX: 10 y: 40
    height: 50 width:  50
    fill: Color.web("#1F6592")
    }

def transTransition = TranslateTransition {
    duration: 10s
    node: node
    toX: 210
    repeatCount:1
    autoReverse: false
}
transTransition.play();

// Code for the timeline
var slider1: Number = 10;
def rect =  Rectangle {
    translateX: bind slider1  //Horizontal position comes from the keyframes
    y: 120   //Vertical position is constant
    width: 50,
    height: 50
    fill: Color.web("#FD8500")
}

def t1 = Timeline {
    repeatCount: 1
    autoReverse: false
    keyFrames: [
        KeyFrame {
            time: 0s
            values: [
                slider1 => 10
            ]
        }
        KeyFrame {
            time: 10s
            values: [
                slider1 => 210 tween Interpolator.EASEBOTH
            ]
        }
    ]
};
t1.play();

// Display both the Translate transition and timeline rectangles
Stage {
    title: "Animated Square"
    width: 300
    height: 200
    scene: Scene {
        content: [
            node, rect
        ]
    }
}
 
  

Tips

• In the TranslateTransition class, the toX and toY variables move the object to coordinates specified in the value. The byX and byY variables move the object the number of pixels specified in the value. This means that the byX anc byY variables can have negative values. In the previous code example, substituting toX:210 with byX:-10 moves the upper rectangle from right to left.
• The toX and toY variables operate on the translateX and translateY variables of the shape. The byX and byY variables operate on either the translateX and translateY variables or the x and y coordinates.

Translate Transition Examples

• Easy Animations With the Animated Transitions
  Contains a variety of transitions, including the Translate transition.
• Animating Shapes Along a Path
  Uses the TranslateTransition class to move waves from right to left in the sailboat sample.
• JavaFX Flickr Client
  Shows an example of using TranslateTransition and RotateTransition simultaneously by embedding them in ParallelTransition.

Timeline Examples

• Building GUI Applications With JavaFX, Lesson 7: Creating Animated Objects
  A tutorial on how to create a basic timeline with straight movement along both the x and y coordinates at the same time to create the perception of random movement.

API Documentation

• TranslateTransition
• Timeline
• KeyFrame
• Interpolator

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

---