Merge pull request #8 from pop-os/lazy

Lazy KeyFrames + Speed Controlled Keyframes + Pong Example

Author: 13r0ck

Cargo.lock

@@ -18,6 +18,7 @@ TODOs before release:
 - [ ] Add `Cosmic` cargo feature for compatibility with both iced and System76's temporary fork.
 - [x] optimize for `as_subscription` logic
 - [x] Add pause for animations
+- [ ] Lazy keyframes. (Keyframes that can use the position of a previous (active or not) animation to start another animation.)
 
 Other TODOs:
 - [x] test for easing

README.md

@@ -5,11 +5,11 @@ use iced::{
     Alignment, Application, Command, Element, Event, Length, Settings, Subscription, Theme,
 };
 
-use cosmic_time::{self, keyframes, Timeline};
+use cosmic_time::{self, anim, chain, id, Timeline};
 
 use once_cell::sync::Lazy;
 
-static CONTAINER: Lazy<keyframes::container::Id> = Lazy::new(keyframes::container::Id::unique);
+static CONTAINER: Lazy<id::Container> = Lazy::new(id::Container::unique);
 
 pub fn main() -> iced::Result {
     Counter::run(Settings::default())
@@ -34,42 +34,30 @@ impl Application for Counter {
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
+        use cosmic_time::container;
         // This is new! This is how we build a timeline!
         // These values can be created at anytime, but because this example is
         // simple and we want to animate from application init, we will build the
         // timeline Struct and the "timeline" itself here.
         // Though more complicated applications will likely do this in the `update`
         let mut timeline = Timeline::new();
-        let animation = cosmic_time::container::Chain::new(CONTAINER.clone())
-            // .loop_forever() // Uncomment this line to loop the animation!
-            .link(
-                keyframes::Container::new(Duration::ZERO)
-                    .width(Length::Fixed(0.))
-                    .height(Length::Fixed(100.)),
-            )
-            .link(
-                keyframes::Container::new(Duration::from_secs(2))
-                    .width(Length::Fixed(200.))
-                    .height(Length::Fixed(100.)),
-            )
-            .link(
-                keyframes::Container::new(Duration::from_secs(4))
-                    .width(Length::Fixed(200.))
-                    .height(Length::Fixed(300.))
-                    .padding([0, 0, 0, 0]),
-            )
-            .link(
-                keyframes::Container::new(Duration::from_secs(6))
-                    .width(Length::Fixed(700.))
-                    .height(Length::Fixed(300.))
-                    .padding([0, 0, 0, 500]),
-            )
-            .link(
-                keyframes::Container::new(Duration::from_secs(8))
-                    .width(Length::Fixed(150.))
-                    .height(Length::Fixed(150.))
-                    .padding([0, 0, 0, 0]),
-            );
+        let animation = chain![
+            CONTAINER,
+            container(Duration::ZERO).width(0.).height(100.),
+            container(Duration::from_secs(2)).width(200.).height(100.),
+            container(Duration::from_secs(2))
+                .width(200.)
+                .height(300.)
+                .padding([0, 0, 0, 0]),
+            container(Duration::from_secs(2))
+                .width(700.)
+                .height(300.)
+                .padding([0, 0, 0, 500]),
+            container(Duration::from_secs(2))
+                .width(150.)
+                .height(150.)
+                .padding([0, 0, 0, 0]),
+        ];
 
         // Notice how we had to specify the start and end of the widget dimensions?
         // Iced's default values for widgets are usually not animatable, because
@@ -128,8 +116,8 @@ impl Application for Counter {
         // just define the width with a `width` method like any other widget, then
         // animate the height in your view! Only control the animatable values with
         // cosmic-time, all others should be in your view!
-        keyframes::Container::as_widget(
-            CONTAINER.clone(),
+        anim!(
+            CONTAINER,
             &self.timeline,
             column![
                 button("Increment")

examples/counter/src/main.rs

@@ -6,12 +6,12 @@ use iced::{
 };
 
 use cosmic_time::{
-    self, keyframes, Back, Bounce, Circular, Ease, Elastic, Exponential, Linear, Quadratic,
+    self, anim, chain, id, Back, Bounce, Circular, Ease, Elastic, Exponential, Linear, Quadratic,
     Quartic, Quintic, Sinusoidal, Timeline,
 };
 use once_cell::sync::Lazy;
 
-static SPACE: Lazy<keyframes::space::Id> = Lazy::new(keyframes::space::Id::unique);
+static SPACE: Lazy<id::Space> = Lazy::new(id::Space::unique);
 
 const EASE_IN: [Ease; 10] = [
     Ease::Linear(Linear::InOut),
@@ -44,6 +44,7 @@ pub fn main() -> iced::Result {
 }
 
 #[derive(Debug)]
+#[allow(clippy::large_enum_variant)]
 enum Pokedex {
     Loading,
     Loaded { pokemon: Pokemon },
@@ -164,7 +165,7 @@ impl Pokemon {
     fn view(&self) -> Element<Message> {
         row![
             column![
-                keyframes::Space::as_widget(SPACE.clone(), &self.timeline),
+                anim!(SPACE, &self.timeline),
                 image::viewer(self.image.clone())
             ],
             column![
@@ -180,13 +181,14 @@ impl Pokemon {
             ]
             .spacing(20),
         ]
-        .height(Length::Fixed(400.))
+        .height(400.)
         .spacing(20)
         .align_items(Alignment::Center)
         .into()
     }
 
     async fn search() -> Result<Pokemon, Error> {
+        use cosmic_time::space;
         use rand::Rng;
         use serde::Deserialize;
 
@@ -245,21 +247,18 @@ impl Pokemon {
             EASE_IN[rand], EASE_OUT[rand]
         );
 
-        let animation = cosmic_time::space::Chain::new(SPACE.clone())
-            .link(keyframes::Space::new(Duration::ZERO).height(Length::Fixed(50.)))
-            .link(
-                keyframes::Space::new(Duration::from_millis(1500))
-                    .height(Length::Fixed(250.))
-                    .ease(EASE_IN[rand]),
-            )
-            .link(
-                keyframes::Space::new(Duration::from_millis(3000))
-                    .height(Length::Fixed(50.))
-                    .ease(EASE_OUT[rand]),
-            )
-            .loop_forever();
-
-        // println!("Animating wth ease: {ease:?}"); // Uncomment to see the type of easing
+        let animation = chain![
+            SPACE,
+            space(Duration::ZERO).height(50.),
+            space(Duration::from_millis(1500))
+                .height(250.)
+                .ease(EASE_IN[rand]),
+            space(Duration::from_millis(3000))
+                .height(50.)
+                .ease(EASE_OUT[rand])
+        ]
+        .loop_forever();
+
         timeline.set_chain(animation).start();
 
         Ok(Pokemon {

examples/pokedex/src/main.rs

@@ -0,0 +1,13 @@
+[package]
+name = "pong"
+version = "0.1.0"
+authors = ["Brock Szuszczewicz <[email protected]>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = "0.8.0"
+iced_native = "0.9.1"
+cosmic-time = { path = "../.."}
+once_cell = "1.17"
+rand = "0.8.5"