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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

//! # Animating
//!
//! Freya provides you with two hooks to help you animate your components.
//!
//! ### `use_animation`
//!
//! This is a simple hook that lets you animate a certain value from an `initial`
//! value to a `final` value, in a given `duration` of time.
//! There are a few animations that you can select:
//!
//! - Linear
//! - EaseIn
//! - EaseInOut
//! - BounceIns
//!
//! Here is an example that animates a value from `0.0` to `100.0` in `50` milliseconds,
//! using the `linear` animation.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//!
//! fn main() {
//!     launch(app);
//! }
//!
//!  fn app() -> Element {
//!     let mut animation = use_animation(|| 0.0);
//!
//!     let progress = animation.value();
//!
//!     use_hook(move || {
//!         animation.start(Animation::new_linear(0.0..=100.0, 50));
//!     });
//!
//!     rsx!(rect {
//!         width: "{progress}",
//!     })
//! }
//! ```
//!
//! ### `use_animation_transition`
//!
//! This hook lets you group a set of animations together with a certain `animation` and a given `duration`.
//! You can specify a set of dependencies that re-runs the animation callback.
//!
//! You have these animations:
//!
//! - Linear
//! - EaseIn
//! - EaseInOut
//! - BounceIns
//!
//! Here is an example that animates a `size` and a color in `200` milliseconds, using the `new_sine_in_out` animation.
//!
//! ```rust, no_run
//! # use freya::prelude::*;
//!
//! fn main() {
//!     launch(app);
//! }
//!
//! const TARGET: f64 = 500.0;
//!
//! fn app() -> Element {
//!     let mut animation = use_animation_transition(TransitionAnimation::new_sine_in_out(200), (), |()| {
//!         vec![
//!             Transition::new_size(0.0, TARGET),
//!             Transition::new_color("rgb(33, 158, 188)", "white"),
//!         ]
//!     });
//!
//!     let size = animation.get(0).unwrap().as_size();
//!     let background = animation.get(1).unwrap().as_color();
//!
//!     let onclick = move |_: MouseEvent| {
//!         if size == 0.0 {
//!             animation.start();
//!         } else if size == TARGET {
//!             animation.reverse();
//!         }
//!     };
//!
//!     rsx!(
//!         rect {
//!             overflow: "clip",
//!             background: "black",
//!             width: "100%",
//!             height: "100%",
//!             offset_x: "{size}",
//!             rect {
//!                 height: "100%",
//!                 width: "200",
//!                 background: "{background}",
//!                 onclick,
//!             }
//!         }
//!     )
//! }
//! ```