Function freya::hooks::use_animation

source ·
pub fn use_animation<Animated>(
    run: impl Fn(&mut Context) -> Animated + Clone + 'static
) -> UseAnimator<Animated>
where Animated: PartialEq + Clone + 'static,
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 width = animation.get().read().as_f32();

    use_hook(move || {
        animation.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 (width, color) = animation.get();

    use_hook(move || {
        animation.start();
    });

    rsx!(
        rect {
            width: "{width.read().as_f32()}",
            height: "100%",
            background: "{color.read().as_string()}"
        }
    )
}