rectangle animation does not take effect

[lifeRobot]

slint 1.4.1, windows 11

animate code

TouchArea {
    mouse-cursor: mouse_cursor;

    clicked => {
        id = tab.id;
        line.x = rect.x;
        line.width = rect.width;
        clicked(tab);
    }
}

animate x,width {
     duration: 300ms;
}

animation does not take effect full code(.slint)

the animation effect of the rectangle in the following code does not take effect, code from @jui/nav/tabs.slint

export struct TabsData {
    id: string,
    text: string,
}

export component Tabs {
    // now selected id, default is data[0].id
    in-out property <string> id: data[0].id;
    in property <[TabsData]> data;
    in property <length> font_size: 14px;
    in property <brush> color: black;
    in property <length> spacing: 8px;
    in property <MouseCursor> mouse_cursor: pointer;
    in property <brush> active_color: deepskyblue;

    callback clicked(TabsData);

    // line default width
    txt:= Text {text:data[0].text;font_size: font_size;visible: false;}

    cont:= HorizontalLayout {
        alignment: start;
        spacing: spacing;

        for tab in data: rect:= Rectangle {
            Text {
                text: tab.text;
                color: id == tab.id ? active_color : color;
                font_size: font_size;
            }

            TouchArea {
                mouse-cursor: mouse_cursor;

                clicked => {
                    id = tab.id;
                    line.x = rect.x;
                    line.width = rect.width;
                    clicked(tab);
                }
            }
        }

    }

    line:= Rectangle {
        x: 0px;
        y: cont.height + 5px;
        width: txt.width;
        height: 2px;
        background: active_color;

        animate x,width {
             duration: 300ms;
        }
    }
}

export component App inherits Window {
    background: yellow;
    width: 1000px;
    height: 500px;

    Tabs {
        data: [
            {id:"1",text:"tab1"},
            {id:"2",text:"tab2"}
        ];
    }
}

code running effect

20240303190115.webm

[tronical]

Thanks for the bug report. I can't quite reproduce this. It works for me on Slintpad, as well as on macOS, and Windows.

But I see in your clip that it isn't working for you, which makes me wonder if this could perhaps be a performance issue.

I'm trying to run on the above .slint file with slint-viewer. Could you try the same and see if it works if you pass --release, i.e. cargo run -p slint-viewer --release -- \path\to\test.slint (in the slint git repo clone)?

[lifeRobot]

Thanks for the bug report. I can't quite reproduce this. It works for me on Slintpad, as well as on macOS, and Windows.

But I see in your clip that it isn't working for you, which makes me wonder if this could perhaps be a performance issue.

I'm trying to run on the above .slint file with slint-viewer. Could you try the same and see if it works if you pass --release, i.e. cargo run -p slint-viewer --release -- \path\to\test.slint (in the slint git repo clone)?

try

1. I'm run on the above .slint file with slint-viewer in my Windows, and it ran successfully, slintpad successful too
2. But I use slint-rust-template run the .slint file, then will animation fail
3. The code for example Cargo.toml file

   
   [package]
   name = "slint-rust-template-main"
   version = "0.1.0"
   authors = ["123"]
   edition = "2021"
   build = "build.rs"

See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies] slint = "1.4"

[build-dependencies] slint-build = "1.4"

build.rs file

fn main() { slint_build::compile("ui/appwindow.slint").unwrap(); }

main.rs file

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> { let ui = AppWindow::new()?.run() }

.slint file copy from example code

### analysis
Perhaps it is due to the different loading method of slint by `slint_build::compile` + `slint::include_modules!();` compared to `slint-viewer`

[ogoffart]

Thanks for the report. I can indeed reproduce the bug when compiled with rust (and C++) but not with the viewer.

[ogoffart]

Smaller testcase:

export component MainWindow inherits Window {
    width: 200px;
    height: 200px;

    if true: TouchArea {
        clicked => {
            line.x = 100px;
        }
    }

    line:= Rectangle {
        x: 0px;
        y: 5px;
        width: 20px;
        height: 2px;
        background: blue;
        animate x {
             duration: 300ms;
        }
    }
}

Looks like the if or for prevent the animation from working correctly