feat: Sequential animations (#1020)

* Added clock example * Formated and fixed clippy warnings * Apply suggestions from code review Co-authored-by: Marc Espin <[email protected]> * feat: Sequential animations * lint * debug macos ci * debug macos ci * revert debug macos ci * chore: Simplify sequential api * chore: Add sequential animation test * chore: Update test --------- Co-authored-by: aSwedishGamer <[email protected]> Co-authored-by: aSwedishGamer <[email protected]>
marc2332 · Jan 9, 2025 · c29751f · c29751f
1 parent 0652bf1
commit c29751f
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 3 deletions.
diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs
@@ -1,5 +1,6 @@
 use std::{
     fmt,
+    ops::Deref,
     time::Duration,
 };
 
@@ -263,6 +264,68 @@ impl AnimatedValue for AnimColor {
     }
 }
 
+/// Chain a sequence of animated values.
+#[derive(Clone)]
+pub struct AnimSequential<Animated: AnimatedValue, const N: usize> {
+    values: [Animated; N],
+    curr_value: usize,
+    acc_index: u128,
+}
+
+impl<Animated: AnimatedValue, const N: usize> AnimSequential<Animated, N> {
+    pub fn new(values: [Animated; N]) -> Self {
+        Self {
+            values,
+            curr_value: 0,
+            acc_index: 0,
+        }
+    }
+}
+
+impl<Animated: AnimatedValue, const N: usize> Deref for AnimSequential<Animated, N> {
+    type Target = [Animated; N];
+
+    fn deref(&self) -> &Self::Target {
+        &self.values
+    }
+}
+
+impl<Animated: AnimatedValue, const N: usize> AnimatedValue for AnimSequential<Animated, N> {
+    fn advance(&mut self, index: u128, direction: AnimDirection) {
+        if let Some(value) = self.values.get_mut(self.curr_value) {
+            let index = index - self.acc_index;
+            value.advance(index, direction);
+
+            if value.is_finished(index, direction) {
+                self.curr_value += 1;
+                self.acc_index += index;
+            }
+        }
+    }
+
+    fn is_finished(&self, index: u128, direction: AnimDirection) -> bool {
+        if let Some(value) = self.values.get(self.curr_value) {
+            value.is_finished(index, direction)
+        } else {
+            true
+        }
+    }
+
+    fn prepare(&mut self, direction: AnimDirection) {
+        self.acc_index = 0;
+        self.curr_value = 0;
+        for val in &mut self.values {
+            val.prepare(direction);
+        }
+    }
+
+    fn finish(&mut self, direction: AnimDirection) {
+        for value in &mut self.values {
+            value.finish(direction);
+        }
+    }
+}
+
 /// Animate a numeric value.
 #[derive(Clone, PartialEq)]
 pub struct AnimNum {
@@ -331,9 +394,9 @@ impl AnimatedValue for AnimNum {
     fn is_finished(&self, index: u128, direction: AnimDirection) -> bool {
         match direction {
             AnimDirection::Forward => {
-                index > self.time.as_millis() && self.value >= self.destination
+                index > self.time.as_millis() && self.value == self.destination
             }
-            AnimDirection::Reverse => index > self.time.as_millis() && self.value <= self.origin,
+            AnimDirection::Reverse => index > self.time.as_millis() && self.value == self.origin,
         }
     }
 
@@ -349,7 +412,7 @@ impl AnimatedValue for AnimNum {
             self.time,
             self.ease,
             self.function,
-        )
+        );
     }
 
     fn finish(&mut self, direction: AnimDirection) {

diff --git a/crates/hooks/tests/use_animation.rs b/crates/hooks/tests/use_animation.rs
@@ -206,3 +206,74 @@ pub async fn auto_start() {
     let width = utils.root().get(0).area().unwrap().width();
     assert_eq!(width, 100.0);
 }
+
+#[tokio::test]
+pub async fn sequential() {
+    fn use_animation_app() -> Element {
+        let animation = use_animation(|conf| {
+            conf.auto_start(true);
+            AnimSequential::new([
+                AnimNum::new(10., 100.).time(50),
+                AnimNum::new(10., 100.).time(50),
+            ])
+        });
+
+        let progress_a = animation.get().read()[0].read();
+        let progress_b = animation.get().read()[1].read();
+
+        rsx!(
+            rect {
+                background: "white",
+                height: "100%",
+                width: "{progress_a}",
+                rect {
+                    background: "white",
+                    height: "100%",
+                    width: "{progress_b}",
+                }
+            }
+        )
+    }
+
+    let mut utils = launch_test(use_animation_app);
+
+    // Disable event loop ticker
+    utils.config().event_loop_ticker = false;
+
+    // Initial state
+    utils.wait_for_update().await;
+
+    assert_eq!(utils.root().get(0).area().unwrap().width(), 10.0);
+    assert_eq!(utils.root().get(0).get(0).area().unwrap().width(), 10.0);
+
+    // State somewhere in the middle
+    sleep(Duration::from_millis(32)).await;
+    utils.wait_for_update().await;
+
+    let width_a = utils.root().get(0).area().unwrap().width();
+    let width_b = utils.root().get(0).get(0).area().unwrap().width();
+    assert!(width_a > 10.0);
+    assert_eq!(width_b, 10.0);
+
+    // Finished A and started B
+    utils.wait_for_update().await;
+    sleep(Duration::from_millis(16)).await;
+    utils.wait_for_update().await;
+    sleep(Duration::from_millis(16)).await;
+    utils.wait_for_update().await;
+
+    let width_a = utils.root().get(0).area().unwrap().width();
+    let width_b = utils.root().get(0).get(0).area().unwrap().width();
+    assert_eq!(width_a, 100.0);
+    assert!(width_b > 10.0);
+    assert_ne!(width_b, 100.0);
+
+    // Finished B
+    sleep(Duration::from_millis(32)).await;
+    utils.wait_for_update().await;
+
+    let width_a = utils.root().get(0).area().unwrap().width();
+    let width_b = utils.root().get(0).get(0).area().unwrap().width();
+    assert_eq!(width_a, 100.0);
+    assert_eq!(width_b, 100.0);
+}
diff --git a/examples/sequential_animation.rs b/examples/sequential_animation.rs
@@ -0,0 +1,62 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_with_props(app, "Counter", (600.0, 350.0));
+}
+
+fn app() -> Element {
+    let mut toggle = use_signal(|| true);
+    let animations = use_animation(|_conf| {
+        AnimSequential::new([
+            AnimNum::new(0., 360.)
+                .time(500)
+                .ease(Ease::InOut)
+                .function(Function::Expo),
+            AnimNum::new(0., 180.)
+                .time(2000)
+                .ease(Ease::Out)
+                .function(Function::Elastic),
+        ])
+    });
+
+    let sequential = animations.get();
+
+    let rotate_a = sequential.read()[0].read();
+    let rotate_b = sequential.read()[1].read();
+
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            main_align: "center",
+            cross_align: "center",
+            spacing: "50",
+            direction: "horizontal",
+            onclick: move |_| {
+                if *toggle.peek() {
+                    animations.start();
+                } else {
+                    animations.reverse();
+                }
+                toggle.toggle();
+            },
+            rect {
+                width: "100",
+                height: "100",
+                rotate: "{rotate_a}deg",
+                background: "rgb(0, 119, 182)"
+            },
+            rect {
+                width: "100",
+                height: "100",
+                rotate: "{rotate_b}deg",
+                background: "rgb(0, 119, 182)"
+            }
+        }
+    )
+}