pub enum Easing {
Show 27 variants
Linear,
InQuad,
OutQuad,
InOutQuad,
InCubic,
OutCubic,
InOutCubic,
InSine,
OutSine,
InOutSine,
InQuart,
OutQuart,
InOutQuart,
InQuint,
OutQuint,
InOutQuint,
InExpo,
OutExpo,
InOutExpo,
InCirc,
OutCirc,
InOutCirc,
InBack,
OutBack,
InOutBack,
Bezier(f32, f32, f32, f32),
Spline(&'static [[f32; 6]]),
}Expand description
How an animation moves from its start to its end: what fraction of the way it has gone at each fraction of its time.
Variants§
Linear
The same speed all the way.
InQuad
Starts slow.
OutQuad
Ends slow.
InOutQuad
Starts and ends slow.
InCubic
Starts slower.
OutCubic
Ends slower. The default: it settles gently, as most interface motion should.
InOutCubic
Starts and ends slower.
InSine
Starts slow, along a quarter sine wave.
OutSine
Ends slow, along a quarter sine wave.
InOutSine
Starts and ends slow, along half a sine wave.
InQuart
Starts slower than a cubic.
OutQuart
Ends slower than a cubic.
InOutQuart
Starts and ends slower than a cubic.
InQuint
Starts slower still.
OutQuint
Ends slower still.
InOutQuint
Starts and ends slower still.
InExpo
Barely moves, then rushes in: each tenth of the time doubles it.
OutExpo
Rushes out, then barely moves.
InOutExpo
Barely moves at both ends.
InCirc
Starts slow along a quarter circle.
OutCirc
Ends slow along a quarter circle.
InOutCirc
Starts and ends slow along quarter circles.
InBack
Pulls back about 10% behind the start, then goes.
OutBack
Runs about 10% past the end, then settles back.
InOutBack
Pulls back at the start and runs past the end.
Bezier(f32, f32, f32, f32)
A cubic Bézier from (0, 0) to (1, 1) through the control points
(x1, y1) and (x2, y2), as CSS’s cubic-bezier. The x values are
kept within 0 to 1.
Spline(&'static [[f32; 6]])
Cubic Bézier segments joined end to end, as Qt’s
Easing.BezierSpline. Each is [c1x, c1y, c2x, c2y, end_x, end_y]:
two control points and an end, starting from the previous end, the
first from (0, 0). The last must end at (1, 1), and the ends’ x
values must never go back. A spline that breaks either rule, is
empty, or holds a number that isn’t finite moves linearly instead.
A control point’s x is kept within its segment.
Material 3’s emphasized curve:
use crabshell_ui::{Easing, Transition};
const EMPHASIZED: Easing = Easing::Spline(&[
[0.05, 0.0, 0.133333, 0.06, 0.166666, 0.4],
[0.208333, 0.82, 0.25, 1.0, 1.0, 1.0],
]);
const ENTER: Transition = Transition::new(500).easing(EMPHASIZED);