How does QML realize window zooming and hiding

Insert picture description here
The above has realized that the window is zoomed, hidden and displayed in a rectangular manner.

Implementation introduction

This function is mainly implemented by NumberAnimation in QML animation. The following briefly introduces NumberAnimation.
NumberAnimation, as its name implies, is digital animation, which can change the attribute of the type as a value to generate a series of animations, such as width, height, radius, scale, and so on.
Related attributes introduction:

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

Code

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

}


Guess you like

Origin blog.csdn.net/PRML_MAN/article/details/113582110