RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 17:47:44 +00:00
Code Issues Activity Actions

LibWeb: Add a TimingFunction struct implementing the Web Easing spec

Browse source 
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:
Matthew Olsson 2023-11-04 11:48:31 -07:00 • committed by Andreas Kling
parent 1850652881
commit 66bd75f2b9
3 changed files with 233 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

60
Userland/Libraries/LibWeb/Animations/TimingFunction.h Normal file
View 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 } };
}