aa8793f6b4
# Objective - In #17743, attention was raised to the fact that we supported an unusual kind of step easing function. The author of the fix kindly provided some links to standards used in CSS. It would be desirable to support generally agreed upon standards so this PR here tries to implement an extra configuration option of the step easing function - Resolve #17744 ## Solution - Introduce `StepConfig` - `StepConfig` can configure both the number of steps and the jumping behavior of the function - `StepConfig` replaces the raw `usize` parameter of the `EasingFunction::Steps(usize)` construct. - `StepConfig`s default jumping behavior is `end`, so in that way it follows #17743 ## Testing - I added a new test per `JumpAt` jumping behavior. These tests replicate the visuals that can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps#description ## Migration Guide - `EasingFunction::Steps` now uses a `StepConfig` instead of a raw `usize`. You can replicate the previous behavior by replaceing `EasingFunction::Steps(10)` with `EasingFunction::Steps(StepConfig::new(10))`. --------- Co-authored-by: François Mockers <francois.mockers@vleue.com> Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com> |
||
|---|---|---|
| .. | ||
| BackIn.svg | ||
| BackInOut.svg | ||
| BackOut.svg | ||
| BothSteps.svg | ||
| BounceIn.svg | ||
| BounceInOut.svg | ||
| BounceOut.svg | ||
| CircularIn.svg | ||
| CircularInOut.svg | ||
| CircularOut.svg | ||
| CubicIn.svg | ||
| CubicInOut.svg | ||
| CubicOut.svg | ||
| Elastic.svg | ||
| ElasticIn.svg | ||
| ElasticInOut.svg | ||
| ElasticOut.svg | ||
| EndSteps.svg | ||
| ExponentialIn.svg | ||
| ExponentialInOut.svg | ||
| ExponentialOut.svg | ||
| Linear.svg | ||
| NoneSteps.svg | ||
| QuadraticIn.svg | ||
| QuadraticInOut.svg | ||
| QuadraticOut.svg | ||
| QuarticIn.svg | ||
| QuarticInOut.svg | ||
| QuarticOut.svg | ||
| QuinticIn.svg | ||
| QuinticInOut.svg | ||
| QuinticOut.svg | ||
| README.md | ||
| SineIn.svg | ||
| SineInOut.svg | ||
| SineOut.svg | ||
| SmootherStep.svg | ||
| SmootherStepIn.svg | ||
| SmootherStepOut.svg | ||
| SmoothStep.svg | ||
| SmoothStepIn.svg | ||
| SmoothStepOut.svg | ||
| StartSteps.svg | ||
EaseFunction
These graphs are auto-generated via tools/build-easefunction-graphs.