Qml翻转效果

Posted 2020-10-12

使用Flipable, 根据状态改变进行翻转动画

    Flipable{
        id: flip
        width: 300
        height: 300
        anchors.centerIn: parent

        property bool flipped: false

        front:Image{
            anchors.fill: parent
            source: "qrc:/images/1.jpg"
        }

        back:Image{
            anchors.fill: parent
            source: "qrc:/images/2.jpg"
        }

        transform: Rotation{
            id: rotation
            origin.x: flip.width / 2
            origin.y: flip.height / 2
            axis.x: rx.checked
            axis.y: ry.checked
            axis.z: rz.checked
            angle: 0
        }

        states:State{
            PropertyChanges {
                target: rotation
                angle:180
            }
            when:flip.flipped
        }

        transitions: Transition{
            NumberAnimation{
                target:rotation
                properties: "angle"
                duration:1000
            }
        }
    }

需要完整代码请访问QtQuickExamples