add example for ease functions (#15703)

# Objective

- Followup to #15675 
- Add an example showcasing the functions

## Solution

- Add an example showcasing the functions
- Some of the functions from the interpolation crate are messed up,
fixed in #15706


![ease](https://github.com/user-attachments/assets/1f3b2b80-23d2-45c7-8b08-95b2e870aa02)

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: Joona Aalto <jondolf.dev@gmail.com>

Cargo.toml

@@ -1299,6 +1299,17 @@ description = "Bezier curve example showing a cube following a cubic curve"
 category = "Animation"
 wasm = true
 
+[[example]]
+name = "easing_functions"
+path = "examples/animation/easing_functions.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.easing_functions]
+name = "Easing Functions"
+description = "Showcases the built-in easing functions"
+category = "Animation"
+wasm = true
+
 [[example]]
 name = "custom_skinned_mesh"
 path = "examples/animation/custom_skinned_mesh.rs"

examples/README.md

@@ -200,6 +200,7 @@ Example | Description
 [Color animation](../examples/animation/color_animation.rs) | Demonstrates how to animate colors using mixing and splines in different color spaces
 [Cubic Curve](../examples/animation/cubic_curve.rs) | Bezier curve example showing a cube following a cubic curve
 [Custom Skinned Mesh](../examples/animation/custom_skinned_mesh.rs) | Skinned mesh example with mesh and joints data defined in code
+[Easing Functions](../examples/animation/easing_functions.rs) | Showcases the built-in easing functions
 [Morph Targets](../examples/animation/morph_targets.rs) | Plays an animation from a glTF file with meshes with morph targets
 [glTF Skinned Mesh](../examples/animation/gltf_skinned_mesh.rs) | Skinned mesh example with mesh and joints data loaded from a glTF file
 

examples/animation/easing_functions.rs

@@ -0,0 +1,178 @@
+//! Demonstrates the behavior of the built-in easing functions.
+
+use bevy::{prelude::*, sprite::Anchor};
+
+#[derive(Component)]
+struct SelectedEaseFunction(easing::EaseFunction, Color);
+
+fn main() {
+ App::new()
+ .add_plugins(DefaultPlugins)
+ .add_systems(Startup, setup)
+ .add_systems(Update, display_curves)
+ .run();
+}
+
+fn setup(mut commands: Commands) {
+ commands.spawn(Camera2d);
+
+ let text_style = TextStyle {
+ font_size: 10.0,
+ ..default()
+ };
+
+ for (i, functions) in [
+ easing::EaseFunction::QuadraticIn,
+ easing::EaseFunction::QuadraticOut,
+ easing::EaseFunction::QuadraticInOut,
+ easing::EaseFunction::CubicIn,
+ easing::EaseFunction::CubicOut,
+ easing::EaseFunction::CubicInOut,
+ easing::EaseFunction::QuarticIn,
+ easing::EaseFunction::QuarticOut,
+ easing::EaseFunction::QuarticInOut,
+ easing::EaseFunction::QuinticIn,
+ easing::EaseFunction::QuinticOut,
+ easing::EaseFunction::QuinticInOut,
+ easing::EaseFunction::CircularIn,
+ easing::EaseFunction::CircularOut,
+ easing::EaseFunction::CircularInOut,
+ easing::EaseFunction::ExponentialIn,
+ easing::EaseFunction::ExponentialOut,
+ easing::EaseFunction::ExponentialInOut,
+ easing::EaseFunction::SineIn,
+ easing::EaseFunction::SineOut,
+ easing::EaseFunction::SineInOut,
+ easing::EaseFunction::ElasticIn,
+ easing::EaseFunction::ElasticOut,
+ easing::EaseFunction::ElasticInOut,
+ easing::EaseFunction::BackIn,
+ easing::EaseFunction::BackOut,
+ easing::EaseFunction::BackInOut,
+ easing::EaseFunction::BounceIn,
+ easing::EaseFunction::BounceOut,
+ easing::EaseFunction::BounceInOut,
+ ]
+ .chunks(3)
+ .enumerate()
+ {
+ for (j, function) in functions.iter().enumerate() {
+ let color = Hsla::hsl(i as f32 / 10.0 * 360.0, 0.8, 0.75).into();
+ commands
+ .spawn((
+ Text2dBundle {
+ text: Text::from_section(
+ format!("{:?}", function),
+ TextStyle {
+ color,
+ ..text_style.clone()
+ },
+ ),
+ transform: Transform::from_xyz(
+ i as f32 * 125.0 - 1280.0 / 2.0 + 25.0,
+ -100.0 - ((j as f32 * 250.0) - 300.0),
+ 0.0,
+ ),
+ text_anchor: Anchor::TopLeft,
+ ..default()
+ },
+ SelectedEaseFunction(*function, color),
+ ))
+ .with_children(|p| {
+ p.spawn(SpriteBundle {
+ sprite: Sprite {
+ custom_size: Some(Vec2::new(5.0, 5.0)),
+ color,
+ ..default()
+ },
+ transform: Transform::from_xyz(110.0, 15.0, 0.0),
+ ..default()
+ });
+ p.spawn(SpriteBundle {
+ sprite: Sprite {
+ custom_size: Some(Vec2::new(4.0, 4.0)),
+ color,
+ ..default()
+ },
+ transform: Transform::from_xyz(0.0, 0.0, 0.0),
+ ..default()
+ });
+ });
+ }
+ }
+ commands.spawn(
+ TextBundle::from_section("", TextStyle::default()).with_style(Style {
+ position_type: PositionType::Absolute,
+ bottom: Val::Px(12.0),
+ left: Val::Px(12.0),
+ ..default()
+ }),
+ );
+}
+
+fn display_curves(
+ mut gizmos: Gizmos,
+ ease_functions: Query<(&SelectedEaseFunction, &Transform, &Children)>,
+ mut transforms: Query<&mut Transform, Without<SelectedEaseFunction>>,
+ mut ui: Query<&mut Text, With<Node>>,
+ time: Res<Time>,
+) {
+ let samples = 100;
+ let size = 100.0;
+ let duration = 2.5;
+ let time_margin = 0.5;
+
+ let now = ((time.elapsed_seconds() % (duration + time_margin * 2.0) - time_margin) / duration)
+ .clamp(0.0, 1.0);
+
+ ui.single_mut().sections[0].value = format!("Progress: {:.2}", now);
+
+ for (SelectedEaseFunction(function, color), transform, children) in &ease_functions {
+ // Draw a box around the curve
+ gizmos.linestrip_2d(
+ [
+ Vec2::new(transform.translation.x, transform.translation.y + 15.0),
+ Vec2::new(
+ transform.translation.x + size,
+ transform.translation.y + 15.0,
+ ),
+ Vec2::new(
+ transform.translation.x + size,
+ transform.translation.y + 15.0 + size,
+ ),
+ Vec2::new(
+ transform.translation.x,
+ transform.translation.y + 15.0 + size,
+ ),
+ Vec2::new(transform.translation.x, transform.translation.y + 15.0),
+ ],
+ color.darker(0.4),
+ );
+
+ // Draw the curve
+ let f = easing::EasingCurve::ease(*function);
+ gizmos.linestrip_2d(
+ (0..(samples + 1)).map(|i| {
+ let t = i as f32 / samples as f32;
+ let sampled = f.sample(t).unwrap();
+ Vec2::new(
+ t * size + transform.translation.x,
+ sampled * size + transform.translation.y + 15.0,
+ )
+ }),
+ *color,
+ );
+
+ // Show progress along the curve for the current time
+ let y = f.sample(now).unwrap() * size + 15.0;
+ transforms.get_mut(children[0]).unwrap().translation.y = y;
+ transforms.get_mut(children[1]).unwrap().translation = Vec3::new(now * size, y, 0.0);
+ gizmos.linestrip_2d(
+ [
+ Vec2::new(transform.translation.x, transform.translation.y + y),
+ Vec2::new(transform.translation.x + size, transform.translation.y + y),
+ ],
+ color.darker(0.2),
+ );
+ }
+}