mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 12:19:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Start transitions when affected properties change

Browse source 
Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
This commit is contained in:
Sam Atkins 2024-09-19 14:13:20 +01:00 • committed by Andreas Kling
commit a1fca1a7f3
Notes: github-actions[bot] 2024-09-22 04:42:46 +00:00
8 changed files with 380 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

72
Userland/Libraries/LibWeb/CSS/CSSTransition.cpp
View file

@ -1,22 +1,30 @@
/*
* Copyright (c) 2024, Matthew Olsson <mattco@serenityos.org>.
* Copyright (c) 2024, Matthew Olsson <mattco@serenityos.org>
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Animations/DocumentTimeline.h>
#include <LibWeb/Bindings/CSSTransitionPrototype.h>
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSStyleDeclaration.h>
#include <LibWeb/CSS/CSSTransition.h>
#include <LibWeb/CSS/Interpolation.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
#include <LibWeb/HTML/Scripting/TemporaryExecutionContext.h>
namespace Web::CSS {
JS_DEFINE_ALLOCATOR(CSSTransition);
JS::NonnullGCPtr<CSSTransition> CSSTransition::create(JS::Realm& realm, PropertyID property_id, size_t transition_generation)
JS::NonnullGCPtr<CSSTransition> CSSTransition::start_a_transition(DOM::Element& element, PropertyID property_id, size_t transition_generation,
double start_time, double end_time, NonnullRefPtr<CSSStyleValue const> start_value, NonnullRefPtr<CSSStyleValue const> end_value,
NonnullRefPtr<CSSStyleValue const> reversing_adjusted_start_value, double reversing_shortening_factor)
{
return realm.heap().allocate<CSSTransition>(realm, realm, property_id, transition_generation);
auto& realm = element.realm();
return realm.heap().allocate<CSSTransition>(realm, realm, element, property_id, transition_generation, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor);
}
Animations::AnimationClass CSSTransition::animation_class() const
@ -67,16 +75,53 @@ Optional<int> CSSTransition::class_specific_composite_order(JS::NonnullGCPtr<Ani
return {};
}
CSSTransition::CSSTransition(JS::Realm& realm, PropertyID property_id, size_t transition_generation)
CSSTransition::CSSTransition(JS::Realm& realm, DOM::Element& element, PropertyID property_id, size_t transition_generation,
double start_time, double end_time, NonnullRefPtr<CSSStyleValue const> start_value, NonnullRefPtr<CSSStyleValue const> end_value,
NonnullRefPtr<CSSStyleValue const> reversing_adjusted_start_value, double reversing_shortening_factor)
: Animations::Animation(realm)
, m_transition_property(property_id)
, m_transition_generation(transition_generation)
, m_start_time(start_time)
, m_end_time(end_time)
, m_start_value(move(start_value))
, m_end_value(move(end_value))
, m_reversing_adjusted_start_value(move(reversing_adjusted_start_value))
, m_reversing_shortening_factor(reversing_shortening_factor)
, m_keyframe_effect(Animations::KeyframeEffect::create(realm))
{
// FIXME:
// Transitions generated using the markup defined in this specification are not added to the global animation list
// when they are created. Instead, these animations are appended to the global animation list at the first moment
// when they transition out of the idle play state after being disassociated from their owning element. Transitions
// that have been disassociated from their owning element but are still idle do not have a defined composite order.
set_start_time(start_time - element.document().timeline()->current_time().value());
// Construct a KeyframesEffect for our animation
m_keyframe_effect->set_target(&element);
m_keyframe_effect->set_start_delay(start_time);
m_keyframe_effect->set_iteration_duration(m_end_time - start_time);
m_keyframe_effect->set_timing_function(element.property_transition_attributes(property_id)->timing_function);
auto key_frame_set = adopt_ref(*new Animations::KeyframeEffect::KeyFrameSet);
Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame initial_keyframe;
initial_keyframe.properties.set(property_id, m_start_value);
Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame final_keyframe;
final_keyframe.properties.set(property_id, m_end_value);
key_frame_set->keyframes_by_key.insert(0, initial_keyframe);
key_frame_set->keyframes_by_key.insert(100 * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor, final_keyframe);
m_keyframe_effect->set_key_frame_set(key_frame_set);
set_timeline(element.document().timeline());
set_owning_element(element);
set_effect(m_keyframe_effect);
element.associate_with_animation(*this);
element.set_transition(m_transition_property, *this);
HTML::TemporaryExecutionContext context(element.document().relevant_settings_object());
play().release_value_but_fixme_should_propagate_errors();
}
void CSSTransition::initialize(JS::Realm& realm)
@ -89,6 +134,25 @@ void CSSTransition::visit_edges(Cell::Visitor& visitor)
{
Base::visit_edges(visitor);
visitor.visit(m_cached_declaration);
visitor.visit(m_keyframe_effect);
}
double CSSTransition::timing_function_output_at_time(double t) const
{
auto progress = (t - transition_start_time()) / (transition_end_time() - transition_start_time());
// FIXME: Is this before_flag value correct?
bool before_flag = t < transition_start_time();
return m_keyframe_effect->timing_function().evaluate_at(progress, before_flag);
}
NonnullRefPtr<CSSStyleValue const> CSSTransition::value_at_time(double t) const
{
// https://drafts.csswg.org/css-transitions/#application
auto progress = timing_function_output_at_time(t);
auto result = interpolate_property(*m_keyframe_effect->target(), m_transition_property, m_start_value, m_end_value, progress);
if (result)
return result.release_nonnull();
return m_start_value;
}
}