Function freya::prelude::use_animation

pub fn use_animation<Animated>(
    run: impl Fn(&mut Context) -> Animated + Clone + 'static
) -> UseAnimator<Animated>
where
    Animated: PartialEq + Clone + 'static,

Animate your elements easily.

use_animation takes an callback to initialize the animated values and related configuration.

To animate a group of values at once you can just return a tuple of them. Currently supports animating numeric values (e.g width, padding, rotation, offsets) or also colors, you need specify the duration, and optionally an ease function or what type of easing you want as well.

Example

Here is an example that animates a value from 0.0 to 100.0 in 50 milliseconds.

fn main() {
    launch(app);
}

fn app() -> Element {
    let animation = use_animation(|ctx| {
        ctx.auto_start(true);
        ctx.with(AnimNum::new(0., 100.).time(50))
    });

    let width = animation.get().read().as_f32();

    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.

fn app() -> Element {
    let animation = use_animation(|ctx| {
        ctx.auto_start(true);
        (
            ctx.with(AnimNum::new(0., 100.).time(50)),
            ctx.with(AnimColor::new("red", "blue").time(50))
        )
    });

    let (width, color) = animation.get();

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

You can also tweak what to do once the animation has finished with Context::on_finish.

fn app() -> Element {
    let animation = use_animation(|ctx| {
        ctx.on_finish(OnFinish::Restart);
        (
            ctx.with(AnimNum::new(0., 100.).time(50)),
            ctx.with(AnimColor::new("red", "blue").time(50))
        )
    });

    let (width, color) = animation.get();

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