Qml中动画失效问题

今天在学习qml动画时忽然遇到一个动画莫名奇妙不起作用问题

代码如下

import QtQuick

Rectangle {
    id: item
    width: 640
    height: 480
    visible: true
    color: "white"
    state: "left"

    Column {
        //left
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.leftMargin: 5
        spacing: 20
        Rectangle {
            width: item.width / 2 - 10
            height: item.height / 5
            color: "gray"
            Text {
                id: leftText
                anchors.centerIn: parent
                font.pixelSize: 25
                font.bold: true
                text: "Active"
            }
        }
        Rectangle {
            id: leftRect
            width: item.width / 2 - 10
            height: item.height / 2
            color: "lightyellow"
            Text {
                anchors.centerIn: parent
                font.pixelSize: 35
                font.bold: true
                text: "Clicked me!"
            }

            MouseArea {
                id: leftMouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("left - mouse clicked")
                    leftAnimation.start()
                    console.log("left - animation started")
                }
            }
        }
    }

    Column {
        //right
        width: item.width / 2 - 10
        height: item.height / 5
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: 5
        spacing: 20
        Rectangle {
            width: item.width / 2 - 10
            height: item.height / 5
            color: "gray"
            Text {
                id: rightText
                anchors.centerIn: parent
                font.pixelSize: 25
                font.bold: true
                text: "Inactive"
            }
        }
        Rectangle {
            id: rightRect
            width: item.width / 2 - 10
            height: item.height / 2
            color: "lightgray"
            Text {
                anchors.centerIn: parent
                font.pixelSize: 35
                font.bold: true
                text: "Clicked me!"
            }

            MouseArea {
                id: rightMouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("right - mouse clicked")
                    rightAnimation.start()
                    console.log("right - animation started")
                }
            }
        }
    }


    SequentialAnimation {
        id: rightAnimation

        ColorAnimation {
            target: rightRect
            from: "lightgray"
            to: "green"
            duration: 2000
        }

        ColorAnimation {
            target: rightRect
            from: "green"
            to: "lightgray"
            duration: 2000
        }
    }
    SequentialAnimation {
        id: leftAnimation
        ColorAnimation {
            target: leftRect
            from: "lightyellow"
            to: "white"
            duration: 2000
        }

        ColorAnimation {
            target: leftRect
            from: "white"
            to: "lightyellow"
            duration: 2000
        }
    }
}

　　后来多次测试发现是 ColorAnimation 不知道为何失效了，语法检查并未发现问题，改用属性动画解决 

import QtQuick

Rectangle {
    id: item
    width: 640
    height: 480
    visible: true
    color: "white"
    state: "left"

    Column {
        //left
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.leftMargin: 5
        spacing: 20
        Rectangle {
            width: item.width / 2 - 10
            height: item.height / 5
            color: "gray"
            Text {
                id: leftText
                anchors.centerIn: parent
                font.pixelSize: 25
                font.bold: true
                text: "Active"
            }
        }
        Rectangle {
            id: leftRect
            width: item.width / 2 - 10
            height: item.height / 2
            color: "lightyellow"
            Text {
                anchors.centerIn: parent
                font.pixelSize: 35
                font.bold: true
                text: "Clicked me!"
            }

            MouseArea {
                id: leftMouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("left - mouse clicked")
                    leftAnimation.start()
                    console.log("left - animation started")
                }
            }
        }
    }

    Column {
        //right
        width: item.width / 2 - 10
        height: item.height / 5
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: 5
        spacing: 20
        Rectangle {
            width: item.width / 2 - 10
            height: item.height / 5
            color: "gray"
            Text {
                id: rightText
                anchors.centerIn: parent
                font.pixelSize: 25
                font.bold: true
                text: "Inactive"
            }
        }
        Rectangle {
            id: rightRect
            width: item.width / 2 - 10
            height: item.height / 2
            color: "lightgray"
            Text {
                anchors.centerIn: parent
                font.pixelSize: 35
                font.bold: true
                text: "Clicked me!"
            }

            MouseArea {
                id: rightMouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("right - mouse clicked")
                    rightAnimation.start()
                    console.log("right - animation started")
                }
            }
        }
    }

    SequentialAnimation {
        id: rightAnimation

        // ColorAnimation {
        //     target: rightRect
        //     from: "lightgray"
        //     to: "green"
        //     duration: 2000
        // }

        // ColorAnimation {
        //     target: rightRect
        //     from: "green"
        //     to: "lightgray"
        //     duration: 2000
        // }
        PropertyAnimation {
            target: rightRect
            property: "color"
            from: "lightgray"
            to: "green"
            duration: 2000
        }
        PropertyAnimation {
            target: rightRect
            property: "color"
            from: "green"
            to: "lightgray"
            duration: 2000
        }
    }
    SequentialAnimation {
        id: leftAnimation
        // ColorAnimation {
        //     target: leftRect
        //     from: "lightyellow"
        //     to: "green"
        //     duration: 2000
        // }

        // ColorAnimation {
        //     target: leftRect
        //     from: "green"
        //     to: "lightyellow"
        //     duration: 2000
        // }

        PropertyAnimation {
            target: leftRect
            property: "color"
            from: "lightyellow"
            to: "green"
            duration: 2000
        }
        PropertyAnimation {
            target: leftRect
            property: "color"
            from: "green"
            to: "lightyellow"
            duration: 2000
        }
    }
}