QML如何实现窗口缩放隐藏

QML如何实现窗口缩放隐藏_第1张图片
上面实现了窗口以矩形的方式进行缩放隐藏和显示。

实现介绍

该功能主要使用了QML动画中的NumberAnimation来实现,下面简单介绍一下NumberAnimation。
NumberAnimation顾名思义就是数字动画,可以改变类型为数值的属性,从而产生一系列的动画,例如,width,height,radius,scale等等。
相关属性介绍:

target: 目标
easing.type: 动画播放形式,详情:https://www.xuebuyuan.com/146517.html
properties:  对应的属性,例如"width","scale","height","x","y"
from: 启示状态值
to: 终止状态值
duration: 持续时间,单位ms

代码

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    width:640
    height:480
    visible:true
    Rectangle{
        id: root
        anchors.fill: parent
        color: "black"

        Rectangle {
            id: rect1
            radius: 20
            width:root.width
            height:root.height
            color:"gray"
            NumberAnimation on scale { to: 0; duration: 5000}
        }

        Button {
            id:btn1
            text: "disable"
            anchors.centerIn: parent
            onClicked: {
                animation.start()
            }
        }

        Button {
            id:btn2
            text: "show"
            anchors.top: btn1.bottom
            anchors.topMargin: 20
            anchors.left: btn1.left
            onClicked: {
                animation2.start()
            }
        }

        NumberAnimation {
            id: animation
            target: rect1
            easing.type: Easing.InCubic
            properties:  "scale"
            to: 0
            duration: 500
        }

        NumberAnimation{
            id: animation2
            target: rect1
            easing.type: Easing.InCubic
            properties:  "scale"
            to: 1
            duration: 500
        }
    }

}


你可能感兴趣的:(QT/QML,qt5,qml,ui)