When updating UI components, there is an error in the animation effect.

[timsaya]

I'm using macOS, Rust.

I am making a button. After pressing the mouse, the color turns blue. I implemented it and it was successful.

However, when I update the text of the button itself at a high frequency (number in the video has been updated every 1s), there will be a problem with this animation effect, which will flash with the time interval set by the Timer （slint::Timer）.

https://github.com/slint-ui/slint/assets/155968641/a408ea82-ae18-4817-81b7-403c9b400beb

    states [
        pressed when copy-touch.pressed:{
            copy-btn.opacity: 1;
            copy-btn.background: blue;
        }
    ]

  // gray background
   copy-btn := Rectangle {
        width: 145px;
        height: 35px;
        background: gray;
        opacity: 0.1;
        x: 60px;
        y: 55px;
        border-radius: 10px;

        animate background,opacity {
            duration: 200ms;
        }

        copy-touch := TouchArea{
            clicked => {
                Logic.copy-to-clipboard(root.dynamic-code);
            }
        }
    }

   // Text and copy icon
    Rectangle {
        width: 115px;
        height: 35px;
        x: 60px;
        y: 55px;
        border-radius: 10px;

        HorizontalLayout {
            padding-left: 5px;
            Text {
                vertical-alignment: center;
                text: root.dynamic-code;
                font-size: 22px;
                color: black;
            font-weight: 600;
            }
            spacing: 30px;
            Rectangle {
                Image {
                    source: @image-url("../icons/copy.png");
                    width: 18px;
                    height: 18px;
                }
            }
        }
    }

In Rust, I just use slint::Timer to update global variables （ButtonList）。

and then in Slint render multiple buttons through a for loop.

Is it due to the for loop performance that causes this flickering problem?

[hunger]

Sorry, but could you please paste the complete example? There seems to be quite a bit missing in your paste. It is really hard to say what might cause the issue without some code to look at :-)

Could you maybe post a slintpad link?

[timsaya]

Hi, I post complete code to Gist https://gist.github.com/timsaya/119a8794aa784b6ea39244f468c0837b

[hunger]

You put a secret on the public internet, so it is no secret anymore:-) You might want to change that now.

I think the issue you are having is this: Each timer-tick you replace the model. This leads to the button being deleted and re-created. Effectively you have a new button appears in the place of the old one. As it appears below the mouse cursor it will trigger the hover animation you defined.

You could try to just update the data in the existing model instead. That should keep the existing button around, so no new hover animation.

[timsaya]

Thank you very much, it solved my problem. Don't worry about secret-key, it's fake. Thank you .

[hunger]

Thank you for your feedback, I'll close this then :-)

Good fortune with your Slint project.