How to trigger Animation on one Item in a ListView

Question

I try to trigger a SequentialAnimation on a given Item of a ListView.

For example:

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: modelList
        ListElement {}
        ListElement {}
        ListElement {}
    }

    ListView {
        width: window.width
        height: window.height

        model: modelList
        delegate: Rectangle {
            width: window.width
            height: window.height/10
            color: "red"
            radius : 10
            SequentialAnimation on color { //Should be only triggered when button clicked
                ColorAnimation { to: "yellow"; duration: 1000 }
                ColorAnimation { to: "red"; duration: 1000 }
            }

            Button {
                text: "trigger animation"
                anchors{
                    right: parent.right
                    top: parent.top
                    bottom: parent.bottom
                    margins: 10
                }

                onClicked: {
                    //Trigger SequentialAnimation
                }
            }
        }
    }
}

I try to trigger the Animation when you click on the button but I don't know how to use a condition on an Animation. How could I proceed ?

dtech · Accepted Answer · 2017-05-10T12:12:48.797

1

Use animation on property only if you want changes to be automatically animated.

In your case you need to remove the on color part, then give the animation an id: yourAnimation, and on the button click yourAnimation.start()

Actually, it seems that on color is also possible, skipping setting the target:

SequentialAnimation on color {
  id: yourAnimation
  ColorAnimation { to: "yellow"; duration: 1000 }
  ColorAnimation { to: "red"; duration: 1000 }
  running: false
}

edited May 10 '17 at 12:12

answered May 10 '17 at 12:06

dtech

44,350
16
93
165

Thanks it works ! I also have to add `target: myItem; property: "color";` in `ColorAnimation` – Ed Nio May 10 '17 at 12:11
@dtech Could you please help me with the following : http://stackoverflow.com/questions/43918657/how-to-smoothly-load-lines-with-customized-scrollbar-event-in-qt – Sumeet May 11 '17 at 16:42
@dtech Any help would be deeply appreciated. – Sumeet May 11 '17 at 16:42

How to trigger Animation on one Item in a ListView

1 Answers1