Add animations example

Author: lazytanuki

Cargo.lock

@@ -67,6 +67,8 @@ auto-detect-theme = ["iced_core/auto-detect-theme"]
 strict-assertions = ["iced_renderer/strict-assertions"]
 # Redraws on every runtime event, and not only when a widget requests it
 unconditional-rendering = ["iced_winit/unconditional-rendering"]
+# Enables widget animations
+animations = ["iced_widget/animations"]
 
 [dependencies]
 iced_core.workspace = true

Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "animations"
+version = "0.1.0"
+authors = ["LazyTanuki"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced.workspace = true
+iced.features = ["animations"]

examples/animations/Cargo.toml

@@ -0,0 +1,12 @@
+# Animations
+
+An application to showcase Iced widgets that have default animations.
+
+The __[`main`]__ file contains all the code of the example.
+
+You can run it with `cargo run`:
+```
+cargo run --package animations
+```
+
+[`main`]: src/main.rs

examples/animations/README.md

@@ -0,0 +1,49 @@
+use iced::{
+    widget::{column, Toggler},
+    Element, Task, Theme,
+};
+
+pub fn main() -> iced::Result {
+    iced::application("Animated widgets", Animations::update, Animations::view)
+        .theme(Animations::theme)
+        .run()
+}
+
+#[derive(Default)]
+struct Animations {
+    toggled: bool,
+}
+
+#[derive(Debug, Clone)]
+enum Message {
+    Toggle(bool),
+}
+
+impl Animations {
+    fn update(&mut self, message: Message) -> Task<Message> {
+        match message {
+            Message::Toggle(t) => {
+                self.toggled = t;
+                Task::none()
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let main_text = iced::widget::text(
+            "You can find all widgets with default animations here.",
+        );
+        let toggle = Toggler::new(self.toggled)
+            .label("Toggle me!")
+            .on_toggle(Message::Toggle);
+        column![main_text, toggle]
+            .spacing(10)
+            .padding(50)
+            .max_width(800)
+            .into()
+    }
+
+    fn theme(&self) -> Theme {
+        Theme::Light
+    }
+}

examples/animations/src/main.rs

@@ -450,7 +450,6 @@ where
 
         let mut children = layout.children();
         let toggler_layout = children.next().unwrap();
-        let state = tree.state.downcast_ref::<State<Renderer::Paragraph>>();
 
         if self.label.is_some() {
             let label_layout = children.next().unwrap();
@@ -496,7 +495,7 @@ where
             style.background,
         );
 
-        let x_ratio = state.transition.interpolate(0.0, 1.0, state.now);
+        let x_ratio = style.foreground_bounds_horizontal_progress;
         let toggler_foreground_bounds = Rectangle {
             x: bounds.x
                 + (2.0 * space + (x_ratio * (bounds.width - bounds.height))),
@@ -570,6 +569,8 @@ pub struct Style {
     pub foreground_border_width: f32,
     /// The [`Color`] of the foreground border of the toggler.
     pub foreground_border_color: Color,
+    /// The horizontal progress ratio of the foreground bounds of the toggler.
+    pub foreground_bounds_horizontal_progress: f32,
 }
 
 /// The theme catalog of a [`Toggler`].
@@ -658,12 +659,25 @@ pub fn default(theme: &Theme, status: Status) -> Style {
         Status::Disabled => palette.background.base.color,
     };
 
+    let foreground_bounds_horizontal_progress = match status {
+        Status::Active {
+            is_toggled: _,
+            animation_progress,
+        } => animation_progress,
+        Status::Hovered {
+            is_toggled: _,
+            animation_progress,
+        } => animation_progress,
+        Status::Disabled => 0.0,
+    };
+
     Style {
         background,
         foreground,
         foreground_border_width: 0.0,
         foreground_border_color: Color::TRANSPARENT,
         background_border_width: 0.0,
         background_border_color: Color::TRANSPARENT,
+        foreground_bounds_horizontal_progress,
     }
 }