Add an example project demonstrating animation

[fgimian]

Hey there, I was struggling to find examples of doing animation with egui, especially when animating in two directions and using different times.

Thus I created a little project demonstrating the use of animate_value_with_time and clear_animations in case it's helpful to others getting started with egui. This project also provides a little exponential curve function I found on Stack Exchange which applies a curve to the animation to make it more natural.

I didn't file an issue on this as it's just an example project and I had already finished it 😄

Feel free to decline this PR if you don't wish to include the example.

Cheers Fotis

[fgimian]

Just want to open one more point up for discussion. The only reason I needed the curve is to counteract the effect of linear_f32_from_gamma_u8 which causes the result not to be a smooth linear fade.

In my own little app, I used a helper like this instead which does a completely linear transform of RGB based on alpha:

fn apply_alpha(color: Color32, alpha: f32) -> Color32 {
    let r = color::linear_f32_from_linear_u8(color.r()) * alpha;
    let r = color::linear_u8_from_linear_f32(r);

    let g = color::linear_f32_from_linear_u8(color.g()) * alpha;
    let g = color::linear_u8_from_linear_f32(g);

    let b = color::linear_f32_from_linear_u8(color.b()) * alpha;
    let b = color::linear_u8_from_linear_f32(b);

    let a = color::linear_f32_from_linear_u8(color.a()) * alpha;
    let a = color::linear_u8_from_linear_f32(a);

    Color32::from_rgba_premultiplied(r, g, b, a)
}

I'm happy to take suggestions for how to better accomplish this in the example and remove the use of fn curve.

Cheers Fotis

[fgimian]

Rebased against master just now. Would love your feedback on the way alpha is applied as per my comment above and I can then adjust this PR. 😄

[fgimian]

@emilk Really appreciate your feedback as it helped me understand the animation system further in egui and simplify the code heavily.

I've pushed a new commit now which only leaves 4 fields in the app struct:

• rectangle_id: The id of the rectangle. If there is a neater way to compute this, please let me know.
• animate_direction: The current animation direction.
• fade_in_time and fade_out_time: Independent fade in and fade out times which may be configured. This is one of the main points I wanted to demonstrate as I didn't see it shown anywhere when I was learning egui.

Since you do already have examples of animation, feel free to close this without merging if you feel they are adequate.

Cheers Fotis