Создание простой анимации с использованием QML

В прошлом уроке мы рассматривали отрисовку примитивов на Qt/C++, в этом же уроке хотелось бы показать как создать примитивную анимацию на QML.

Для компиляции проекта, как и в прошлой статье, использовался Qt Creator.

QML (Qt Meta-Object Language) — декларативный язык программирования, основанный на JavaScript, предназначенный для дизайна приложений, делающих основной упор на пользовательский интерфейс. Является частью Qt Quick, среды разработки пользовательского интерфейса, распространяемой вместе с Qt. В основном используется для создания приложений, ориентированных на мобильные устройства с сенсорным управлением. -- Wikipedia

Чтобы QML в проекте работал корректно, достаточно в папку с кодами поместись папку qmlapplicationviewer, который поставляется с Qt Creator последних лекций.

Чтобы работать с QML нам надо подключить его в main.cpp, создав объект класса QmlApplicationViewer и указав путь в главному qml файлу нашего проекта, что выглядит так:

QScopedPointer<QApplication> app(createApplication(argc, argv)); // стандартный класс, отвечающий за выполнение самого приложения
 
QmlApplicationViewer viewer; // класс для определения qml
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto); // задаем поворот экрана
viewer.setMainQmlFile(QLatin1String("qml/third/main.qml")); // указываем путь к главному qml файлу
viewer.showExpanded(); // выводим на экран qml

Первая строка -- создание главного объекта самого Qt.
Вторая строка -- создание объекта QmlApplicationViewer.
Третья строка -- задание поворота экрана.
Четвертая строка -- указание пути к главному qml файлу.
Пятая строка -- вывод на экран.

В дальнейшем мы создадим три qml файла: сам главный файл, файл части, где мы пропишем обработку нажатий и зададим саму анимацию, и класс клеточки, которая будет вращаться.

import QtQuick 1.1
 
Item { // создание общего объекта
    id: field // задание id этого объекта
    width: 160 // задание ширины
    height: 190 // задание высоты
    Rectangle { // указываем, что ходим отобразить четырехугольник
        id: fieldrec // задаем id четырехугольника
        width: 150 // ширину
        height: 190 // высоту
        color: "#ffffff" // и цвет
        Part {} // помещаем внутрь прямоугольника объект part
    }
 
}

В самом начале нам надо подключить сам QtQuick, частью которого и является QML.
Затем мы объявляем некий объект, задаем его длину/ширину, указываем id и помещаем на него прямоугольник со своими свойствами.
Строка Part {} означает, что в этот прямоугольник мы помещаем некий объект Part.

import QtQuick 1.1
 
Item {
    id: part
    width: 150
    height: 160
    visible: true; // указываем, что объект виден
    Flipable { // свойство, означающее поворот объекта
        id: main
        property bool flipped: false // перевернуто ли изображение 
        width: 150
        height: 160
 
        front: Cell { // помещение нашего объекта в область видимости одной стороны
            id: f
            x: 5 // смещение по х от левой границы
            y: 5 // смещение по у от верхней границы
            rang: "a" // отображаемый текст
        }
        back: Cell { // то же самое, что и выше, только с обратной стороны
            id: b
            rang: "b" // на обратной стороне пишем b
        }
 
        transform: Rotation { // способ трансформации изображения
            id: rotation // поворот
            origin.x: 75; origin.y: 85
            axis {x: 0; y: 1; z:0} // как поворачиваем
            angle: 0 // угол
        }
 
        states: State { // задаем состояние
            name: "back" // название состояния
            PropertyChanges { target: rotation; angle: 180} // изменяемые параметры
            when: main.flipped // когда переменная указывает на то, что был совершен переворот
        }
 
        transitions: Transition {
            NumberAnimation { target: rotation; property: "angle"; duration: 2000;} // задаем время анимации
        }
 
        MouseArea { // указваем, что будем делать при клике на картинку
            anchors.fill: main
            onClicked: main.flipped = !main.flipped // меняем значение переменной
 
        }
    }
}

В данном файле мы также объявили некий объект Item с определенной высотой и шириной и поместили на него объект Flipable, который и будет вращаться.
Мы объявили переменную flipped, которая равна false когда наша клеточка повернута передней стороной и true -- когда задней.
Чтобы описать вращение, нам необходимо задать некоторые атрибутые, которые указывают на то, что отображается во время показывания передней части (front), задней части (back), метод вращения (transform), состояния (states) и что мы анимируем (transitions).

1) front, back -- мы помещаем объект Cell, который и является нашей клеточкой, и указываем надпись, смещение по х, смещение по у и id.
2) transform -- чтобы описать метод вращения, мы помещаем объект Rotation и описываем его атрибуты.
3) states -- указываем какие атрибуты менять и при каких условиях.
4) transitions -- задаем саму анимацию, т.е. изменяемые атрибуты, скорость и цель

MouseArea {
    anchors.fill: main
    onClicked: main.flipped = !main.flipped
}

Этот код отвечает за нажатие по нашей "форме", мы указываем к чему привязываем обработку нажатия и изменяем переменную при нажатии.

import QtQuick 1.1
 
Rectangle { // указываем, что наше изображение -- прямоугольник
    id: warrior
    width: 150
    height: 160
    color: "#ff0000" // красного цвета
    radius: 56 // с закругленными краями
    scale: 1
    property string rang: "ab"
 
    Text { // помещяем на прямоугольник текст и задаем его атрибуты
        id: text1
        text: rang
        font.bold: true
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.family: "SimSun"
        verticalAlignment: Text.AlignTop
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: 160
    }
}

Сама наша клеточка, как вы видете, является лишь закругленным прямоугольником красного цвета с текстом. В этом коде мы создаем треугольник, задаем степень округления, цвет и помещаем текст на него, также указывая определенные атрибуты (размещение, шрифт и т.д.).

Конечный результат:

К сожалению, саму анимацию не удалось нормально заскриншотить, но пользователь может просто скомпилировать проект и посмотреть на результат сам.

QML используется, в большей степени, для создания приложений под мобильные устройства, но, как вы видете, нет ничего сложного в создании и десктопных приложений. Простота и логичность QML позволяет разработчику, не прилагая особых усилий, реализовывать приятный интерфейс, например с помощью той же анимации, что, я надеюсь, и показал в этом уроке.