GPUI

With Animation

This section explains how with_animation allows you to apply an Animation to an element.

with_animation

The with_animation function takes three parameters including an ElementId, an Animation, and a impl Fn(Self, f32) -> Self. This function returns AnimationElement<Self> where Self is any type that can be converted into an element.

The closure supplies Self and a f32, inside this function is where you can style this element using the f32 delta. This delta starts from 0.0 and ends at 1.0, depending on the Animation it can repeat.

use std::time::Duration;

use gpui::{
    Animation, AnimationExt, AppContext, Application, Context, IntoElement, ParentElement, Render,
    Styled, Window, WindowOptions, blue, div, ease_in_out, rems, white,
};

struct RootView;

impl Render for RootView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .bg(white())
            .size_full()
            .flex()
            .items_center()
            .justify_center()
            .child(
                div().bg(blue()).with_animation(
                    "animation",
                    Animation::new(Duration::from_secs(1))
                        .repeat()
                        .with_easing(ease_in_out),
                    |this, delta| this.size(rems(delta * 5.)),
                ),
            )
    }
}

fn main() {
    Application::new().run(|app| {
        app.open_window(WindowOptions::default(), |_window, app| {
            app.new(|_| RootView)
        })
        .unwrap();
    });
}