qml 简单数字动画

示例

您可能会遇到的非常基本的动画之一是NumberAnimation。该动画通过将项目属性的数值从初始状态更改为最终状态来工作。考虑以下完整示例：

import QtQuick 2.7    
importQtQuick.Controls2.0    

ApplicationWindow {
    visible: true
    width: 400
    height: 640

    Rectangle{
        id: rect
        anchors.centerIn: parent
        height: 100
        width: 100
        color: "blue"
        MouseArea{
            anchors.fill: parent
            onClicked:na.running= true
        }

        NumberAnimation {
            id: na    //QML动画类型的ID  
            target: rect    //动画应在其上运行的目标项目  
            property: "height"    //动画师应该更改以显示效果的目标项目的属性  
            duration: 200    //动画应运行的持续时间  
            from:rect.height   //在“属性”中声明的属性的初始数值
            to: 200    //在“属性”中声明的属性的最终数值
        }
    }
}