本文共 1622 字，大约阅读时间需要 5 分钟。

实现介绍

该功能主要使用了QML动画中的NumberAnimation来实现，下面简单介绍一下NumberAnimation。

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

代码

import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Window 2.12Window {
       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        }    }}

转载地址：http://cxuun.baihongyu.com/