【Qt Quick聊天软件练习】三、注册账号界面搭建

1 注册账号按钮

点击注册账号按钮后，让界面以Y轴旋转

在LoginPanel.qml文件中添加如下代码

    transform: Rotation{
        //围绕哪个点开始旋转
        origin.x: root.width/2
        origin.y: root.height/2

        //绕着Y轴旋转
        axis{
            x: 0
            y: 1
            z: 0
        }
        //角度动画
        NumberAnimation on angle{
            id:na_Rotation_forward
            running: false
            from: 0
            to: 90
            duration: 500
            loops: 1
        }        //角度动画
        NumberAnimation on angle{
            id:na_Rotation_back
            running: false
            from: 90
            to: 0
            duration: 500
            loops: 1
        }
    }

将第二段动画别名引出

property alias anim_back: na_Rotation_back

然后在注册账号方法中调用，播放登录界面旋转的同时，打开Timer延时播放第二段动画，该动画为注册界面反向旋转出来

    //注册账号
    Text {
        id: text_RegisterAnAccount
        text: qsTr("注册账号")
        opacity: 0.5
        font{
            bold:true
            pixelSize: root.fontSize - 4
        }
        anchors{
            left: parent.left
            leftMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
            	na_Rotation_forward.running = true
                time_RotationAnim.running = true
            }
        }
    }
        //延时播放第二段动画
    Timer{
        id:time_RotationAnim
        interval: 500;
        running: false;
        repeat: false
        onTriggered: {
            root.visible = false
            main_Window.rp_root.visible = true
            main_Window.rp_root.anim_forward.running = true
        }
    }

2 注册界面

2.1 主界面

主要是为了实现功能，界面比较简单，后期完成了再来细改吧（其实就是美术渣）

2.2 创建注册账号面板qml文件

创建RegisterPanel.qml文件
宽高和登录面板一致，为了注册面板旋转出来的时候不那么突兀

property alias anim_forward: na_Rotation_forward

    //背景
    Rectangle{
        id:rect_bg
        anchors.fill: parent
        color: "#d7dcdc"
        border.color: "black"
        border.width: 1
        radius: 10
    }

    //鼠标按下拖拽窗口移动
    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton//只检测鼠标左键
        property var _X: 0
        property var _Y: 0
        onPressed: {
            _X = mouseX
            _Y = mouseY
        }
        onPositionChanged: {
            main_Window.x += mouseX - _X
            main_Window.y += mouseY - _Y
        }
    }

    //右上角返回按钮
    Image{
        id:image_back
        width: 40
        height: 40
        source: "Images/返回按钮.png"
        sourceSize: Qt.size(width,height)
        anchors{
            right: parent.right
            rightMargin: 15
            top: parent.top
            topMargin: 15
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                na_Rotation_back.running = true
                time_RotationAnim.running = true
            }
        }
    }

    //延时播放第二段动画
    Timer{
        id:time_RotationAnim
        interval: 500;
        running: false;
        repeat: false
        onTriggered: {
            root.visible = false
            main_Window.lp_root.visible = true
            main_Window.lp_root.anim_back.running = true
        }
    }

    transform: Rotation{
        //围绕哪个点开始旋转
        origin.x: root.width/2
        origin.y: root.height/2

        //绕着Y轴旋转
        axis{
            x: 0
            y: 1
            z: 0
        }
        //角度动画
        NumberAnimation on angle{
            id:na_Rotation_forward
            running: false
            from: -90
            to: 0
            duration: 500
            loops: 1
        }
        //角度动画
        NumberAnimation on angle{
            id:na_Rotation_back
            running: false
            from: 0
            to: -90
            duration: 500
            loops: 1
        }
    }

3 main.qml

Window {
    id:main_Window
    visible: true
    width: 400
    height: 540
    title: qsTr("Chat")
    color: "transparent"
    flags: Qt.Window | Qt.FramelessWindowHint
    property alias lp_root: lp_root
    property alias rp_root: rp_root


    LoginPanel{id:lp_root}
    RegisterPanel{id:rp_root}
}

4 效果展示

✨结语✨

由于此时已经太晚了，第二天还得上班，先偷个懒做到这里，这个界面旋转的方式切换在旋转的时候会有明显卡顿，以后再来改善，(￣o￣) . z Z