mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 05:27:46 +00:00
LibWeb: Add a TimingFunction struct implementing the Web Easing spec
This is mostly a copy-paste of the algorithms already in StyleComputer with spec links and comments. The only thing that really changed is the handling of values outside of the range [0, 1] in the cubic bezier function. The implementation in StyleComputer will be removed in a later commit.
This commit is contained in:
parent
1850652881
commit
66bd75f2b9
3 changed files with 233 additions and 0 deletions
60
Userland/Libraries/LibWeb/Animations/TimingFunction.h
Normal file
60
Userland/Libraries/LibWeb/Animations/TimingFunction.h
Normal file
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Copyright (c) 2023, Ali Mohammad Pur <mpfard@serenityos.org>
|
||||
* Copyright (c) 2023, Matthew Olsson <mattco@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <AK/Function.h>
|
||||
#include <AK/Vector.h>
|
||||
|
||||
namespace Web::Animations {
|
||||
|
||||
// https://www.w3.org/TR/css-easing-1/#the-linear-easing-function
|
||||
struct LinearTimingFunction {
|
||||
double operator()(double t, bool) const;
|
||||
};
|
||||
|
||||
// https://www.w3.org/TR/css-easing-1/#cubic-bezier-easing-functions
|
||||
struct CubicBezierTimingFunction {
|
||||
double x1;
|
||||
double y1;
|
||||
double x2;
|
||||
double y2;
|
||||
|
||||
struct CachedSample {
|
||||
double x;
|
||||
double y;
|
||||
double t;
|
||||
};
|
||||
|
||||
mutable Vector<CachedSample, 64> m_cached_x_samples = {};
|
||||
|
||||
double operator()(double input_progress, bool) const;
|
||||
};
|
||||
|
||||
// https://www.w3.org/TR/css-easing-1/#step-easing-functions
|
||||
struct StepsTimingFunction {
|
||||
size_t number_of_steps;
|
||||
bool jump_at_start;
|
||||
bool jump_at_end;
|
||||
|
||||
double operator()(double input_progress, bool before_flag) const;
|
||||
};
|
||||
|
||||
struct TimingFunction {
|
||||
Variant<LinearTimingFunction, CubicBezierTimingFunction, StepsTimingFunction> function;
|
||||
|
||||
double operator()(double input_progress, bool before_flag) const;
|
||||
};
|
||||
|
||||
static TimingFunction linear_timing_function { LinearTimingFunction {} };
|
||||
// NOTE: Magic values from <https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease>
|
||||
static TimingFunction ease_timing_function { CubicBezierTimingFunction { 0.25, 0.1, 0.25, 1.0 } };
|
||||
static TimingFunction ease_in_timing_function { CubicBezierTimingFunction { 0.42, 0.0, 1.0, 1.0 } };
|
||||
static TimingFunction ease_out_timing_function { CubicBezierTimingFunction { 0.0, 0.0, 0.58, 1.0 } };
|
||||
static TimingFunction ease_in_out_timing_function { CubicBezierTimingFunction { 0.42, 0.0, 0.58, 1.0 } };
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue