FX

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

• Using Transitions to Simplify JavaFX Animations
  Contains sample code that uses the TranslateTransition class to create a scrollable text component.
• Animating Shapes Along a Path
  Uses the Translatetransition class to move waves from right to left in the sailboat sample.
• Incorporating Media Assets Into JavaFX Applications
  Presents code for a media player application that uses the Translatetransition class to build a slide-out panel. In particular, see the page Applying Graphics Assets to Media in that tutorial.
• 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.
• Animation Basics for JavaFX Beginners
  A more detailed tutorial for beginners on how timelines work.

API Documentation

• TranslateTransition
• Timeline
• KeyFrame
• Interpolator

Last Updated: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.