Merge pull request #7 from pop-os/pause

Pause

Author: 13r0ck

README.md

@@ -17,7 +17,7 @@ TODOs before release:
 - [ ] Documentation
 - [ ] Add `Cosmic` cargo feature for compatibility with both iced and System76's temporary fork.
 - [x] optimize for `as_subscription` logic
-- [ ] Add pause for looping animations
+- [x] Add pause for animations
 
 Other TODOs:
 - [x] test for easing

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> {

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),

examples/stopwatch/src/main.rs

@@ -1,18 +1,22 @@
 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::widget::{button, column, row, text};
+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 +49,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,
                 duration: Duration::default(),
                 state: State::Idle,
             },
@@ -56,7 +62,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 +72,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,20 +94,18 @@ 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(),
+                }
             }
         }
 
         Command::none()
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        Subscription::batch(vec![
-            match self.state {
-                State::Idle => Subscription::none(),
-                State::Ticking { .. } => time::every(Duration::from_millis(10)).map(Message::Tick),
-            },
-            self.timeline.as_subscription::<Event>().map(Message::Tick),
-        ])
+        self.timeline.as_subscription::<Event>().map(Message::Tick)
     }
 
     fn view(&self) -> Element<Message> {
@@ -156,31 +166,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(1))
+                // 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(2))
+                .style(theme::Container::Blue)
+                .ease(Sinusoidal::In),
+        )
+        .link(
+            StyleContainer::new(Duration::from_secs(3))
+                .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 +242,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>;
+}

examples/stopwatch/src/theme.rs

@@ -0,0 +1,128 @@
+/*
+ * 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::widget::{button, container, text};
+use iced::Background as B;
+use iced::{application, 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)]
+#[allow(dead_code)]
+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),
+            },
+            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,
+            },
+            _ => 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)
+    }
+}

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
     }