1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

//! # Animating
//!
//! Freya comes with `use_animation`, a hook you can use to easily animate your elements.
//!
//! You can animate numeric values (e.g width, padding, rotation, offsets) or also colors.
//! You can specify the duration, the easing functin and what type of easing you want.
//!
//! Here is an example that animates a value from `0.0` to `100.0` in `50` milliseconds.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//!
//! fn main() {
//!     launch(app);
//! }
//!
//! fn app() -> Element {
//!     let animation = use_animation(|ctx| ctx.with(AnimNum::new(0., 100.).time(50)));
//!
//!     let width = animation.get().read().as_f32();
//!
//!     use_hook(move || {
//!         // Start animation as soon as this component runs.
//!         animation.start();
//!     });
//!
//!     rsx!(
//!         rect {
//!             width: "{width}",
//!             height: "100%",
//!             background: "blue"
//!         }
//!     )
//! }
//! ```
//!
//! You are not limited to just one animation per call, you can have as many as you want.
//!
//! ```rust,no_run
//! # use freya::prelude::*;
//! fn app() -> Element {
//!     let animation = use_animation(|ctx| {
//!         (
//!             ctx.with(AnimNum::new(0., 100.).time(50)),
//!             ctx.with(AnimColor::new("red", "blue").time(50))
//!         )
//!     });
//!
//!     let (width, color) = animation.get();
//!
//!     use_hook(move || {
//!         animation.start();
//!     });
//!
//!     rsx!(
//!         rect {
//!             width: "{width.read().as_f32()}",
//!             height: "100%",
//!             background: "{color.read().as_string()}"
//!         }
//!     )
//! }