- javafxgui workspace
- sandbox/demotest/AnimationTest
- run

Press Start and immediately slide the Duration slider back and forth a few times. Wait for the animation to stop.

Expected:
    The square should return back to its initial position
Actual:
    The square returns to a different position.

This is a regression. It doesn't seem to be the same issue as JFXC-1920 (since an older build without JFXC-1920 still showed a problem). But JFXC-1920 appears to make the problem worse.

This issue does not occur with the preview release. Here's a version of the code ported to the preview release:

package animationtest;

import javafx.scene.paint.Color;
import javafx.ext.swing.Slider;
import javafx.ext.swing.Label;
import javafx.ext.swing.CheckBox;
import javafx.ext.swing.Canvas;
import javafx.ext.swing.FlowPanel;
import javafx.ext.swing.Button;
import javafx.ext.swing.ToggleGroup;
import javafx.ext.swing.RadioButton;
import javafx.ext.swing.SwingFrame;
import javafx.ext.swing.BorderPanel;
import javafx.scene.geometry.Rectangle;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.lang.Duration;

import java.lang.Object;
import java.lang.System;

var interpolate = Interpolator.LINEAR;

var x = 0;
var y = 0.0;
var w = 50.0;
var h = 50.0;
var color = Color.LIME;
var opacity = 1.0;

var durSlider =
    Slider {
        minimum: 1400
        maximum: 3000
        value: 2000
    }
var dur = Duration { millis: bind durSlider.value }
//var dur = bind Duration.valueOf(durSlider.value);
var durLabel = Label { text: bind "Dur {dur.toMillis() as Integer}ms:" }

var repSlider =
    Slider {
        minimum: 0
        maximum: 4
        value: 2
    }
var rep = bind repSlider.value;
var repLabel = Label { text: bind "Repeat {rep}:" }

var autoRevCheckBox =
    CheckBox {
        text: "Auto Reverse"
        selected: true
    }

var toggleCheckBox =
    CheckBox {
        text: "Toggle"
        selected: false
    }

var t = Timeline {
    repeatCount: bind rep
    autoReverse: bind autoRevCheckBox.selected
    toggle: bind toggleCheckBox.selected
    keyFrames: [
    KeyFrame {
        time: 0s
        values: x => 0
    },
    KeyFrame {
        time: 700ms
        values: y => 0.0
        action: function() { System.err.println("Hello 1"); }
    },
    KeyFrame {
        time: 800ms
        values: color => Color.LIME
    },
    KeyFrame {
        time: 1s
        action: function() { System.err.println("Hello 2"); }
    },
    KeyFrame {
        time: 1.8s
        values: color => Color.RED tween Interpolator.EASEBOTH
    },
    KeyFrame {
        time: 1.1s
        timelines: [
        Timeline {
            keyFrames: [
            KeyFrame {
                time: 0s
                values: [
                    w => 50.0,
                    h => 50.0
                ]
            },
            KeyFrame {
                time: 0.3s
                values: [
                    w => 100.0 tween interpolate,
                    h => 80.0 tween interpolate
                ]
            }
            ]
        }
        ]
    },
    KeyFrame {
        time: bind dur
        values: [
            x => 400 tween interpolate,
            y => 200.0 tween interpolate
        ]
        action: function() { System.err.println("Hello 3"); }
    }
    ]
};

var fader = Timeline {
    toggle: true
    keyFrames: [
    KeyFrame {
        time: 0ms
        values: opacity => 1.0
    },
    KeyFrame {
        time: 250ms
        values: opacity => 0.4 tween Interpolator.LINEAR
    }
    ]
}

var canvas =
    Canvas {
        background: Color.WHITE
        content:
        Rectangle {
            x: bind x
            y: bind y
            width: bind w
            height: bind h
            fill: bind color
            opacity: bind opacity
            onMouseEntered: function(e) { fader.start(); }
            onMouseExited: function(e) { fader.start(); }
        }
    };

var buttons =
    FlowPanel {
        content: [
            Button {
                text: "Start"
                action: function():Void { t.start(); }
            },
            Button {
                text: "Stop"
                action: function():Void { t.stop(); }
                enabled: bind t.running
            },
            Button {
                text: "Pause"
                action: function():Void { t.pause(); }
                enabled: bind t.running and not t.paused
            },
            Button {
                text: "Resume"
                action: function():Void { t.resume(); }
                enabled: bind t.running and t.paused
            },
            autoRevCheckBox,
            toggleCheckBox
        ]
    };

var radios =
    FlowPanel {
        var group = ToggleGroup {}
        content: [
            RadioButton {
                selected: true
                toggleGroup: group
                text: "Linear"
                action: function() { interpolate = Interpolator.LINEAR; }
            },
            RadioButton {
                toggleGroup: group
                text: "EaseBoth"
                action: function() { interpolate = Interpolator.EASEBOTH; }
            },
            RadioButton {
                toggleGroup: group
                text: "EaseIn"
                action: function() { interpolate = Interpolator.EASEIN; }
            }
        ]
    };

var sliders = FlowPanel { content: [durLabel, durSlider, repLabel, repSlider] };

SwingFrame {
    closeAction: function() {System.exit(0);}
    width: 600
    height: 500
    visible: true
    content: BorderPanel {
        center: canvas
        bottom: BorderPanel {
            top: buttons
            center: radios
            bottom: sliders
        }
    }
}