wip: rename Fade to Linear and add EaseOut cubic transition effect

iced-rs · May 15, 2023 · 5eb2cbf · 5eb2cbf
1 parent 72db32f
commit 5eb2cbf
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 43 deletions.
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
@@ -101,7 +101,7 @@ where
             font: Default::default(),
             style: Default::default(),
             animation_duration_ms: 150,
-            hover_animation_effect: AnimationEffect::Fade,
+            hover_animation_effect: AnimationEffect::EaseOut,
         }
     }
 

diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
@@ -86,7 +86,7 @@ where
             spacing: 0.0,
             font: Renderer::Font::default(),
             style: Default::default(),
-            animation_duration: 250,
+            animation_duration: 150,
             pressed_animation_effect: AnimationEffect::EaseOut,
         }
     }

diff --git a/style/src/animation.rs b/style/src/animation.rs
@@ -18,10 +18,12 @@ pub struct HoverPressedAnimation {
 /// The type of effect for the animation
 #[derive(Debug, Clone, Copy, PartialEq, Default)]
 pub enum AnimationEffect {
-    /// The background color of the widget fades into the other color when hovered or pressed
+    /// Transition is linear.
     #[default]
-    Fade,
-    /// The background color of the widget instantly changes into the other color when hovered or pressed
+    Linear,
+    /// Transition is a cubic ease out.
+    EaseOut,
+    /// Transistion is instantaneous.
     None,
 }
 
@@ -77,24 +79,44 @@ impl HoverPressedAnimation {
             } else {
                 // Evaluate new progress
                 match &mut self.effect {
-                    AnimationEffect::Fade => match self.direction {
-                        AnimationDirection::Forward => {
-                            let progress_since_start =
-                                ((now - started_at).as_millis() as f64)
-                                    / (animation_duration_ms as f64);
-                            self.animation_progress = (self.initial_progress
-                                + progress_since_start as f32)
-                                .clamp(0.0, 1.0);
+                    AnimationEffect::Linear => {
+                        let progress_since_start =
+                            ((now - started_at).as_millis() as f64)
+                                / (animation_duration_ms as f64);
+                        match self.direction {
+                            AnimationDirection::Forward => {
+                                self.animation_progress = (self
+                                    .initial_progress
+                                    + progress_since_start as f32)
+                                    .clamp(0.0, 1.0);
+                            }
+                            AnimationDirection::Backward => {
+                                self.animation_progress = (self
+                                    .initial_progress
+                                    - progress_since_start as f32)
+                                    .clamp(0.0, 1.0);
+                            }
                         }
-                        AnimationDirection::Backward => {
-                            let progress_since_start =
-                                ((now - started_at).as_millis() as f64)
-                                    / (animation_duration_ms as f64);
-                            self.animation_progress = (self.initial_progress
-                                - progress_since_start as f32)
+                    }
+                    AnimationEffect::EaseOut => {
+                        let progress_since_start =
+                            ((now - started_at).as_millis() as f32)
+                                / (animation_duration_ms as f32);
+                        match self.direction {
+                            AnimationDirection::Forward => {
+                                self.animation_progress = (self
+                                    .initial_progress
+                                    + ease_out_cubic(progress_since_start))
+                                .clamp(0.0, 1.0);
+                            }
+                            AnimationDirection::Backward => {
+                                self.animation_progress = (self
+                                    .initial_progress
+                                    - ease_out_cubic(progress_since_start))
                                 .clamp(0.0, 1.0);
+                            }
                         }
-                    },
+                    }
                     AnimationEffect::None => {}
                 }
             }
@@ -165,3 +187,9 @@ impl HoverPressedAnimation {
         self.animation_progress = 1.0;
     }
 }
+
+/// Based on Robert Penner's infamous easing equations, MIT license.
+fn ease_out_cubic(t: f32) -> f32 {
+    let p = t - 1f32;
+    p * p * p + 1f32
+}
diff --git a/style/src/theme.rs b/style/src/theme.rs
@@ -196,14 +196,17 @@ impl button::StyleSheet for Theme {
             (active.background, background.as_mut())
         {
             match hover_animation.effect {
-                animation::AnimationEffect::Fade => match active_background {
-                    Background::Color(active_background_color) => {
-                        background_color.mix(
-                            active_background_color,
-                            1.0 - hover_animation.animation_progress,
-                        );
+                animation::AnimationEffect::Linear
+                | animation::AnimationEffect::EaseOut => {
+                    match active_background {
+                        Background::Color(active_background_color) => {
+                            background_color.mix(
+                                active_background_color,
+                                1.0 - hover_animation.animation_progress,
+                            );
+                        }
                     }
-                },
+                }
                 animation::AnimationEffect::None => {}
             }
         }
@@ -239,14 +242,17 @@ impl button::StyleSheet for Theme {
             (active.background, background.as_mut())
         {
             match pressed_animation.effect {
-                animation::AnimationEffect::Fade => match active_background {
-                    Background::Color(active_background_color) => {
-                        background_color.mix(
-                            active_background_color,
-                            pressed_animation.animation_progress,
-                        );
+                animation::AnimationEffect::Linear
+                | animation::AnimationEffect::EaseOut => {
+                    match active_background {
+                        Background::Color(active_background_color) => {
+                            background_color.mix(
+                                active_background_color,
+                                pressed_animation.animation_progress,
+                            );
+                        }
                     }
-                },
+                }
                 animation::AnimationEffect::None => {}
             }
         }
@@ -646,7 +652,8 @@ impl radio::StyleSheet for Theme {
 
                 if is_selected {
                     match pressed_animation.effect {
-                        animation::AnimationEffect::Fade => {
+                        animation::AnimationEffect::Linear
+                        | animation::AnimationEffect::EaseOut => {
                             dot_color.mix(
                                 Color::TRANSPARENT,
                                 pressed_animation.animation_progress,
@@ -684,15 +691,17 @@ impl radio::StyleSheet for Theme {
 
                 // Mix the hovered and active styles backgrounds according to the animation state
                 match hover_animation.effect {
-                    animation::AnimationEffect::Fade => match active.background
-                    {
-                        Background::Color(active_background_color) => {
-                            background_color.mix(
-                                active_background_color,
-                                1.0 - hover_animation.animation_progress,
-                            );
+                    animation::AnimationEffect::Linear
+                    | animation::AnimationEffect::EaseOut => {
+                        match active.background {
+                            Background::Color(active_background_color) => {
+                                background_color.mix(
+                                    active_background_color,
+                                    1.0 - hover_animation.animation_progress,
+                                );
+                            }
                         }
-                    },
+                    }
                     animation::AnimationEffect::None => {}
                 }