Qt QML页面翻转控件封装

前言

用QML实现页面翻转，QML自带控件Flipable已实现该功能，但是无法满足我要的功能需求，于是在Flipable基础上封装了一下，添加翻转过程中的动画，在翻转过程中修改页面opacity、scale、angle。

最终效果图如下：

代码实现

先看封装好的Flipable，命名为TLFlipable.qml

import QtQuick 2.6

Flipable {
    id: container

    property bool flipped: true
    property int xAxis: 0
    property int yAxis: 1
    property int angle: 180

    width: front.width
    height: front.height
    state: "back"
        origin.x: container.width / 2;
        origin.y: container.height / 2
        axis.y: container.yAxis;
        axis.z: 0
    }

    states: [
        State {
            name: "back";
            when: container.flipped
            PropertyChanges {
                target: rotation;
                angle: container.angle
            }
        }
    ]

    transitions: Transition {

        SequentialAnimation {
            ParallelAnimation{
                NumberAnimation {
                    target: container;
                    property: "scale";
                    to: 0.88;
                    duration: 100
                    property: "opacity";
                    to:0.7
                    duration: 100;
                    easing.type: Easing.Linear
                }
            }

            ParallelAnimation {
                NumberAnimation {
                    target: container;
                    property: "scale";
                    to: 0.75;
                    duration: 130
                    properties: "angle";
                    duration: 290
                    property: "opacity";
                    to:0.4
                    duration: 290;
                    easing.type: Easing.Linear
                }
            }
            ParallelAnimation{
                NumberAnimation {
                    target: container;
                    property: "scale"
                    to: 1.0
                    duration: 170
                    property: "opacity";
                    to:1
                    duration: 170;
                    easing.type: Easing.Linear
                }

            }
        }
    }
}

然后调用该控件FlipableTest.qml

import QtQuick 2.6

Rectangle{
    width: 250
    height: 350

    TLFlipable{
        id:flipable
        anchors.fill: parent
        front: rect1
        back: rect2

        MouseArea{
            anchors.fill: parent
            onClicked: {
                flipable.flipableClick()
            }
        }
    }

    Rectangle{
        id:rect1
        color:"red"
        width: parent.width
        height: parent.height
        Text {
            anchors.centerIn: parent
            font.pixelSize: 30
            font.bold: true
            color:"white"
            text: qsTr("Page 1")
        }
    }

    Rectangle{
        id:rect2
        color:"green"
        width: parent.width
        height: parent.height
        Text {
            anchors.centerIn: parent
            font.pixelSize: 30
            font.bold: true
            color:"white"
            text: qsTr("Page 2")
        }
    }
}

最后用qmlscene执行FlipableTest.qml即可看到以上图片的翻转效果。