QML之按鍵翻轉效果

效果

Demo源碼

第一個圖片是書上的demo，第二個和第三個做了修改

Flipable {
    id: flipable
    width: 240
    height: 240

    property bool flipped: false

    front: Image { source: "front.png"; anchors.centerIn: parent }
    back: Image { source: "back.png"; anchors.centerIn: parent }

    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0
        angle: 0
    }

    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}

修改源碼

這裏的font和back的內容只要是繼承自item的即可，所以通過修改font和back的內容和座標軸、旋轉原點、動畫等可以實現很多效果

 /******************翻轉效果***********************/
    Flipable {
        id: flipable
        width: 150
        height: 150
        anchors.centerIn: parent

        property bool flipped: false

        front: frontLayout
        back: backLayout

        transform: Rotation {
            id: rotation
            //旋轉座標原點
            origin.x: frontLayout.width/2
            origin.y: frontLayout.height/2
            //指定座標軸
            axis.x: 0; axis.y: 1; axis.z: 0
            //axis.x: 0.5; axis.y: 0.5; axis.z: 0.5
            angle: 0
        }

        states: State {
            name: "back"
            PropertyChanges { target: rotation; angle: 180 }
            //PropertyChanges { target: rotation; angle: 360 }
            //when屬性，當值爲true時切換到當前狀態，爲false時切換到默認狀態
            when: flipable.flipped
        }

        transitions: Transition {
            NumberAnimation { target: rotation; property: "angle"; duration: 800 }
            //註釋掉的內容是效果3
            //NumberAnimation { target: rotation; property: "angle"; duration: 2000 }
            SequentialAnimation {
                NumberAnimation { target: flipable; property: "scale"; to: 0.5; duration: 300 }
                NumberAnimation { target: flipable; property: "scale"; to: 1.0; duration: 300 }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: flipable.flipped = !flipable.flipped
        }
    }
    Rectangle{
        id: frontLayout
        width: 200
        height: 250
        color: "transparent"
        border.width: 2
        border.color: "#36ab60"
        radius: 8
        ColumnLayout{
            anchors.fill: parent

            Rectangle{
                width: 150
                height: 150
                color: "transparent"
                Layout.alignment: Qt.AlignHCenter
                Image{
                    anchors.centerIn: parent
                    source: "images/start.png"
                }
            }

            Text {
                Layout.alignment: Qt.AlignHCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 20
                font.pixelSize: 23
                color: "#36ab60"
                text: "開始播放"
            }
        }

    }

    Rectangle{
        id: backLayout
        width: 200
        height: 250
        color: "transparent"
        border.width: 2
        border.color: "#e0620d"
        radius: 8
        ColumnLayout{

            anchors.fill: parent
            Rectangle{
                width: 150
                height: 150
                color: "transparent"
                Layout.alignment: Qt.AlignHCenter
                Image{
                    anchors.centerIn: parent
                    source: "images/stop.png"
                }
            }

            Text {
                Layout.alignment: Qt.AlignHCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 20
                font.pixelSize: 23
                color: "#e0620d"
                text: "停止播放"
            }
        }
    }