Function freya_hooks::use_animation
source · pub fn use_animation<Animated: PartialEq + 'static>(
run: impl Fn(&mut Context) -> Animated + 'static
) -> ReadOnlySignal<UseAnimator<Animated>>
Expand description
Animate your elements easily.
Usage
With a simple animation:
fn app() -> Element {
let animation = use_animation(|ctx| ctx.with(AnimNum::new(0., 100.).time(50)));
let animations = animation.read();
let width = animations.get().read().as_f32();
use_hook(move || {
animation.read().start();
});
rsx!(
rect {
width: "{width}",
height: "100%",
background: "blue"
}
)
}
Grouping various animations.
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 animations = animation.read();
let (width, color) = animations.get();
use_hook(move || {
animation.read().start();
});
rsx!(
rect {
width: "{width.read().as_f32()}",
height: "100%",
background: "{color.read().as_string()}"
}
)
}