QML之按键翻转效果

来源：互联网发布：sql cast函数编辑：程序博客网时间：2024/06/07 00:04

效果

这里写图片描述

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

阅读全文

0 0