docs/bevy/examples/animation/easing_functions.rs 5.7 K · 183 lines · raw · history

1 //! Demonstrates the behavior of the built-in easing functions.
2
3 use bevy::prelude::*;
4
5 #[derive(Component)]
6 #[require(Visibility, Transform)]
7 struct EaseFunctionPlot(EaseFunction, Color);
8
9 fn main() {
10 App::new()
11 .add_plugins(DefaultPlugins)
12 .add_systems(Startup, setup)
13 .add_systems(Update, display_curves)
14 .run();
15 }
16
17 const COLS: usize = 12;
18 const EXTENT: Vec2 = Vec2::new(1172.0, 520.0);
19 const PLOT_SIZE: Vec2 = Vec2::splat(80.0);
20
21 fn setup(mut commands: Commands) {
22 commands.spawn(Camera2d);
23
24 let text_font = TextFont {
25 font_size: FontSize::Px(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.spawn((
88 EaseFunctionPlot(*function, color),
89 Transform::from_xyz(
90 -half_extent.x + EXTENT.x / (COLS - 1) as f32 * col as f32,
91 half_extent.y - EXTENT.y / (max_rows - 1) as f32 * row as f32,
92 0.0,
93 ),
94 children![
95 (
96 Sprite::from_color(color, Vec2::splat(5.0)),
97 Transform::from_xyz(half_size.x + 5.0, -half_size.y, 0.0),
98 ),
99 (
100 Sprite::from_color(color, Vec2::splat(4.0)),
101 Transform::from_xyz(-half_size.x, -half_size.y, 0.0),
102 ),
103 (
104 Text2d(format!("{function:?}")),
105 text_font.clone(),
106 TextColor(color),
107 Transform::from_xyz(0.0, -half_size.y - 15.0, 0.0),
108 )
109 ],
110 ));
111 }
112 }
113 commands.spawn((
114 Text::default(),
115 Node {
116 position_type: PositionType::Absolute,
117 top: px(12),
118 left: px(12),
119 ..default()
120 },
121 ));
122 }
123
124 fn display_curves(
125 mut gizmos: Gizmos,
126 ease_functions: Query<(&EaseFunctionPlot, &Transform, &Children)>,
127 mut transforms: Query<&mut Transform, Without<EaseFunctionPlot>>,
128 mut ui_text: Single<&mut Text>,
129 time: Res<Time>,
130 ) {
131 let samples = 100;
132 let duration = 2.5;
133 let time_margin = 0.5;
134
135 let now = ((time.elapsed_secs() % (duration + time_margin * 2.0) - time_margin) / duration)
136 .clamp(0.0, 1.0);
137
138 ui_text.0 = format!("Progress: {now:.2}");
139
140 for (EaseFunctionPlot(function, color), transform, children) in &ease_functions {
141 let center = transform.translation.xy();
142 let half_size = PLOT_SIZE / 2.0;
143
144 // Draw a box around the curve
145 gizmos.linestrip_2d(
146 [
147 center + half_size,
148 center + half_size * Vec2::new(-1., 1.),
149 center + half_size * Vec2::new(-1., -1.),
150 center + half_size * Vec2::new(1., -1.),
151 center + half_size,
152 ],
153 color.darker(0.4),
154 );
155
156 // Draw the curve
157 let f = EasingCurve::new(0.0, 1.0, *function);
158 let drawn_curve = f
159 .by_ref()
160 .graph()
161 .map(|(x, y)| center - half_size + Vec2::new(x, y) * PLOT_SIZE);
162 gizmos.curve_2d(
163 &drawn_curve,
164 drawn_curve.domain().spaced_points(samples).unwrap(),
165 *color,
166 );
167
168 // Show progress along the curve for the current time
169 let y = f.sample(now).unwrap() * PLOT_SIZE.y;
170 transforms.get_mut(children[0]).unwrap().translation.y = -half_size.y + y;
171 transforms.get_mut(children[1]).unwrap().translation =
172 -half_size.extend(0.0) + Vec3::new(now * PLOT_SIZE.x, y, 0.0);
173
174 // Show horizontal bar at y value
175 gizmos.linestrip_2d(
176 [
177 center - half_size + Vec2::Y * y,
178 center - half_size + Vec2::new(PLOT_SIZE.x, y),
179 ],
180 color.darker(0.2),
181 );
182 }
183 }