use_animation

Function use_animation 

pub fn use_animation<Animated>(
    run: impl FnMut(&mut AnimConfiguration) -> Animated + 'static,
) -> UseAnimation<Animated>
where Animated: AnimatedValue,
Expand description

Animate your UI easily.

use_animation takes a 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:

For each animated value you will need to specify the duration, optionally an ease function or what type of easing you want.

ยงExample

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

fn app() -> impl IntoElement {
    let animation = use_animation(|conf| {
        conf.on_creation(OnCreation::Run);
        AnimNum::new(0., 100.).time(50)
    });

    let width = animation.get().value();

    rect()
        .width(Size::px(width))
        .height(Size::fill())
        .background(Color::BLUE)
}

You are not limited to just one animation per call, you can have as many as you want.

fn app() -> impl IntoElement {
    let animation = use_animation(|conf| {
        conf.on_creation(OnCreation::Run);
        (
            AnimNum::new(0., 100.).time(50),
            AnimColor::new(Color::RED, Color::BLUE).time(50),
        )
    });

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

    rect()
        .width(Size::px(width))
        .height(Size::fill())
        .background(color)
}

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

fn app() -> impl IntoElement {
    let animation = use_animation(|conf| {
        conf.on_finish(OnFinish::restart());
        // ...
    });

    // ...
}

You can subscribe your animation to reactive state values, these are considered dependencies.

fn app() -> impl IntoElement {
    let value = use_state(|| 100.);

    let animation = use_animation(move |conf| {
        conf.on_change(OnChange::Rerun);
        AnimNum::new(0., value()).time(50)
    });

    // ...
}

You may also use use_animation_with_dependencies to pass non-reactive dependencies as well.