QML如何实现窗口缩放隐藏

上面实现了窗口以矩形的方式进行缩放隐藏和显示。

实现介绍

该功能主要使用了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
        }
    }

}