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: "停止播放"
            }
        }
    }