Flipable 实现前后两侧翻转
- front:前测
- back:后侧
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
minimumWidth: 1280
minimumHeight: 960
visible: true
// ------------------------------------------------------------------
Flipable{
id: flip
anchors.centerIn: parent
width: 320
height: 240
property bool flipped: false
front: Image {
id: frontflip
source: "scence.jpg"
width: flip.width
height: flip.height
anchors.centerIn: parent
}
back:Image {
id: backflip
source: "Garland.jpg"
width: flip.width
height: flip.height
anchors.centerIn: parent
}
transform: Rotation{
id: rotationflip
origin.x: flip.width / 2
origin.y: flip.height / 2
angle: 0
axis.x: 0
axis.y: 1
axis.z: 0
}
states:State {
name: "back"
PropertyChanges {
target: rotationflip
angle: 180
}
when: flip.flipped
}
transitions: Transition {
NumberAnimation{
target: rotationflip
properties: "angle"
duration: 4000
}
}
MouseArea{
anchors.fill: parent
onClicked: flip.flipped = !flip.flipped
}
}
//--------------------------------------------------------------
}