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()}"
        }
    )
}