Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 13:40:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add support for remaining animation and transition events

Browse source 
Fixes #21564.
This commit is contained in:
Martin Robinson 2020-05-26 20:34:58 +02:00
parent 47642e0eee
commit 77aa3721c5
28 changed files with 493 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/atoms/static_atoms.txt
View file

@ -2,6 +2,7 @@ DOMContentLoaded
abort
activate
addtrack
animationcancel
animationend
animationiteration
animationstart
@ -132,6 +133,7 @@ track
transitioncancel
transitionend
transitionrun
transitionstart
unhandledrejection
unload
url

97
components/script/animations.rs
View file

@ -78,12 +78,15 @@ impl Animations {
let mut sets = self.sets.write();
for set in sets.values_mut() {
self.start_pending_animations(set, now, pipeline_id);
// When necessary, iterate our running animations to the next iteration.
for animation in set.animations.iter_mut() {
if animation.iterate_if_necessary(now) {
self.add_animation_event(
animation,
TransitionOrAnimationEventType::AnimationIteration,
now,
pipeline_id,
);
}
@ -97,7 +100,6 @@ impl Animations {
/// Processes any new animations that were discovered after reflow. Collect messages
/// that trigger events for any animations that changed state.
/// TODO(mrobinson): The specification dictates that this should happen before reflow.
pub(crate) fn do_post_reflow_update(&self, window: &Window, now: f64) {
let pipeline_id = window.pipeline_id();
let mut sets = self.sets.write();
@ -140,6 +142,39 @@ impl Animations {
.sum()
}
/// Walk through the list of pending animations and start all of the ones that
/// have left the delay phase.
fn start_pending_animations(
&self,
set: &mut ElementAnimationSet,
now: f64,
pipeline_id: PipelineId,
) {
for animation in set.animations.iter_mut() {
if animation.state == AnimationState::Pending && animation.started_at <= now {
animation.state = AnimationState::Running;
self.add_animation_event(
animation,
TransitionOrAnimationEventType::AnimationStart,
now,
pipeline_id,
);
}
}
for transition in set.transitions.iter_mut() {
if transition.state == AnimationState::Pending && transition.start_time <= now {
transition.state = AnimationState::Running;
self.add_transition_event(
transition,
TransitionOrAnimationEventType::TransitionStart,
now,
pipeline_id,
);
}
}
}
/// Walk through the list of running animations and remove all of the ones that
/// have ended.
fn finish_running_animations(
@ -154,6 +189,7 @@ impl Animations {
self.add_animation_event(
animation,
TransitionOrAnimationEventType::AnimationEnd,
now,
pipeline_id,
);
}
@ -192,7 +228,17 @@ impl Animations {
}
}
// TODO(mrobinson): We need to send animationcancel events.
for animation in &set.animations {
if animation.state == AnimationState::Canceled {
self.add_animation_event(
animation,
TransitionOrAnimationEventType::AnimationCancel,
now,
pipeline_id,
);
}
}
set.clear_canceled_animations();
}
@ -263,14 +309,21 @@ impl Animations {
now: f64,
pipeline_id: PipelineId,
) {
// Calculate the `elapsed-time` property of the event and take the absolute
// value to prevent -0 values.
let elapsed_time = match event_type {
TransitionOrAnimationEventType::TransitionRun |
TransitionOrAnimationEventType::TransitionStart => transition
.property_animation
.duration
.min((-transition.delay).max(0.)),
TransitionOrAnimationEventType::TransitionEnd => transition.property_animation.duration,
TransitionOrAnimationEventType::TransitionCancel => {
(now - transition.start_time).max(0.)
},
_ => unreachable!(),
};
}
.abs();
self.pending_events
.borrow_mut()
@ -291,6 +344,7 @@ impl Animations {
&self,
animation: &Animation,
event_type: TransitionOrAnimationEventType,
now: f64,
pipeline_id: PipelineId,
) {
let num_iterations = match animation.iteration_state {
@ -298,11 +352,25 @@ impl Animations {
KeyframesIterationState::Infinite(current) => current,
};
let active_duration = match animation.iteration_state {
KeyframesIterationState::Finite(_, max) => max * animation.duration,
KeyframesIterationState::Infinite(_) => std::f64::MAX,
};
// Calculate the `elapsed-time` property of the event and take the absolute
// value to prevent -0 values.
let elapsed_time = match event_type {
TransitionOrAnimationEventType::AnimationStart => {
(-animation.delay).max(0.).min(active_duration)
},
TransitionOrAnimationEventType::AnimationIteration |
TransitionOrAnimationEventType::AnimationEnd => num_iterations * animation.duration,
TransitionOrAnimationEventType::AnimationCancel => {
(num_iterations * animation.duration) + (now - animation.started_at).max(0.)
},
_ => unreachable!(),
};
}
.abs();
self.pending_events
.borrow_mut()
@ -333,10 +401,13 @@ impl Animations {
let event_atom = match event.event_type {
TransitionOrAnimationEventType::AnimationEnd => atom!("animationend"),
TransitionOrAnimationEventType::AnimationStart => atom!("animationstart"),
TransitionOrAnimationEventType::AnimationCancel => atom!("animationcancel"),
TransitionOrAnimationEventType::AnimationIteration => atom!("animationiteration"),
TransitionOrAnimationEventType::TransitionCancel => atom!("transitioncancel"),
TransitionOrAnimationEventType::TransitionEnd => atom!("transitionend"),
TransitionOrAnimationEventType::TransitionRun => atom!("transitionrun"),
TransitionOrAnimationEventType::TransitionStart => atom!("transitionstart"),
};
let parent = EventInit {
bubbles: true,
@ -381,25 +452,39 @@ pub enum TransitionOrAnimationEventType {
/// "The transitionrun event occurs when a transition is created (i.e., when it
/// is added to the set of running transitions)."
TransitionRun,
/// "The transitionstart event occurs when a transition’s delay phase ends."
TransitionStart,
/// "The transitionend event occurs at the completion of the transition. In the
/// case where a transition is removed before completion, such as if the
/// transition-property is removed, then the event will not fire."
TransitionEnd,
/// "The transitioncancel event occurs when a transition is canceled."
TransitionCancel,
/// "The animationstart event occurs at the start of the animation. If there is
/// an animation-delay then this event will fire once the delay period has expired."
AnimationStart,
/// "The animationiteration event occurs at the end of each iteration of an
/// animation, except when an animationend event would fire at the same time."
AnimationIteration,
/// "The animationend event occurs when the animation finishes"
AnimationEnd,
/// "The animationcancel event occurs when the animation stops running in a way
/// that does not fire an animationend event..."
AnimationCancel,
}
impl TransitionOrAnimationEventType {
/// Whether or not this event is a transition-related event.
pub fn is_transition_event(&self) -> bool {
match *self {
Self::TransitionRun | Self::TransitionEnd | Self::TransitionCancel => true,
Self::AnimationEnd | Self::AnimationIteration => false,
Self::TransitionRun |
Self::TransitionEnd |
Self::TransitionCancel |
Self::TransitionStart => true,
Self::AnimationEnd |
Self::AnimationIteration |
Self::AnimationStart |
Self::AnimationCancel => false,
}
}
}

102
components/style/animation.rs
View file

@ -139,17 +139,27 @@ impl PropertyAnimation {
/// This structure represents the state of an animation.
#[derive(Clone, Debug, MallocSizeOf, PartialEq)]
pub enum AnimationState {
/// The animation has been created, but is not running yet. This state
/// is also used when an animation is still in the first delay phase.
Pending,
/// This animation is currently running.
Running,
/// This animation is paused. The inner field is the percentage of progress
/// when it was paused, from 0 to 1.
Paused(f64),
/// This animation is currently running.
Running,
/// This animation has finished.
Finished,
/// This animation has been canceled.
Canceled,
}
impl AnimationState {
/// Whether or not this state requires its owning animation to be ticked.
fn needs_to_be_ticked(&self) -> bool {
*self == AnimationState::Running || *self == AnimationState::Pending
}
}
/// This structure represents a keyframes animation current iteration state.
///
/// If the iteration count is infinite, there's no other state, otherwise we
@ -174,7 +184,8 @@ pub struct Animation {
/// The internal animation from the style system.
pub keyframes_animation: KeyframesAnimation,
/// The time this animation started at.
/// The time this animation started at, which is the current value of the animation
/// timeline when this animation was created plus any animation delay.
pub started_at: f64,
/// The duration of this animation.
@ -273,9 +284,11 @@ impl Animation {
/// canceled due to changes in the style.
pub fn has_ended(&self, time: f64) -> bool {
match self.state {
AnimationState::Canceled | AnimationState::Paused(_) => return false,
AnimationState::Finished => return true,
AnimationState::Running => {},
AnimationState::Finished => return true,
AnimationState::Pending | AnimationState::Canceled | AnimationState::Paused(_) => {
return false
},
}
if !self.iteration_over(time) {
@ -312,24 +325,11 @@ impl Animation {
let old_direction = self.current_direction;
let old_state = self.state.clone();
let old_iteration_state = self.iteration_state.clone();
*self = other.clone();
let mut new_started_at = old_started_at;
// If we're unpausing the animation, fake the start time so we seem to
// restore it.
//
// If the animation keeps paused, keep the old value.
//
// If we're pausing the animation, compute the progress value.
match (&mut self.state, old_state) {
(&mut Running, Paused(progress)) => new_started_at = now - (self.duration * progress),
(&mut Paused(ref mut new), Paused(old)) => *new = old,
(&mut Paused(ref mut progress), Running) => {
*progress = (now - old_started_at) / old_duration
},
_ => {},
}
self.started_at = old_started_at;
self.current_direction = old_direction;
// Don't update the iteration count, just the iteration limit.
// TODO: see how changing the limit affects rendering in other browsers.
@ -342,8 +342,37 @@ impl Animation {
_ => {},
}
self.current_direction = old_direction;
self.started_at = new_started_at;
// Don't pause or restart animations that should remain finished.
// We call mem::replace because `has_ended(...)` looks at `Animation::state`.
let new_state = std::mem::replace(&mut self.state, Running);
if old_state == Finished && self.has_ended(now) {
self.state = Finished;
} else {
self.state = new_state;
}
// If we're unpausing the animation, fake the start time so we seem to
// restore it.
//
// If the animation keeps paused, keep the old value.
//
// If we're pausing the animation, compute the progress value.
match (&mut self.state, &old_state) {
(&mut Pending, &Paused(progress)) => {
self.started_at = now - (self.duration * progress);
},
(&mut Paused(ref mut new), &Paused(old)) => *new = old,
(&mut Paused(ref mut progress), &Running) => {
*progress = (now - old_started_at) / old_duration
},
_ => {},
}
// Try to detect when we should skip straight to the running phase to
// avoid sending multiple animationstart events.
if self.state == Pending && self.started_at <= now && old_state != Pending {
self.state = Running;
}
}
/// Update the given style to reflect the values specified by this `Animation`
@ -360,7 +389,7 @@ impl Animation {
let started_at = self.started_at;
let now = match self.state {
AnimationState::Running | AnimationState::Finished => {
AnimationState::Running | AnimationState::Pending | AnimationState::Finished => {
context.current_time_for_animations
},
AnimationState::Paused(progress) => started_at + duration * progress,
@ -551,9 +580,12 @@ pub struct Transition {
pub node: OpaqueNode,
/// The start time of this transition, which is the current value of the animation
/// timeline when this transition created.
/// timeline when this transition was created plus any animation delay.
pub start_time: f64,
/// The delay used for this transition.
pub delay: f64,
/// The internal style `PropertyAnimation` for this transition.
pub property_animation: PropertyAnimation,
@ -724,26 +756,25 @@ impl ElementAnimationSet {
}
/// Whether or not this state needs animation ticks for its transitions
/// or animations. New animations don't need ticks until they are no
/// longer marked as new.
/// or animations.
pub fn needs_animation_ticks(&self) -> bool {
self.animations
.iter()
.any(|animation| animation.state == AnimationState::Running && !animation.is_new) ||
self.transitions.iter().any(|transition| {
transition.state == AnimationState::Running && !transition.is_new
})
.any(|animation| animation.state.needs_to_be_ticked()) ||
self.transitions
.iter()
.any(|transition| transition.state.needs_to_be_ticked())
}
/// The number of running animations and transitions for this `ElementAnimationSet`.
pub fn running_animation_and_transition_count(&self) -> usize {
self.animations
.iter()
.filter(|animation| animation.state == AnimationState::Running)
.filter(|animation| animation.state.needs_to_be_ticked())
.count() +
self.transitions
.iter()
.filter(|transition| transition.state == AnimationState::Running)
.filter(|transition| transition.state.needs_to_be_ticked())
.count()
}
@ -870,8 +901,9 @@ impl ElementAnimationSet {
let mut new_transition = Transition {
node: opaque_node,
start_time: now + delay,
delay,
property_animation,
state: AnimationState::Running,
state: AnimationState::Pending,
is_new: true,
reversing_adjusted_start_value,
reversing_shortening_factor: 1.0,
@ -1040,7 +1072,7 @@ pub fn maybe_start_animations<E>(
let state = match box_style.animation_play_state_mod(i) {
AnimationPlayState::Paused => AnimationState::Paused(0.),
AnimationPlayState::Running => AnimationState::Running,
AnimationPlayState::Running => AnimationState::Pending,
};
let new_animation = Animation {