anim.rs

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

    rect()
        .background(0xff292a2f)
        .color(0xffe3e1e9)
        .width(Size::Fill)
        .height(Size::Fill)
        .spacing(8.)
        .font_size(14.)
        .center()
        .child(
            rect()
                .spacing(8.)
                .horizontal()
                .child(Setter1 {
                    state: value.into_writable(),
                    value: 0,
                })
                .child(Setter1 {
                    state: value.into_writable(),
                    value: 1,
                })
                .child(Setter1 {
                    state: value.into_writable(),
                    value: 2,
                })
                .child(Setter1 {
                    state: value.into_writable(),
                    value: 3,
                }),
        )
        .child(
            rect()
                .spacing(8.)
                .horizontal()
                .child(Setter2 {
                    state: value.into_writable(),
                    value: 0,
                })
                .child(Setter2 {
                    state: value.into_writable(),
                    value: 1,
                })
                .child(Setter2 {
                    state: value.into_writable(),
                    value: 2,
                })
                .child(Setter2 {
                    state: value.into_writable(),
                    value: 3,
                }),
        )
}

#[derive(PartialEq)]
struct Setter1<T: Display + Clone + PartialEq + 'static> {
    pub state: Writable<T>,
    pub value: T,
}

impl<T: Display + Clone + PartialEq + 'static> Component for Setter1<T> {
    fn render(&self) -> impl IntoElement {
        let animation = use_animation_with_dependencies(&(&*self.state.read() == &self.value), {
            move |conf, selected| {
                conf.on_creation(OnCreation::Finish);
                conf.on_change(OnChange::Rerun);

                let corners = AnimNum::new(12., 48.).time(500);

                if *selected {
                    corners
                } else {
                    corners.into_reversed()
                }
            }
        });

        let corner_radius = animation.read().value();

        rect()
            .width(Size::px(48.))
            .height(Size::px(48.))
            .center()
            .corner_radius(corner_radius)
            .background(0xff424659)
            .color(0xffdfe1f9)
            .child(self.value.to_string())
            .on_press({
                let state = self.state.clone();
                let value = self.value.clone();

                move |_| {
                    state.clone().set(value.clone());
                }
            })
    }
}

#[derive(PartialEq)]
struct Setter2<T: Display + Clone + PartialEq + 'static> {
    pub state: Writable<T>,
    pub value: T,
}

impl<T: Display + Clone + PartialEq + 'static> Component for Setter2<T> {
    fn render(&self) -> impl IntoElement {
        let animation = use_animation_with_dependencies(&(&*self.state.read() == &self.value), {
            move |conf, selected| {
                conf.on_creation(OnCreation::Finish);
                conf.on_change(OnChange::Rerun);

                let corners = AnimNum::new(12., 48.).time(500);

                if *selected {
                    corners
                } else {
                    corners.into_reversed()
                }
            }
        });

        let corner_radius = animation.read().value();

        rect()
            .width(Size::px(48.))
            .height(Size::px(48.))
            .center()
            .corner_radius(CornerRadius {
                top_left: corner_radius,
                top_right: 0.,
                bottom_right: 0.,
                bottom_left: 0.,
                smoothing: 0.,
            })
            .background(0xff424659)
            .color(0xffdfe1f9)
            .child(self.value.to_string())
            .on_press({
                let state = self.state.clone();
                let value = self.value.clone();

                move |_| {
                    state.clone().set(value.clone());
                }
            })
    }
}