QML動畫 - 移動應用程序窗口

Question

我想創建一個動畫來移動（或調整）使用QML構建的應用程序窗口。

我有以下代碼（大部分是默認創建的，當我們創建了一個QT快速控制應用：

的main.cpp

#include <QApplication> 
#include <QQmlApplicationEngine> 

int main(int argc, char *argv[]) 
{ 
    QApplication app(argc, argv); 

    QQmlApplicationEngine engine; 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 

    return app.exec(); 
} 

MainForm.ui.qml

import QtQuick 2.6 
import QtQuick.Controls 1.5 
import QtQuick.Layouts 1.3 

Item { 
    width: 640 
    height: 480 

    property alias button1: button1 
    property alias button2: button2 

    RowLayout { 
     anchors.centerIn: parent 

     Button { 
      id: button1 
      text: qsTr("Press Me 1") 
     } 

     Button { 
      id: button2 
      text: qsTr("Press Me 2") 
     } 
    } 
} 

main.qml

import QtQuick 2.6 
import QtQuick.Controls 1.5 
import QtQuick.Dialogs 1.2 

ApplicationWindow { 
    id: mainWindow 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint 

    menuBar: MenuBar { 
     Menu { 
      title: qsTr("File") 
      MenuItem { 
       text: qsTr("&Open") 
       onTriggered: console.log("Open action triggered"); 
      } 
      MenuItem { 
       text: qsTr("Exit") 
       onTriggered: Qt.quit(); 
      } 
     } 
    } 

    MainForm { 
     anchors.fill: parent 
     button1.onClicked: Qt.quit(); 
     button2.onClicked: state = "other"; 
    } 

    transitions: [ 
     Transition { 
      from: "*" 
      to: "other" 
      NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 } 

     } 
    ] 

    states: [ 
     State { 
      name: "other" 
      PropertyChanges { 
       target: mainWindow 
       x: x + 200 
      } 
     } 
    ] 

    MessageDialog { 
     id: messageDialog 

     function show(caption) { 
      messageDialog.text = caption; 
      messageDialog.open(); 
     } 
    } 
} 

有了這段代碼，我只是試圖將窗口向右移動200個像素。當我嘗試運行它時，我得到了qrc:/main.qml:42 Cannot assign to non-existent property "states"。我相信這很奇怪，因爲當我開始輸入「狀態」並選擇自動完成時，它爲我建立了整個結構，所以我認爲它應該存在...

我是QML的新手，我不完全熟悉存在的動畫的幾個選項。我試過的一個基於QT創建者（animation.pro - 來自轉換的代碼）的示例。

我相信它應該很簡單吧？你能幫我解決這個問題嗎？

Answer 1

Qt Creator有一個功能，您可以使用某些關鍵字插入代碼片段。您可以通過Tools > Options > Text Editor > Snippets查看哪些代碼段可用。

片段將顯示爲紅色的自動完成彈出，並定期性（或類型，如下的情況下）將顯示爲綠色：

所以，ApplicationWindow不有一個國有財產。如果您有疑問，請查看您感興趣的文檔（例如http://doc.qt.io/qt-5/qml-qtquick-controls-applicationwindow.html），然後點擊「List of all members, including inherited members」鏈接。這會向您顯示屬於該類型的所有屬性，功能等等 。

---

如果你想動畫窗口的位置，你可以使用一個NumberAnimation不使用狀態：

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.5 

ApplicationWindow { 
    id: window 
    width: 400 
    height: 400 
    visible: true 

    NumberAnimation { 
     id: xyAnimation 
     target: window 
     properties: "x,y" 
     easing.type: Easing.InOutQuad 
     duration: 2000 
     to: 500 
    } 

    Button { 
     text: "Start" 
     onClicked: xyAnimation.start() 
    } 
} 

Answer 2

state是Item的屬性，但是ApplicationWindow不是Item。國家/過渡添加到一個非Item類型，使用StateGroup：

ApplicationWindow { 
    id: mainWindow 
    //your code... 

    MainForm { 
     button2.onClicked: { myWindowStates.state = "other";} 
    } 

    StateGroup { 
     id: myWindowStates 

     transitions: [ 
      Transition { 
       from: "*"; to: "other" 
       NumberAnimation { 
        properties: "x,y"; easing.type: Easing.Linear; 
        duration: 2000 
       } 
      } 
     ] 

     states: [ 
      State { 
       name: "other" 
       PropertyChanges { 
        target: mainWindow 
        x: mainWindow.x + 200 
        explicit: true //Remember to set this 
       } 
      } 
     ] 
    } 
} 

記得設置PropertyChange.explict到true，否則國家的行爲是錯誤的，在過渡完成後，你的窗口就會消失。