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:
- Numeric values (e.g width): AnimNum
- Colors using AnimColor
- Sequential animations: AnimSequential
- Anything as long as you implement the AnimatedValue trait.
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.