Listview Populate Transition Interrupted

[afalsa]

Hello!

Problem
With the code shown at the bottom of this message, the following issue occurs: if the populate animation is running and, at the same time, the hover animation of the delegate is triggered, the delegate ends up with an unexpected scale.

So, is there any way to avoid this?

I know I can control the state of the corresponding MouseArea in the delegate, but I was hoping to find a less hacky solution.

Thank you!

Some links I have visited

https://doc.qt.io/qt-6.8/qml-qtquick-viewtransition.html#handling-interrupted-animations
https://doc.qt.io/qt-6/qml-qtquick-transition.html

Code (Copy & Paste to try)

import QtQuick
import QtQuick.Controls

Item {
    id: root
    width: 1920
    height: 1080

    ListView {
        id: repeaterModel
        anchors.fill: parent

        spacing: 10

        model: 5

        orientation: ListView.Horizontal

        delegate: Rectangle {
            id: test_delegate
            anchors.verticalCenter: parent.verticalCenter
            width: 100
            height: 200
            color: "red"

            property real normalScale: 1.0
            property real zoomedScale: 1.2
            property real normalRotation: 0
            property real zoomedRotation: 0

            onScaleChanged: console.log("Scale changed %1".arg(scale))

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
                onEntered: test_delegate.state = "zoomed"
                onExited: test_delegate.state = ""
            }

            states: [
                State {
                    name: "zoomed"
                    PropertyChanges {
                        target: test_delegate
                        scale: zoomedScale
                        rotation: zoomedRotation
                    }
                }
            ]

            transitions: [
                Transition {
                    from: ""
                    to: "zoomed"
                    ParallelAnimation {
                        NumberAnimation {
                            properties: "scale"
                            duration: 300
                            easing.type: Easing.OutBack
                        }
                        NumberAnimation {
                            properties: "rotation"
                            duration: 300
                            easing.type: Easing.OutBack
                        }
                    }
                },
                Transition {
                    from: "zoomed"
                    to: ""
                    ParallelAnimation {
                        NumberAnimation {
                            properties: "scale"
                            duration: 300
                            easing.type: Easing.InBack
                        }
                        NumberAnimation {
                            properties: "rotation"
                            duration: 300
                            easing.type: Easing.InBack
                        }
                    }
                }
            ]
        }

        populate: Transition {
            id: transition
            SequentialAnimation {

                ScriptAction {
                    script: {
                        console.log(transition.ViewTransition.index) /* prints as intended */
                    }
                }
                PropertyAction {
                    property: "scale"
                    value: 0
                }
                PauseAnimation {
                    duration: transition.ViewTransition.index * 100
                }
                NumberAnimation {
                    duration: 500
                    properties: "scale"
                    from: 0
                    to: 1
                }
            }
        }
    }
}

[afalsa]

Hello again!

After some digging, I’ve found an "elegant" solution.

First, setting the NumberAnimation with a duration of 500 (population animation) was interfering with the hover animation duration (Delegate), which is 300. That was causing some weird behavior.

The second part is that I added the property change in the "" state, which fixed the issue and now the element returns to its original position even if the animation gets interrupted.

            states: [
                State {
                    name: "zoomed"
                    PropertyChanges {
                        target: test_delegate
                        scale: zoomedScale
                        rotation: zoomedRotation
                    }
                },
                State {
                    name: ""
                    PropertyChanges {
                        target: test_delegate
                        scale: normalScale
                        rotation: normalRotation
                    }
                }
            ]