r/JavaFX

I've been working on Lottie4J, a JavaFX library to play Lottie animations, and one persistent problem was that some animations looked noticeably different from the official web player, even when no exceptions were thrown, and the code seemed fine.

This post covers the work I did to actually measure and close that gap:

New comparison workflow

The old approach used a JavaFX WebView running lottie-web as a reference, which it turns out doesn't fully support the latest player. I switched to dotlottie-wc (thorvg), the engine LottieFiles is now standardizing on, rendered via a headless Chrome instance. Reference images are committed to the repo and each test run diffs every frame of the JavaFX output against them. This runs headless on GitHub Actions using JavaFX 26's new headless rendering support.

Rendering fixes

With concrete diffs to work from, the problem areas became obvious:

• Gradients: alpha/colour stops merged at union offsets, linear-RGB stops densified
• Mattes: inverted-alpha matte type (tt: 2) now handled correctly
• Easing: ported lottie-web's BezierEaser, added bisection fallback for flat-point curves
• Blur, blend modes, text colour — all improved

Most animations now hit 99.5%+ similarity. The toughest file is still at 95.2%.

Full write-up: https://webtechie.be/post/closing-the-visual-gap-between-the-official-lottie-webplayer-and-lottie4j/

GitHub: https://github.com/lottie4j/lottie4j

If you have a Lottie animation that renders differently than you'd expect in JavaFX, I'd love to hear about it. Please, open an issue with the JSON and the differences you have seen between expected and JavaFX rendered.

I've released FX Flow 0.6.1, a JavaFX utility library focused on declarative UI construction, and reducing boilerplate around models, validation and reactive UI updates. See the end of this post for a full example.

Some highlights since the 0.5 release:

Validation feedback directly from domains

Domains can now contain Rules, which is a predicate associated with a Template explaining why a value is invalid. All built-in domain factory methods now provide validation messages. Domains can provide templates for out of range values, misaligned values, missing values, non matching values (regex), etc.

Together with the new ValidationEvent, AbstractMarkerPane and ValidationMarkerPane, validation feedback can be surfaced in the UI without wiring validation logic directly into controls. See the ValidationSampleApplication.

Coordinated observable updates

A new UpdatableValue type allows multiple values to be updated atomically, ensuring listeners never observe intermediate state because the listeners of the individual properties are only fired until all values have been updated:

// Create two updatable values (similar to properties):
UpdatableValue<String> firstName = UpdatableValue.of("Jane");
UpdatableValue<String> lastName = UpdatableValue.of("Smith");

// Observe them:
Observe.values(firstName, lastName)
    .subscribe((fn, ln) -> System.out.println(fn + " " + ln));  // prints "Jane Smith"

// Modify both properties at once:
UpdatableValue.set(
    firstName, "John",
    lastName, "Doe"
);

In this example, it will initially print Jane Smith followed by John Doe. The subscriber only sees the final (John, Doe) state. If you put a direct ChangeListener on one of these properties (and then use get to read the value of the other) you will not observe a temporary incorrect combination either (so you will never see Jane Doe or John Smith).

The advantage of using Observe.subscribe with multiple values is convenience, and that you also get notified if only one of the values changed (ie. from John Doe to John Miller) without having to manually monitor both properties.

Feedback and suggestions are welcome.

GitHub: https://github.com/int4-org/FX/releases

Full example:

public class ValidationSampleApplication extends Application {

  public static void main(String[] args) {
    Application.launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
    StringModel name = StringModel.of(Domain.regex("[A-Z][a-z]+", Template.of("custom.startsWithCapital")));
    IntegerModel age = IntegerModel.of(null, Domain.bounded(18, 120));

    /*
     * Create a scene with a ValidationMarkerPane as the root. Markers will be overlaid
     * on the controls within the pane:
     */

    Scene scene = Scenes.create(
      ValidationMarkerPane.of().onMarkerCreated(this::installTooltip).content(
        Panes.vbox("form").nodes(
          Panes.grid("grid")
            .row("Name", FX.textField().promptText("Name (e.g. John)").model(name))
            .row("Age", FX.textField().promptText("Age (18-120)").model(age)),
          FX.button().text("Submit")
            .enable(Observe.booleans(name.valid(), age.valid()).allTrue())
        )
      )
    );

    /*
     * Add some basic styling.
     */

    scene.getStylesheets().add(StyleSheets.inline(
      """
      .form {
        -fx-padding: 2em;
        -fx-spacing: 1.5em;
        -fx-alignment: top-center;
      }
      .grid {
        -fx-hgap: 1em;
        -fx-vgap: 1em;
      }
      """
    ));

    primaryStage.setScene(scene);
    primaryStage.setTitle("Validation Marker Sample");
    primaryStage.sizeToScene();
    primaryStage.show();
  }

  private void installTooltip(Marker marker) {
    marker.validationIssueProperty().subscribe(issue -> {
      Tooltip tooltip = marker.getTooltip();

      if(tooltip == null) {
        tooltip = new Tooltip();

        marker.setTooltip(tooltip);
      }

      tooltip.setText(switch(issue) {
        case ValidationIssue.Invalid(Object _, Template template) -> toMessage(template);
        case ValidationIssue.Incompatible(Template template) -> toMessage(template);
      });
    });
  }

  static String toMessage(Template template) {
    return MessageFormat.format(
      switch(template.key()) {
        case "domain.missing" -> "Must not be empty";
        case "domain.invalid" -> "Must be a valid value";
        case "domain.notContained" -> "Must be one of {0}";
        case "domain.noMatch" -> "Must match regular expression {0}";
        case "domain.outOfRange" -> "Must be between {0} and {1}";
        case "domain.misaligned" -> "Must be a multiple of {1} starting from {0}";
        case "conversion.incompatible" -> "Must be a compatible value";
        case "custom.startsWithCapital" -> "Must consist of two or more letters and start with a capital";
        default -> "Invalid (" + template.key() + ")";
      },
      template.args().values().toArray()
    );
  }
}

I interviewed David Gutierrez, a Spanish mathematician who built JMathAnim during the COVID lockdowns. He's not a trained developer, which makes this project even more interesting. He needed a tool that didn't exist in Java, knew Java well enough, and just... built it.

JMathAnim is inspired by Manim (the Python library behind a lot of 3Blue1Brown-style content) and lets you create animated math visualizations entirely in code. You can animate LaTeX formulas morphing step by step, build geometric visualizations, generate fractals, simulate cell growth, and export everything directly to video. No intermediate steps.

Under the hood, it uses a JavaFX Canvas for rendering, JLatexMath for the LaTeX side, and JavaCV for video export. There's also a built-in code editor with syntax highlighting via RSyntaxTextArea, which makes it accessible without needing a full IDE setup.

One design choice that surprised me: the interactive editor uses Ruby as the scripting language, not Java. Practical decision, it fits well with the short expressive scripts you write to define animation sequences.

David's own admission is that JavaFX had a learning curve for him. But the result speaks for itself. The base-10 to base-5 conversion example in the video is a good demo of what this kind of tool can do for education.

Video + write-up: https://webtechie.be/post/javafx-in-action-%2327-with-david-gutierrez-about-jmathanim-to-create-mathematical-animations/

Source code is on Codeberg: https://codeberg.org/davidgutierrezrubio/jmathanim