CSS Transitions

[John Hendrikx]

Just a few questions inline:

On 11/07/2023 21:52, Michael Strauß wrote:
> Easing Functions
> ----------------
> CSS Transitions specifies the `transition-timing-function`
> sub-property to define easing functions (see CSS Easing Functions
> [4]). Here is a list of all easing functions available in CSS Easing
> Functions:
>
> * linear
> * ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)
> * step-start, step-end, steps(intervals, step-position)
>
> Easing functions are implemented using `javafx.animation.Interpolator`
> in JavaFX. While it may seem straightforward to re-use existing
> interpolator implementations like `Interpolator.EASE_IN`,
> `Interpolator.EASE_OUT`, etc., the definitions of those interpolators
> don't match the definitions of CSS Easing Functions. In order to
> maximize compatibility with CSS Transitions, implicit transitions use
> the CSS definitions, not the SMIL 3.0 definitions of the existing
> interpolator implementations.
Should this also provide fx-ease-in (etc) if you want to be compatible 
with other FX animations instead of CSS ones (which have little meaning 
in FX apps) ?
> Note that step-wise interpolators are only available for CSS
> Transitions, they are not exposed as new public API in the
> `javafx.animation` framework. The reason for this is that step-wise
> interpolators accept negative input values and can produce different
> results depending on their `step-position` parameter (for details on
> that, see "2.3.1. Output of a step easing function" [5]).

I would think that an Interpolator still has a defined begin and end 
state, regardless if it is step based or a smooth transition. Perhaps 
I'm misunderstanding something here about the step based transitions, 
but I don't see why the fraction value running from 0 to 1 would be 
incompatible with step based transitions.  The following interpolator 
would create 10 discrete steps:

     new Interpolator() {
         @Override
         protected double curve(double t) {
             return Math.floor(t * 10) / 10;    // 10 steps
         }
     };

Add some parameters, and make adjustments for the various CSS jump 
types, whether ceil/floor should be used, etc, and I think it could 
implement the CSS step variants as well.

--John