QMLはどのようにしてウィンドウのズームと非表示を実現しますか

上記は、ウィンドウが長方形の方法でズーム、非表示、および表示されることを認識しています。

実装の紹介

この関数は、主にQMLアニメーションのNumberAnimationによって実装されます。次に、NumberAnimationについて簡単に紹介します。
NumberAnimationは、その名前が示すように、デジタルアニメーションであり、タイプの属性を値として変更して、幅、高さ、半径、スケールなどの一連のアニメーションを生成できます。
関連する属性の紹介：

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
        }
    }

}