style/values/computed/
easing.rs

1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5//! Computed types for CSS Easing functions.
6
7use euclid::approxeq::ApproxEq;
8
9use crate::bezier::Bezier;
10use crate::piecewise_linear::PiecewiseLinearFunction;
11use crate::values::computed::{Integer, Number};
12use crate::values::generics::easing::{self, BeforeFlag, StepPosition, TimingKeyword};
13
14/// A computed timing function.
15pub type ComputedTimingFunction = easing::TimingFunction<Integer, Number, PiecewiseLinearFunction>;
16
17/// An alias of the computed timing function.
18pub type TimingFunction = ComputedTimingFunction;
19
20impl ComputedTimingFunction {
21    fn calculate_step_output(
22        steps: i32,
23        pos: StepPosition,
24        progress: f64,
25        before_flag: BeforeFlag,
26    ) -> f64 {
27        // User specified values can cause overflow (bug 1706157). Increments/decrements
28        // should be gravefully handled.
29        let mut current_step = (progress * (steps as f64)).floor() as i32;
30
31        // Increment current step if it is jump-start or start.
32        if pos == StepPosition::Start
33            || pos == StepPosition::JumpStart
34            || pos == StepPosition::JumpBoth
35        {
36            current_step = current_step.checked_add(1).unwrap_or(current_step);
37        }
38
39        // If the "before flag" is set and we are at a transition point,
40        // drop back a step
41        if before_flag == BeforeFlag::Set
42            && (progress * steps as f64).rem_euclid(1.0).approx_eq(&0.0)
43        {
44            current_step = current_step.checked_sub(1).unwrap_or(current_step);
45        }
46
47        // We should not produce a result outside [0, 1] unless we have an
48        // input outside that range. This takes care of steps that would otherwise
49        // occur at boundaries.
50        if progress >= 0.0 && current_step < 0 {
51            current_step = 0;
52        }
53
54        // |jumps| should always be in [1, i32::MAX].
55        let jumps = if pos == StepPosition::JumpBoth {
56            steps.checked_add(1).unwrap_or(steps)
57        } else if pos == StepPosition::JumpNone {
58            steps.checked_sub(1).unwrap_or(steps)
59        } else {
60            steps
61        };
62
63        if progress <= 1.0 && current_step > jumps {
64            current_step = jumps;
65        }
66
67        (current_step as f64) / (jumps as f64)
68    }
69
70    /// The output of the timing function given the progress ratio of this animation.
71    pub fn calculate_output(&self, progress: f64, before_flag: BeforeFlag, epsilon: f64) -> f64 {
72        let progress = match self {
73            TimingFunction::CubicBezier { x1, y1, x2, y2 } => {
74                Bezier::calculate_bezier_output(progress, epsilon, *x1, *y1, *x2, *y2)
75            },
76            TimingFunction::Steps(steps, pos) => {
77                Self::calculate_step_output(*steps, *pos, progress, before_flag)
78            },
79            TimingFunction::LinearFunction(function) => function.at(progress as f32).into(),
80            TimingFunction::Keyword(keyword) => match keyword {
81                TimingKeyword::Linear => progress,
82                TimingKeyword::Ease => {
83                    Bezier::calculate_bezier_output(progress, epsilon, 0.25, 0.1, 0.25, 1.)
84                },
85                TimingKeyword::EaseIn => {
86                    Bezier::calculate_bezier_output(progress, epsilon, 0.42, 0., 1., 1.)
87                },
88                TimingKeyword::EaseOut => {
89                    Bezier::calculate_bezier_output(progress, epsilon, 0., 0., 0.58, 1.)
90                },
91                TimingKeyword::EaseInOut => {
92                    Bezier::calculate_bezier_output(progress, epsilon, 0.42, 0., 0.58, 1.)
93                },
94            },
95        };
96
97        // The output progress value of an easing function is a real number in the range:
98        // [-inf, inf].
99        // https://drafts.csswg.org/css-easing-1/#output-progress-value
100        //
101        // However, we expect to use the finite progress for interpolation and web-animations
102        // https://drafts.csswg.org/css-values-4/#interpolation
103        // https://drafts.csswg.org/web-animations-1/#dom-computedeffecttiming-progress
104        //
105        // So we clamp the infinite progress, per the spec issue:
106        // https://github.com/w3c/csswg-drafts/issues/8344
107        progress.min(f64::MAX).max(f64::MIN)
108    }
109}
style/values/computed/easing.rs

style/values/computed/
easing.rs
