Function use_animation

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

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) using crate::AnimNum or colors using crate::AnimColor. For each animated value you will need specify the duration, optionally an ease function or what type of easing you want.

For animations where you want to animate a value after one another you may use crate::AnimSequential.

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(|conf| {
        conf.on_creation(OnCreation::Run);
        AnimNum::new(0., 100.).time(50)
    });

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

    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(|conf| {
        conf.on_creation(OnCreation::Run);
        (
            AnimNum::new(0., 100.).time(50),
            AnimColor::new("red", "blue").time(50),
        )
    });

    let (width, color) = &*animation.get().read_unchecked();

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

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

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

    let (width, color) = &*animation.get().read_unchecked();

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