egui_animate 0.2.0

Custom egui animations and transitions
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

# egui_animate

## Egui Animate
Custom animations and transitions.

### Features

- *Out*/*in* `egui::Ui` element or variable transitioning.
- *Out* animations for hiding `egui::Ui` elements or variables.
- *In* animations for presenting `egui::Ui` elements or variables.
- Individual durations for *out*/*in* animation segments.
- Direct access to a scoped `&mut egui::Ui` for custom animations.

### Functionality

`egui_animate` offers simple, customizable animations based on state variables.
Define transitioning or individual *out*/*in* animations for entire ui interfaces,
and/or individual variables. Animations can be customized by providing your own
`fn(&mut egui::Ui, f32)` definitions that mutate a scoped `egui::Ui`. See the
example project for common animations/transitions.

### Animations

Animations define function(s) that mutate the `egui::Ui` given the normalized
progression of the animation (segment) between `0.0` and `1.0` (named *normal* in
examples). Calling [`animate`] will scope all `egui::Ui` mutations within. Animations
are triggered by mutations of the value passed to the `animate` function. Any variable
implementing `Default`, `PartialEq` and `Clone` is supported.

In the example below, an `egui::Label` is displayed by linearly mutating opacity
from `0.0` to `1.0` over a duration of 0.5 seconds. Animation begins when `show_ui`
is set to `true`.

```rust
// Animation definition
const FADE_IN: Animation = Animation::new_in(0.5, |ui, normal| ui.set_opacity(normal));

// Ui state.
let mut show_ui = false;

if ui.button("Click to show").clicked() {
    show_ui = true;
}

animate(
    ui,                // The `egui::Ui`.
    "anim",            // A *unique* name assigned to the animation layer.
    show_ui,           // The variable that will trigger animation on change.
    FADE_IN,           // The animation (for the current frame).
    |ui, show_ui| {    // The scoped `egui::Ui` that all mutations are applied to.
        if show_ui {
            // Show our label.
            ui.label("I am in scope");
        } else {
            // Show nothing.
        }
    },
);
```

The following animation transitions between interfaces, dynamically setting the
animation on input.

```rust
// Left and right slide animations. See the example project for definitions.
// const SLIDE_FADE_LEFT: Animation = ..;
// const SLIDE_FADE_RIGHT: Animation = ..;

#[derive(Default, Clone, Copy, PartialEq)]
enum MyMenu {
    #[default]
    MainMenu,
    Options,
}

// Store the menu state and the animation to dynamically change it on input.
let mut menu_state = MyMenu::MainMenu;
let mut menu_anim_state = SLIDE_FADE_LEFT;

animate(
    ui,
    "menu_anim",
    menu_state,
    menu_anim_state,
    |ui, menu| match menu {
        // Display the `MainMenu` interface.
        MyMenu::MainMenu => {
            if ui.button("Options").clicked() {
                // Slide left on click.
                menu_anim_state = SLIDE_FADE_LEFT;
                menu_state = MyMenu::Options;
            }
        }
        // Display the `Options` interface.
        MyMenu::Options => {
            ui.button("Option 1");
            ui.button("Option 2");
            if ui.button("Back").clicked() {
                // Slide right on click.
                menu_anim_state = SLIDE_FADE_RIGHT;
                menu_state = MyMenu::MainMenu;
            }
        }
    },
);
```

### Examples

An example app is provided that demonstrates various transitions including fading,
sliding, clipping, mutating text color, and easing.

```bash
cargo run --example example
```

License: MIT OR Apache-2.0