如何在ListView中的一个项目上触发动画

Question

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
                }
            }
        }
    }
}

Answer 1

仅当希望更改自动动画时，才在属性上使用动画。

在您的示例中，您需要删除颜色上的部分，然后给动画一个ID:youranimation，然后在按钮上单击youranimation.start()

实际上，on color似乎也是可能的，跳过设置目标：

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