Bevy UI Animation

Rust Crate Docrs Bevy

A GSAP-like animation plugin for Bevy UI.

🌌 Features

🔮 Usage

To use this plugin, the first step is to add a dependency to your Cargo.toml:

toml [dependencies] bevy_ui_animation = "1.0.0"

Add the AnimationPlugin to your main.rs:

```rust use bevy::prelude::; use bevy_ui_animation::;

App::new() .addplugins(DefaultPlugins) .addplugin(AnimationPlugin) .run(); ```

Animate a bundle:

```rust use bevy::prelude::; use bevy_ui_animation::;

fn setup(mut commands: Commands) { commands.spawnbundle(UiCameraBundle::default()); commands .spawnbundle(NodeBundle { style: Style { size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), ..Default::default() }, color: UiColor(Color::BLUE), transform: Transform::default(), ..Default::default() }) .insert(Animation::new(Vars { style: Some(Style { size: Size::new(Val::Percent(50.0), Val::Percent(50.0)), ..Default::default() }), color: Some(UiColor(Color::RED)), transform: Some(Transform::fromrotation(Quat::fromrotationz( 180f32.to_radians(), ))), duration: 2.0, ease: Ease::ExpoOut, repeat: true, yoyo: true, ..Default::default() })); } ```

Preview:

preview

You can directly run this example by:

bash cargo run --example all --features="bevy/bevy_winit"

✳️ Vars

| Field | Type | Default | Description | | ------------------ | --------------------------- | --------- | --------------------------------------------------------------------------- | | style | Option<Style> | None | A Bevy Style component containing the destination fields to animate to. | | color | Option<UiColor> | None | A Bevy UiColor component containing the destination fields to animate to. | | transform | Option<Transform> | None | A Bevy Transform component containing the destination fields to animate to. | | transformrotation | Option<TransformRotation> | None | A struct to rotate a Bevy Transform component around a given fixed axis. | | textcolor | Option<TextColor> | None | A struct to lerp the color of a Bevy Text component | | delay | f32 | 0.0 | Amount of delay before the animation should begin (in seconds). | | duration | f32 | 0.5 | The duration of the animation (in seconds). | | ease | Ease | ExpoOut | The ease function to control the rate of change during the animation. | | repeat | bool | false | If true, the animation will keep repeating. | | yoyo | bool | false | If true, the animation will run in the opposite direction once finished. | | paused | bool | false | If true, the animation will pause itself immediately upon creation. |

📜 Animatable Components

| Name | Field | | --------- | ---------------- | | Style | position | | | margin | | | padding | | | border | | | size | | UiColor | color | | Transform | translation | | | rotation | | | scale | | Text | TextStyle::color |

📈 Ease

| Name | 0% | 50% | 100% | | ------------ | ---------- | ---------- | --------- | | BackIn | 0.0 | -0.375 | 1.0 | | BackInOut | 0.0 | 0.499 | 1.0 | | BackOut | -1.19e-7 | 1.375 | 1.0 | | BounceIn | 0.0 | 0.281 | 1.0 | | BounceInOut | 0.0 | 0.5 | 1.0 | | BounceOut | 0.0 | 0.718 | 1.0 | | ElasticIn | 0.0 | -4.29e-8 | 2.74e-6 | | ElasticInOut | 0.0 | 0.099 | 1.0 | | ElasticOut | 0.099 | 1.0 | 1.0 | | ExpoIn | 0.0 | 0.031 | 1.0 | | ExpoInOut | 0.0 | 0.5 | 1.0 | | ExpoOut | 0.0 | 0.968 | 1.0 | | Linear | 0.0 | 0.5 | 1.0 | | PowerIn | 0.0 | 0.25 | 1.0 | | PowerInOut | 0.0 | 0.5 | 1.0 | | PowerOut | 0.0 | 0.75 | 1.0 |

❇️ Compatibility

| bevy_ui_animation | bevy | | ------------------- | ------ | | 1.0 | 0.6 |

🙏 Thanks

🖋 Author

miZyind mizyind@gmail.com

📇 License

Licensed under the MIT License.