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