clean up

examples/animation.rs

@@ -10,31 +10,58 @@ fn main() {
 }
 
 fn app() -> Element {
-    let animation = use_animation(|ctx| {
-        // The animation will start automatically when the component is mounted
-        ctx.auto_start(true); 
-
-        // Run the animation in revese direction once an iteration is done
-        ctx.on_finish(OnFinish::Reverse);
-
-        // You can register as many animations you want
+    let mut toggle = use_signal(|| true);
+    let animations = use_animation(|ctx| {
         (
-            // Create an animable numeric value that starts from 0 and goes to 100 in 50ms
-            ctx.with(AnimNum::new(0., 100.).time(500).ease(Ease::InOut)), 
-            // Create an animable color value that starts from one color and transitions to another in 200ms and has a Bounce function
+            ctx.with(
+                AnimNum::new(100., 200.)
+                    .time(500)
+                    .ease(Ease::Out)
+                    .function(Function::Expo),
+            ),
             ctx.with(
                 AnimColor::new("rgb(131, 111, 255)", "rgb(255, 167, 50)")
-                    .time(400)
-                    .function(Function::Bounce)
-            )
+                    .time(170)
+                    .ease(Ease::InOut),
+            ),
+            ctx.with(
+                AnimNum::new(0., 360.)
+                    .time(1000)
+                    .ease(Ease::Out)
+                    .function(Function::Bounce),
+            ),
+            ctx.with(
+                AnimNum::new(50., 0.)
+                    .time(550)
+                    .ease(Ease::InOut)
+                    .function(Function::Bounce),
+            ),
         )
     });
 
-    let (width, color) = animation.get();
+    let (size, color, rotate, radius) = animations.get();
 
-    rsx!(rect {
-        width: "{width.read().as_f32()}%",
-        height: "100%",
-        background: "{color.read().as_string()}",
-    })
-}
+    rsx!(
+        rect {
+            main_align: "center",
+            cross_align: "center",
+            height: "100%",
+            width: "100%",
+            onclick: move |_| {
+                if *toggle.peek() {
+                    animations.start();
+                } else {
+                    animations.reverse();
+                }
+                toggle.toggle();
+            },
+            rect {
+                width: "{size.read().as_f32()}",
+                rotate: "{rotate.read().as_f32()}deg",
+                height: "50%",
+                background: "{color.read().as_string()}",
+                corner_radius: "{radius.read().as_f32()}"
+            }
+        }
+    )
+}