QML анимация - перемещение окна приложения

Question

Я хочу создать анимацию для перемещения (или изменения размера) моего приложения. Окно построено с использованием QML.

У меня есть следующий код (большинство из них создается по умолчанию при создании в Qt Quick Controls приложения:

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

основная.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 (anim.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, в противном случае государство поведение является неправильным и ваше окно исчезнет после перехода закончена.