Flipable -- 翻转示例

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
        }
    }

    //--------------------------------------------------------------
}