From 0f82fb41443d35d6c1d6cc842b91e91ce9b55b6e Mon Sep 17 00:00:00 2001 From: Aleksander Date: Sat, 20 Sep 2025 13:10:18 +0200 Subject: [PATCH] wgui: make hover effects more responsive (remove fade-in duration, use cubic interpolation) --- wgui/src/animation.rs | 27 ++++++++++++++------------- wgui/src/components/button.rs | 26 +++++++------------------- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/wgui/src/animation.rs b/wgui/src/animation.rs index a00205a..8a057ec 100644 --- a/wgui/src/animation.rs +++ b/wgui/src/animation.rs @@ -8,8 +8,12 @@ use crate::{ pub enum AnimationEasing { Linear, - InQuad, - OutQuad, + InQuad, // ^2 + InCubic, // ^3 + InQuint, // ^5 + OutQuad, // ^2 + OutCubic, // ^3 + OutQuint, // ^5 OutBack, InBack, } @@ -18,8 +22,12 @@ impl AnimationEasing { fn interpolate(&self, x: f32) -> f32 { match self { Self::Linear => x, - Self::InQuad => x * x, - Self::OutQuad => 1.0 - (1.0 - x) * (1.0 - x), + Self::InQuad => x.powi(2), + Self::InCubic => x.powi(3), + Self::InQuint => x.powi(5), + Self::OutQuad => 1.0 - (1.0 - x).powi(2), + Self::OutCubic => 1.0 - (1.0 - x).powi(3), + Self::OutQuint => 1.0 - (1.0 - x).powi(5), Self::OutBack => { let a = 1.7; let b = a + 1.0; @@ -60,12 +68,7 @@ pub struct Animation { } impl Animation { - pub fn new( - target_widget: WidgetID, - ticks: u32, - easing: AnimationEasing, - callback: AnimationCallback, - ) -> Self { + pub fn new(target_widget: WidgetID, ticks: u32, easing: AnimationEasing, callback: AnimationCallback) -> Self { Self::new_ex(target_widget, 0, ticks, easing, callback) } @@ -141,9 +144,7 @@ impl Animations { anim.ticks_remaining -= 1; } - self - .running_animations - .retain(|anim| anim.ticks_remaining > 0); + self.running_animations.retain(|anim| anim.ticks_remaining > 0); } pub fn process(&mut self, state: &LayoutState, alterables: &mut EventAlterables, alpha: f32) { diff --git a/wgui/src/components/button.rs b/wgui/src/components/button.rs index 64d90f6..57bc800 100644 --- a/wgui/src/components/button.rs +++ b/wgui/src/components/button.rs @@ -102,24 +102,11 @@ fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) rect.params.border = 2.0; } -fn anim_hover_in(data: Rc, state: Rc>, widget_id: WidgetID) -> Animation { - Animation::new( - widget_id, - 2, - AnimationEasing::OutQuad, - Box::new(move |common, anim_data| { - let rect = anim_data.obj.get_as_mut::().unwrap(); - anim_hover(rect, &data, anim_data.pos, state.borrow().down); - common.alterables.mark_redraw(); - }), - ) -} - fn anim_hover_out(data: Rc, state: Rc>, widget_id: WidgetID) -> Animation { Animation::new( widget_id, - 8, - AnimationEasing::OutQuad, + 15, + AnimationEasing::OutCubic, Box::new(move |common, anim_data| { let rect = anim_data.obj.get_as_mut::().unwrap(); anim_hover(rect, &data, 1.0 - anim_data.pos, state.borrow().down); @@ -140,10 +127,11 @@ fn register_event_mouse_enter( EventListenerKind::MouseEnter, Box::new(move |common, event_data, _, _| { common.alterables.trigger_haptics(); - common - .alterables - .animate(anim_hover_in(data.clone(), state.clone(), event_data.widget_id)); - state.borrow_mut().hovered = true; + common.alterables.mark_redraw(); + let rect = event_data.obj.get_as_mut::().unwrap(); + let mut state = state.borrow_mut(); + anim_hover(rect, &data, 1.0, state.down); + state.hovered = true; Ok(()) }), );