Moving Objects Back and Forth in JavaFX | JavaFX Tutorials and How-To's

How-To's > How do I move objects back and forth?

You can move objects back and forth in two ways.

To move objects back and forth in a periodic manner, the easiest way is to use the autoReverse variable of the TranslateTransition or Timeline class. Use the repeatCount variable to determine the number of cycles.
To reverse movement and change the speed at the same time, use the rate variable of the Timeline class. For example, a value of 1.0 is normal play, -1.0 is backward play, and 2.0 is double-time play. The rate variable is useful when you want to control the moment at which the reverse animation begins, for example in response to a mouse click.

Example Code for `autoReverse`

The following screen capture and code create the back-and-forth movement of two rectangles. The blue rectangle, controlled by TranslateTransition, moves to the left and back to the right. The orange rectangle, controlled by Timeline, moves to the right and back to the left.

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;


// Use autoReverse and repeatCount in TranslateTransition
def node = Rectangle {
    translateX: 50 y: 40
    height: 50 width:  50
    fill: Color.web("#1F6592")
    }

def transTransition = TranslateTransition {
    duration: 5s
    node: node
    byX: -40
    repeatCount:Timeline.INDEFINITE
    autoReverse: true
}
transTransition.play();

var slider1: Number = 50;
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")
}

//Use Timeline
def t1 = Timeline {
   repeatCount:Timeline.INDEFINITE
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 0s
            values: [
                slider1 => 50
            ]
        }
        KeyFrame {
            time: 5s
            values: [
                slider1 => 90 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

For both transitions and timelines, auto reverse counts as one repetition. For example, repeatCount:2 autoReverse: true has one forward movement and one backward movement.

Example Code for `Timeline.rate`

Reverse Animation Easily Using the Rate Trick
This tech tip displays an applet and code that shows how to use the Timeline.rate variable to move an object back and forth.

FX

How-To's > How do I move objects back and forth?

Example Code for `autoReverse`

Tips

Example Code for `Timeline.rate`

API Documentation

Related How-To Topics

FX

How-To's > How do I move objects back and forth?

Example Code for autoReverse

Tips

Example Code for Timeline.rate

API Documentation

Related How-To Topics

Example Code for `autoReverse`

Example Code for `Timeline.rate`