easing_functions/
easing_functions.rs

1//! Demonstrates the behavior of the built-in easing functions.
2
3use bevy::prelude::*;
4
5#[derive(Component)]
6#[require(Visibility, Transform)]
7struct EaseFunctionPlot(EaseFunction, Color);
8
9fn main() {
10    App::new()
11        .add_plugins(DefaultPlugins)
12        .add_systems(Startup, setup)
13        .add_systems(Update, display_curves)
14        .run();
15}
16
17const COLS: usize = 12;
18const EXTENT: Vec2 = Vec2::new(1172.0, 520.0);
19const PLOT_SIZE: Vec2 = Vec2::splat(80.0);
20
21fn setup(mut commands: Commands) {
22    commands.spawn(Camera2d);
23
24    let text_font = TextFont {
25        font_size: 10.0,
26        ..default()
27    };
28
29    let chunks = [
30        // "In" row
31        EaseFunction::SineIn,
32        EaseFunction::QuadraticIn,
33        EaseFunction::CubicIn,
34        EaseFunction::QuarticIn,
35        EaseFunction::QuinticIn,
36        EaseFunction::SmoothStepIn,
37        EaseFunction::SmootherStepIn,
38        EaseFunction::CircularIn,
39        EaseFunction::ExponentialIn,
40        EaseFunction::ElasticIn,
41        EaseFunction::BackIn,
42        EaseFunction::BounceIn,
43        // "Out" row
44        EaseFunction::SineOut,
45        EaseFunction::QuadraticOut,
46        EaseFunction::CubicOut,
47        EaseFunction::QuarticOut,
48        EaseFunction::QuinticOut,
49        EaseFunction::SmoothStepOut,
50        EaseFunction::SmootherStepOut,
51        EaseFunction::CircularOut,
52        EaseFunction::ExponentialOut,
53        EaseFunction::ElasticOut,
54        EaseFunction::BackOut,
55        EaseFunction::BounceOut,
56        // "InOut" row
57        EaseFunction::SineInOut,
58        EaseFunction::QuadraticInOut,
59        EaseFunction::CubicInOut,
60        EaseFunction::QuarticInOut,
61        EaseFunction::QuinticInOut,
62        EaseFunction::SmoothStep,
63        EaseFunction::SmootherStep,
64        EaseFunction::CircularInOut,
65        EaseFunction::ExponentialInOut,
66        EaseFunction::ElasticInOut,
67        EaseFunction::BackInOut,
68        EaseFunction::BounceInOut,
69        // "Other" row
70        EaseFunction::Linear,
71        EaseFunction::Steps(4, JumpAt::End),
72        EaseFunction::Steps(4, JumpAt::Start),
73        EaseFunction::Steps(4, JumpAt::Both),
74        EaseFunction::Steps(4, JumpAt::None),
75        EaseFunction::Elastic(50.0),
76    ]
77    .chunks(COLS);
78
79    let max_rows = chunks.clone().count();
80
81    let half_extent = EXTENT / 2.;
82    let half_size = PLOT_SIZE / 2.;
83
84    for (row, functions) in chunks.enumerate() {
85        for (col, function) in functions.iter().enumerate() {
86            let color = Hsla::hsl(col as f32 / COLS as f32 * 360.0, 0.8, 0.75).into();
87            commands
88                .spawn((
89                    EaseFunctionPlot(*function, color),
90                    Transform::from_xyz(
91                        -half_extent.x + EXTENT.x / (COLS - 1) as f32 * col as f32,
92                        half_extent.y - EXTENT.y / (max_rows - 1) as f32 * row as f32,
93                        0.0,
94                    ),
95                ))
96                .with_children(|p| {
97                    // Marks the y value on the right side of the plot
98                    p.spawn((
99                        Sprite::from_color(color, Vec2::splat(5.0)),
100                        Transform::from_xyz(half_size.x + 5.0, -half_size.y, 0.0),
101                    ));
102                    // Marks the x and y value inside the plot
103                    p.spawn((
104                        Sprite::from_color(color, Vec2::splat(4.0)),
105                        Transform::from_xyz(-half_size.x, -half_size.y, 0.0),
106                    ));
107
108                    // Label
109                    p.spawn((
110                        Text2d(format!("{:?}", function)),
111                        text_font.clone(),
112                        TextColor(color),
113                        Transform::from_xyz(0.0, -half_size.y - 15.0, 0.0),
114                    ));
115                });
116        }
117    }
118    commands.spawn((
119        Text::default(),
120        Node {
121            position_type: PositionType::Absolute,
122            top: Val::Px(12.0),
123            left: Val::Px(12.0),
124            ..default()
125        },
126    ));
127}
128
129fn display_curves(
130    mut gizmos: Gizmos,
131    ease_functions: Query<(&EaseFunctionPlot, &Transform, &Children)>,
132    mut transforms: Query<&mut Transform, Without<EaseFunctionPlot>>,
133    mut ui_text: Single<&mut Text>,
134    time: Res<Time>,
135) {
136    let samples = 100;
137    let duration = 2.5;
138    let time_margin = 0.5;
139
140    let now = ((time.elapsed_secs() % (duration + time_margin * 2.0) - time_margin) / duration)
141        .clamp(0.0, 1.0);
142
143    ui_text.0 = format!("Progress: {:.2}", now);
144
145    for (EaseFunctionPlot(function, color), transform, children) in &ease_functions {
146        let center = transform.translation.xy();
147        let half_size = PLOT_SIZE / 2.0;
148
149        // Draw a box around the curve
150        gizmos.linestrip_2d(
151            [
152                center + half_size,
153                center + half_size * Vec2::new(-1., 1.),
154                center + half_size * Vec2::new(-1., -1.),
155                center + half_size * Vec2::new(1., -1.),
156                center + half_size,
157            ],
158            color.darker(0.4),
159        );
160
161        // Draw the curve
162        let f = EasingCurve::new(0.0, 1.0, *function);
163        let drawn_curve = f
164            .by_ref()
165            .graph()
166            .map(|(x, y)| center - half_size + Vec2::new(x, y) * PLOT_SIZE);
167        gizmos.curve_2d(
168            &drawn_curve,
169            drawn_curve.domain().spaced_points(samples).unwrap(),
170            *color,
171        );
172
173        // Show progress along the curve for the current time
174        let y = f.sample(now).unwrap() * PLOT_SIZE.y;
175        transforms.get_mut(children[0]).unwrap().translation.y = -half_size.y + y;
176        transforms.get_mut(children[1]).unwrap().translation =
177            -half_size.extend(0.0) + Vec3::new(now * PLOT_SIZE.x, y, 0.0);
178
179        // Show horizontal bar at y value
180        gizmos.linestrip_2d(
181            [
182                center - half_size + Vec2::Y * y,
183                center - half_size + Vec2::new(PLOT_SIZE.x, y),
184            ],
185            color.darker(0.2),
186        );
187    }
188}
easing_functions/easing_functions.rs

easing_functions/
easing_functions.rs
