FX

Learn how to reverse animation for animation effects such as forward, backward, zoom in, zoom out, or fade in, fade out by using the rate variable of the Timeline class.

Here's a very simple application. Click the Reload button to start the application from the beginning. Click the Back button to reverse the animation.

The article Animation Basics for JavaFX Beginners showed how to create very basic animation by using an instance of the Timeline class. That example showed how to move objects from left to right and right to left by using KeyFrame instances in the timeline. The rate variable of the Timeline class provides a much more flexible way to control the direction and speed of animation. The default value for the rate is 1.0, which plays the animation in the forward direction at normal speed. To reverse the animation, you can simply set the rate value to -1.0. If you set the rate value to 2.0, you will get fast forward animation at twice the normal speed, and if set the rate value to -2.0, you will get fast reverse animation at twice the normal speed, and so on. In this example, a simple Back button is used to initiate the reverse animation.

package reverseanimation;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

import javafx.scene.control.Button;


var slider1 = 40.0; //variable for animation
var circlerate = 1.0; //variable for animation rate


var r1 = Timeline {  //Timeline for animation of circle
    repeatCount: 1
    rate: bind circlerate
    keyFrames: [
        KeyFrame {
            time: 5s
            canSkip: true
            values: [
                slider1 => 180.0 tween Interpolator.LINEAR
            ]

        }

    ]

};
r1.play();


Stage {
    title: "Simple Animation"
    width: 220
    height: 220
    scene: Scene {
        content: [

            Circle {  //Blue circle
                centerX: bind slider1
                centerY: 80
                radius: 20
                fill: Color.web("#0C60AE")
                effect: DropShadow {
                    offsetX: 3
                    offsetY: 3
                }

            }

            /* Reload button 1.2 */
            Button {
                translateX: 40,
                translateY: 135
                text: "Reload"
                action: function() {
                    circlerate = 1;  //Default direction
                    r1.playFromStart();
                }
            }

            /* Back button 1.2 */
            Button {
               translateX: 120,
                translateY: 135
                text: "Back"
                action: function() {
                    circlerate = -1;  //Reverse direction
                    r1.play();
                }
            }
        ]
    }
}

When rate = 1.0, animation will proceed as specified by the timeline. Animation with a timeline is covered in the article Animation Basics for JavaFX Beginners, so it won't be discussed here. Here's how rate is used to control animation of the Reload and Back buttons in this example:

• A variable is declared for the animation rate (arbitrarily called circlerate), and it is initialized to 1.0.
• The circlerate variable is bound to the rate variable in the timeline. The initial rate 1.0 sets the speed and direction to those specified in the timeline.
• The circlerate variable is used in the mouse events for the Reload and Back buttons, to define speed and direction of movement. When the Reload button is clicked, circlerate = 1.0 means that the circle will move forward at the same speed as the timeline. When the Back button is clicked, circlerate = -1.0 means that the circle will move backwards at the same speed as the timeline.

If the value 1.0 means the same speed specified in the KeyFrame instances in the timeline, then the value 2.0 means twice the speed, 0.5 means half the speed, and so on. The minus sign always reverses the direction of the animation defined in the timeline. To change the value of rate or circlerate, you can add a multiplier, for example: rate: bind circlerate * 2.

The rate variable is handy whenever the animation in your application moves back and forth, such as zoom in, zoom out, or back-and-forth rotation.

Try It

• Change the value of circlerate to vary the rate at which the circle moves forward and backward when the application initially runs or when you click Reload or Back. Try setting the Reload rate differently from that at which the application first runs.
• Work through the article on basic animation and add a Back button to the application that will reverse the animation.

Related Links

• Blog: 3D Frames in JavaFX! - Another example of using the rate variable to reverse animation.
• Sample: Effects Playground: Applying Filter Effects on Graphics - The rate variable is used in several classes to control the fade speed and direction of the UI buttons in the onMouseEntered and onMouseExited states.
• Sample: WhiteOut: A Fun Puzzle Game - See the fade.rate expressions for the mouse events in Model.fx and BlueButton.fx. The Timeline instance is assigned to the fade variable, so fade.rate controls the speed of the timeline in the mouse event.
• Sample: Dragging an MP3 Player Applet to the Desktop - The rate variable controls the direction of movement when the playlist button is expanded, and the fade-in and fade-out behavior of all the buttons when mousing in and out of the MP3 player.

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.