JavaFX | MotionBlur Class

JavaFX is a powerful framework for building rich and interactive user interfaces in Java applications. It provides a wide range of features, including various visual effects that can enhance the user experience. One such effect is the MotionBlur class, which is part of the JavaFX javafx.scene.effect package. The MotionBlur effect simulates the blurring that occurs when an object is in motion, creating a sense of speed or movement in the scene.

In this blog, we will explore the MotionBlur class in detail, including its properties, common practices, best practices, and provide example usage to help you understand how to incorporate this effect into your JavaFX applications.

Table of Contents#

  1. Understanding the MotionBlur Class
  2. Properties of the MotionBlur Class
  3. Common Practices
  4. Best Practices
  5. Example Usage
  6. Conclusion
  7. References

Understanding the MotionBlur Class#

The MotionBlur class is a subclass of the Effect class in JavaFX. It is used to apply a motion blur effect to a node in a JavaFX scene. The motion blur effect creates a blurry trail in the direction of the motion, giving the illusion of movement.

The MotionBlur effect is achieved by convolving the input image with a kernel that represents the motion blur. The kernel is a matrix that defines the shape and intensity of the blur. The MotionBlur class allows you to control the angle and radius of the blur, which determines the direction and strength of the motion blur effect.

Properties of the MotionBlur Class#

The MotionBlur class has two main properties that you can use to customize the motion blur effect:

angle#

The angle property determines the direction of the motion blur. It is specified in degrees, where 0 degrees represents a horizontal blur to the right, 90 degrees represents a vertical blur downwards, 180 degrees represents a horizontal blur to the left, and 270 degrees represents a vertical blur upwards. The default value of the angle property is 0 degrees.

radius#

The radius property determines the strength of the motion blur. It is specified in pixels, and a larger radius value will result in a more intense blur effect. The default value of the radius property is 10 pixels.

Common Practices#

  • Applying the Effect to Nodes: To apply the MotionBlur effect to a node, you can use the setEffect method of the node. For example, if you have a Rectangle node, you can apply the motion blur effect as follows:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.MotionBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
 
public class MotionBlurExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        Rectangle rectangle = new Rectangle(100, 100, Color.BLUE);
        MotionBlur motionBlur = new MotionBlur();
        rectangle.setEffect(motionBlur);
 
        StackPane root = new StackPane(rectangle);
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("MotionBlur Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}
  • Animating the Effect: You can animate the angle and radius properties of the MotionBlur effect to create a dynamic motion blur effect. For example, you can use a Timeline to gradually increase the radius of the blur over time:
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.MotionBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
 
public class AnimatedMotionBlurExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        Rectangle rectangle = new Rectangle(100, 100, Color.RED);
        MotionBlur motionBlur = new MotionBlur();
        rectangle.setEffect(motionBlur);
 
        Timeline timeline = new Timeline(
                new KeyFrame(Duration.ZERO, e -> motionBlur.setRadius(0)),
                new KeyFrame(Duration.seconds(2), e -> motionBlur.setRadius(20))
        );
        timeline.setCycleCount(Animation.INDEFINITE);
        timeline.play();
 
        StackPane root = new StackPane(rectangle);
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("Animated MotionBlur Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Best Practices#

  • Performance Considerations: Applying a motion blur effect can be computationally expensive, especially if the radius is large or if the effect is applied to a large number of nodes. To improve performance, you can limit the use of the motion blur effect to only the necessary nodes and keep the radius value reasonable.
  • Combining with Other Effects: The MotionBlur effect can be combined with other JavaFX effects, such as DropShadow or Glow, to create more complex and visually appealing effects. For example, you can apply a DropShadow effect to a node and then apply a MotionBlur effect on top of it by using the Effect.setInput() method to chain the effects:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.MotionBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
 
public class CombinedEffectsExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        Rectangle rectangle = new Rectangle(100, 100, Color.GREEN);
 
        DropShadow dropShadow = new DropShadow();
        dropShadow.setColor(Color.GRAY);
        dropShadow.setRadius(10);
 
        MotionBlur motionBlur = new MotionBlur();
        motionBlur.setRadius(15);
        motionBlur.setInput(dropShadow);
 
        rectangle.setEffect(motionBlur);
 
        StackPane root = new StackPane(rectangle);
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("Combined Effects Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Example Usage#

Here is a more comprehensive example that demonstrates how to use the MotionBlur effect to create a simple animation of a moving rectangle with a motion blur effect:

import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.MotionBlur;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
 
public class MovingRectangleMotionBlurExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        Rectangle rectangle = new Rectangle(50, 50, Color.YELLOW);
        rectangle.setTranslateX(50);
        rectangle.setTranslateY(50);
 
        MotionBlur motionBlur = new MotionBlur();
        motionBlur.setRadius(10);
        motionBlur.setAngle(0);
        rectangle.setEffect(motionBlur);
 
        Timeline timeline = new Timeline(
                new KeyFrame(Duration.ZERO, e -> {
                    rectangle.setTranslateX(50);
                    motionBlur.setRadius(10);
                }),
                new KeyFrame(Duration.seconds(2), e -> {
                    rectangle.setTranslateX(200);
                    motionBlur.setRadius(20);
                })
        );
        timeline.setCycleCount(Animation.INDEFINITE);
        timeline.setAutoReverse(true);
        timeline.play();
 
        Pane root = new Pane(rectangle);
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("Moving Rectangle with MotionBlur Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

In this example, we create a rectangle and apply a MotionBlur effect to it. We then use a Timeline to animate the position of the rectangle and the radius of the motion blur effect. The animation runs indefinitely and reverses direction when it reaches the end.

Conclusion#

The MotionBlur class in JavaFX provides a simple and effective way to add a sense of motion and speed to your JavaFX applications. By controlling the angle and radius properties, you can customize the motion blur effect to suit your needs. Remember to consider performance when using the motion blur effect and experiment with combining it with other effects to create more complex and visually appealing scenes.

References#

2026-06