🎉 Functional animation pauseing w/ resume

13r0ck · 13r0ck · commit 229b60ba1942 · 2023-03-20T17:17:24.000-06:00
Example added to the stopwatch example. The background now
animates between colors and pauses with the timer.
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
@@ -97,7 +97,7 @@ impl Application for Counter {
     }
 
     fn title(&self) -> String {
-        String::from("Counter - Iced")
+        String::from("Counter - Cosmic-Time")
     }
 
     fn subscription(&self) -> Subscription<Message> {
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
@@ -13,17 +13,6 @@ use once_cell::sync::Lazy;
 
 static SPACE: Lazy<keyframes::space::Id> = Lazy::new(keyframes::space::Id::unique);
 
-//Linear,
-//Quadratic,
-//Cubic,
-//Quartic,
-//Quintic,
-//Sinusoidal,
-//Exponential,
-//Circular,
-//Elastic,
-//Back,
-//Bounce
 const EASE_IN: [Ease; 10] = [
     Ease::Linear(Linear::InOut),
     Ease::Quadratic(Quadratic::In),
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
@@ -1,18 +1,23 @@
 use iced::alignment;
 use iced::executor;
-use iced::theme::{self, Theme};
 use iced::time;
 use iced::widget::{button, column, container, row, text};
-use iced::{Alignment, Application, Command, Element, Event, Length, Settings, Subscription};
+use iced::{Alignment, Application, Command, Event, Length, Settings, Subscription};
+
+mod theme;
+use self::widget::Element;
+use theme::Theme;
 
 use cosmic_time::{
     self,
     style_button::{self, StyleButton},
-    Timeline,
+    style_container::{self, StyleContainer},
+    Sinusoidal, Timeline,
 };
 use once_cell::sync::Lazy;
 
 static BUTTON: Lazy<style_button::Id> = Lazy::new(style_button::Id::unique);
+static CONTAINER: Lazy<style_container::Id> = Lazy::new(style_container::Id::unique);
 
 use std::time::{Duration, Instant};
 
@@ -45,9 +50,11 @@ impl Application for Stopwatch {
     type Flags = ();
 
     fn new(_flags: ()) -> (Stopwatch, Command<Message>) {
+        let mut timeline = Timeline::new();
+        timeline.set_chain_paused(anim_background()).start();
         (
             Stopwatch {
-                timeline: Timeline::new(),
+                timeline: timeline,
                 duration: Duration::default(),
                 state: State::Idle,
             },
@@ -56,7 +63,7 @@ impl Application for Stopwatch {
     }
 
     fn title(&self) -> String {
-        String::from("Stopwatch - Iced")
+        String::from("Stopwatch - Cosmic-Time")
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
@@ -66,11 +73,17 @@ impl Application for Stopwatch {
                     self.state = State::Ticking {
                         last_tick: Instant::now(),
                     };
-                    self.timeline.set_chain(anim_to_destructive()).start();
+                    self.timeline
+                        .set_chain(anim_to_destructive())
+                        .resume(CONTAINER.clone())
+                        .start();
                 }
                 State::Ticking { .. } => {
                     self.state = State::Idle;
-                    self.timeline.set_chain(anim_to_primary()).start();
+                    self.timeline
+                        .set_chain(anim_to_primary())
+                        .pause(CONTAINER.clone())
+                        .start();
                 }
             },
             Message::Tick(now) => {
@@ -82,6 +95,10 @@ impl Application for Stopwatch {
             }
             Message::Reset => {
                 self.duration = Duration::default();
+                match self.state {
+                    State::Idle => self.timeline.set_chain_paused(anim_background()).start(),
+                    State::Ticking { .. } => self.timeline.set_chain(anim_background()).start(),
+                }
             }
         }
 
@@ -156,31 +173,73 @@ impl Application for Stopwatch {
             .align_items(Alignment::Center)
             .spacing(20);
 
-        container(content)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_x()
-            .center_y()
-            .into()
+        StyleContainer::as_widget(
+            CONTAINER.clone(),
+            // Cool! Because we implemented the function on our custom, theme's type, adding
+            // the map argument is easy!
+            theme::Container::map(),
+            &self.timeline,
+            content,
+        )
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .center_x()
+        .center_y()
+        .into()
     }
 }
 
 fn anim_to_primary() -> style_button::Chain {
     style_button::Chain::new(BUTTON.clone())
-        .link(StyleButton::new(Duration::ZERO).style(as_u8(theme::Button::Destructive)))
-        .link(StyleButton::new(Duration::from_millis(500)).style(as_u8(theme::Button::Primary)))
+        .link(StyleButton::new(Duration::ZERO).style(button_u8(theme::Button::Destructive)))
+        .link(StyleButton::new(Duration::from_millis(500)).style(button_u8(theme::Button::Primary)))
 }
 
 fn anim_to_destructive() -> style_button::Chain {
     style_button::Chain::new(BUTTON.clone())
-        .link(StyleButton::new(Duration::ZERO).style(as_u8(theme::Button::Primary)))
-        .link(StyleButton::new(Duration::from_millis(500)).style(as_u8(theme::Button::Destructive)))
+        .link(StyleButton::new(Duration::ZERO).style(button_u8(theme::Button::Primary)))
+        .link(
+            StyleButton::new(Duration::from_millis(500))
+                .style(button_u8(theme::Button::Destructive)),
+        )
+}
+
+fn anim_background() -> style_container::Chain {
+    style_container::Chain::new(CONTAINER.clone())
+        .link(StyleContainer::new(Duration::ZERO).style(theme::Container::Red))
+        .link(
+            StyleContainer::new(Duration::from_secs(3))
+                // Notice how we can just pass the enum value here, where in the `anim_to_primary/destructive`
+                // we have to use the fucntion `button_u8`? Because we use a implemented a custom iced theme,
+                // we can just impl Into<u8> on the enum, and it works here!
+                .style(theme::Container::Green)
+                .ease(Sinusoidal::In),
+        )
+        .link(
+            StyleContainer::new(Duration::from_secs(6))
+                .style(theme::Container::Blue)
+                .ease(Sinusoidal::In),
+        )
+        .link(
+            StyleContainer::new(Duration::from_secs(9))
+                .style(theme::Container::Red)
+                .ease(Sinusoidal::In),
+        )
+        .loop_forever()
 }
 
 // Style implementations
 
+// Here the button example uses Iced's default theme
+// enum. So we have to have some helper functions to make it work.
+// we also have another closture, `buttons`, in `fn view()`
+//
+// For themining reasons, this actually isn't iced's default
+// button theme, but the implementation here for button is what you
+// would have to do to use the iced type in your project.
+
 // the enum's default must be 0
-fn as_u8(style: theme::Button) -> u8 {
+fn button_u8(style: theme::Button) -> u8 {
     match style {
         theme::Button::Primary => 0,
         theme::Button::Secondary => 1,
@@ -190,3 +249,40 @@ fn as_u8(style: theme::Button) -> u8 {
         _ => panic!("Custom is not supported"),
     }
 }
+
+// But! if we are useing a custom theme then
+// the code cleans up quite a bit.
+
+impl From<theme::Container> for u8 {
+    fn from(style: theme::Container) -> Self {
+        match style {
+            theme::Container::White => 0,
+            theme::Container::Red => 1,
+            theme::Container::Green => 2,
+            theme::Container::Blue => 3,
+        }
+    }
+}
+
+impl theme::Container {
+    fn map() -> fn(u8) -> theme::Container {
+        |i: u8| match i {
+            0 => theme::Container::White,
+            1 => theme::Container::Red,
+            2 => theme::Container::Green,
+            3 => theme::Container::Blue,
+            _ => panic!("Impossible"),
+        }
+    }
+}
+
+// Just for themeing, not a part of this example.
+mod widget {
+    #![allow(dead_code)]
+    use crate::theme::Theme;
+
+    pub type Renderer = iced::Renderer<Theme>;
+    pub type Element<'a, Message> = iced::Element<'a, Message, Renderer>;
+    pub type Container<'a, Message> = iced::widget::Container<'a, Message, Renderer>;
+    pub type Button<'a, Message> = iced::widget::Button<'a, Message, Renderer>;
+}
diff --git a/examples/stopwatch/src/theme.rs b/examples/stopwatch/src/theme.rs
@@ -0,0 +1,130 @@
+/*
+ * This file is not specific to cosmic-time.
+ * The relevant code to this example is in main.rs.
+ * This is just code to make an iced theme, so
+ * the stopwatch example can be prettier, and
+ * show the andvantages of style animations
+ * with a custom theme.
+ *
+ */
+
+use iced::theme::palette::{self, Background};
+use iced::widget::{button, container, text};
+use iced::Background as B;
+use iced::{application, color, Color, Vector};
+
+#[derive(Default)]
+pub struct Theme;
+
+impl application::StyleSheet for Theme {
+    type Style = ();
+
+    fn appearance(&self, _style: &Self::Style) -> application::Appearance {
+        application::Appearance {
+            background_color: color!(0xff, 0xff, 0xff),
+            text_color: color!(0xff, 0x00, 0x00),
+        }
+    }
+}
+
+impl text::StyleSheet for Theme {
+    type Style = ();
+
+    fn appearance(&self, _style: Self::Style) -> text::Appearance {
+        text::Appearance {
+            color: color!(0xff, 0xff, 0xff).into(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub enum Container {
+    #[default]
+    White,
+    Red,
+    Green,
+    Blue,
+}
+
+impl container::StyleSheet for Theme {
+    type Style = Container;
+
+    fn appearance(&self, style: &Self::Style) -> container::Appearance {
+        match style {
+            Container::White => container::Appearance {
+                background: Some(B::Color(color!(0xd1, 0xd5, 0xdb))),
+                text_color: Some(color!(0x00, 0x00, 0x00)),
+                ..Default::default()
+            },
+            Container::Red => container::Appearance {
+                background: Some(B::Color(color!(0xfc, 0xa5, 0xa5))),
+                text_color: Some(color!(0x00, 0x00, 0x00)),
+                ..Default::default()
+            },
+            Container::Green => container::Appearance {
+                background: Some(B::Color(color!(0xb3, 0xf2, 0x64))),
+                text_color: Some(color!(0x00, 0x00, 0x00)),
+                ..Default::default()
+            },
+            Container::Blue => container::Appearance {
+                background: Some(B::Color(color!(0x93, 0xc5, 0xfd))),
+                text_color: Some(color!(0x00, 0x00, 0x00)),
+                ..Default::default()
+            },
+        }
+    }
+}
+
+#[derive(Default)]
+pub enum Button {
+    #[default]
+    Primary,
+    Secondary,
+    Positive,
+    Destructive,
+    Text,
+    Custom(Box<dyn button::StyleSheet<Style = Theme>>),
+}
+
+impl button::StyleSheet for Theme {
+    type Style = Button;
+
+    fn active(&self, style: &Self::Style) -> button::Appearance {
+        match style {
+            Button::Primary => button::Appearance {
+                background: color!(0x25, 0x63, 0xeb).into(),
+                text_color: color!(0x00, 0x00, 0x00),
+                border_radius: 10.0,
+                border_width: 10.0,
+                shadow_offset: Vector::new(3., 3.),
+                border_color: color!(0x25, 0x63, 0xeb),
+                ..Default::default()
+            },
+            Button::Secondary => button::Appearance {
+                background: color!(0x3c, 0x38, 0x36).into(),
+                border_radius: 10.0,
+                shadow_offset: Vector::new(3., 3.),
+                text_color: color!(0xff, 0xff, 0xff),
+                ..Default::default()
+            },
+            Button::Destructive => button::Appearance {
+                background: color!(0xdc, 0x26, 0x26).into(),
+                text_color: color!(0xff, 0xff, 0xff),
+                border_radius: 10.0,
+                shadow_offset: Vector::new(5., 5.),
+                border_color: color!(0xdc, 0x26, 0x26),
+                border_width: 10.0,
+                ..Default::default()
+            },
+            _ => panic!("This isn't a custom style exmaple, just skipping these for now"),
+        }
+    }
+
+    fn hovered(&self, style: &Self::Style) -> button::Appearance {
+        self.active(style)
+    }
+
+    fn pressed(&self, style: &Self::Style) -> button::Appearance {
+        self.active(style)
+    }
+}
diff --git a/src/keyframes/style_button.rs b/src/keyframes/style_button.rs
@@ -154,7 +154,8 @@ impl StyleButton {
         self
     }
 
-    pub fn style(mut self, style: u8) -> Self {
+    pub fn style(mut self, style: impl Into<u8>) -> Self {
+        let style = style.into();
         self.style = Some(style);
         self
     }
diff --git a/src/keyframes/style_container.rs b/src/keyframes/style_container.rs
@@ -180,7 +180,8 @@ impl StyleContainer {
         self
     }
 
-    pub fn style(mut self, style: u8) -> Self {
+    pub fn style(mut self, style: impl Into<u8>) -> Self {
+        let style = style.into();
         self.style = Some(style);
         self
     }
diff --git a/src/timeline.rs b/src/timeline.rs
diff --git a/src/widget/button.rs b/src/widget/button.rs

Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ impl Application for Counter {`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`fn title(&self) -> String {`
`100`		`- String::from("Counter - Iced")`
	`100`	`+ String::from("Counter - Cosmic-Time")`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`fn subscription(&self) -> Subscription<Message> {`
Original file line number	Diff line number	Diff line change
`@@ -154,7 +154,8 @@ impl StyleButton {`
`154`	`154`	`self`
`155`	`155`	`}`
`156`	`156`
`157`		`- pub fn style(mut self, style: u8) -> Self {`
	`157`	`+ pub fn style(mut self, style: impl Into<u8>) -> Self {`
	`158`	`+ let style = style.into();`
`158`	`159`	`self.style = Some(style);`
`159`	`160`	`self`
`160`	`161`	`}`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,8 @@ impl StyleContainer {`
`180`	`180`	`self`
`181`	`181`	`}`
`182`	`182`
`183`		`- pub fn style(mut self, style: u8) -> Self {`
	`183`	`+ pub fn style(mut self, style: impl Into<u8>) -> Self {`
	`184`	`+ let style = style.into();`
`184`	`185`	`self.style = Some(style);`
`185`	`186`	`self`
`186`	`187`	`}`