Skip to content

Commit

Permalink
animations: Don't convert linear easing to a bezier
Browse files Browse the repository at this point in the history
This conversion can lead to floating point errors and extra work when
computing animations. Avoiding it allows animation-iteration-count-009.html
to pass.
  • Loading branch information
mrobinson committed Jun 24, 2020
1 parent 954b517 commit cf45100
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 19 deletions.
14 changes: 11 additions & 3 deletions components/style/animation.rs
Expand Up @@ -27,7 +27,9 @@ use crate::stylesheets::keyframes_rule::{KeyframesAnimation, KeyframesStep, Keyf
use crate::values::animated::{Animate, Procedure};
use crate::values::computed::{Time, TimingFunction};
use crate::values::generics::box_::AnimationIterationCount;
use crate::values::generics::easing::{StepPosition, TimingFunction as GenericTimingFunction};
use crate::values::generics::easing::{
StepPosition, TimingFunction as GenericTimingFunction, TimingKeyword,
};
use crate::Atom;
use fxhash::FxHashMap;
use parking_lot::RwLock;
Expand Down Expand Up @@ -125,8 +127,14 @@ impl PropertyAnimation {
(current_step as f64) / (jumps as f64)
},
GenericTimingFunction::Keyword(keyword) => {
let (x1, x2, y1, y2) = keyword.to_bezier();
Bezier::new(x1, x2, y1, y2).solve(progress, epsilon)
let bezier = match keyword {
TimingKeyword::Linear => return progress,
TimingKeyword::Ease => Bezier::new(0.25, 0.1, 0.25, 1.),
TimingKeyword::EaseIn => Bezier::new(0.42, 0., 1., 1.),
TimingKeyword::EaseOut => Bezier::new(0., 0., 0.58, 1.),
TimingKeyword::EaseInOut => Bezier::new(0.42, 0., 0.58, 1.),
};
bezier.solve(progress, epsilon)
},
}
}
Expand Down
16 changes: 0 additions & 16 deletions components/style/values/generics/easing.rs
Expand Up @@ -6,7 +6,6 @@
//! https://drafts.csswg.org/css-easing/#timing-functions

use crate::parser::ParserContext;
use crate::values::CSSFloat;

/// A generic easing function.
#[derive(
Expand Down Expand Up @@ -118,18 +117,3 @@ impl<Integer, Number> TimingFunction<Integer, Number> {
TimingFunction::Keyword(TimingKeyword::Ease)
}
}

impl TimingKeyword {
/// Returns the keyword as a quadruplet of Bezier point coordinates
/// `(x1, y1, x2, y2)`.
#[inline]
pub fn to_bezier(self) -> (CSSFloat, CSSFloat, CSSFloat, CSSFloat) {
match self {
TimingKeyword::Linear => (0., 0., 1., 1.),
TimingKeyword::Ease => (0.25, 0.1, 0.25, 1.),
TimingKeyword::EaseIn => (0.42, 0., 1., 1.),
TimingKeyword::EaseOut => (0., 0., 0.58, 1.),
TimingKeyword::EaseInOut => (0.42, 0., 0.58, 1.),
}
}
}

0 comments on commit cf45100

Please sign in to comment.