ui: add profile picture hover animation

I wanted to practice doing animation in egui, so here is a simple
profile picture hover affect. When you mouse over a profile picture, it
get slightly bigger.

Signed-off-by: William Casarin <jb55@jb55.com>
This commit is contained in:
William Casarin
2024-04-23 18:20:20 -07:00
parent 61deeb03e1
commit e8168b0004
6 changed files with 69 additions and 4 deletions

19
src/ui/anim.rs Normal file
View File

@@ -0,0 +1,19 @@
pub fn hover_expand(
ui: &mut egui::Ui,
id: egui::Id,
size: f32,
expand_size: f32,
anim_speed: f32,
) -> (egui::Rect, f32) {
// Allocate space for the profile picture with a fixed size
let default_size = size + expand_size;
let (rect, response) =
ui.allocate_exact_size(egui::vec2(default_size, default_size), egui::Sense::hover());
let val = ui
.ctx()
.animate_bool_with_time(id, response.hovered(), anim_speed);
let size = size + val * expand_size;
(rect, size)
}