Анимация в QML

Для создания анимации Qt Quick предоставляет тип Animation, который определяет базовый функционал анимаций. Прежде всего это следующий свойства:

• alwaysRunToEnd: хранит булевое значение, которое указывает, должна ли анимация доработать до конца при остановке

• loops: количество циклов анимации. По умолчанию равно 1. Если надо бесконечно повторять анимацию, то передается значение Animation.Infinite

• paused: хранит значение (true или false), которое указывает, приостановлена ли анимация

• running: хранит значение (true или false), которое указывает, запущена ли анимация

С помощью методов типа Animation можно управлять анимацией:

• complete(): завершает анимацию

• pause(): приостанавливает анимацию

• restart(): перезапускает анимацию

• resume(): возобновляет анимацию

• start(): запускает анимацию

• stop(): останавливает анимацию

Для отслеживания состояния анимации тип Animation также определяет три сигнала:

• finished(): вызывается при естественном завершении анимации

• started(): вызывается при запуске анимации

• stopped(): вызывается при программной остановке анимации

Для различных ситуаций Qt определяет производные от Animation типы анимаций. Некоторые из них:

• Animator: это особый тип анимации, который работает непосредственно с графом сцены Qt Quick.

• AnchorAnimation: используется для анимации изменения свойств anchor.

• ParallelAnimation: выполняет несколько анимаций параллельно.

• ParentAnimation: используется для анимации изменения родительского элемента.

• PathAnimation: использует геометрический путь для анимации элемента.

• PauseAnimation: включает паузы во время анимации.

• PropertyAnimation: анимирует изменения значений свойств.

• SequentialAnimation: выполняет несколько анимаций последовательно.

• ScriptAction: во время анимации позволяет выполнять JavaScript.

• PropertyAction: позволяет изменить свойство сразу во время анимации, без необходимости анимировать изменение свойства.

• ColorAnimation: анимирует изменения значений цвета.

• NumberAnimation: анимирует изменения значений типа qreal.

• RotationAnimation: анимирует изменения значений вращения.

• Vector3dAnimation: анимирует изменения значений QVector3d.

Вкратце посмотрим на некоторые типы анимаций.

PropertyAnimation

Тип PropertyAnimation анимирует изменения в свойстве. Для настройки анимации этот тип использует ряд свойств:

• duration: длительность анимации в миллисекундах (по умолчанию 250)

• easing: группа свойств, которые определяют кривую анимации:

  • easing.amplitude: амплитуда анимации

  • easing.bezierCurve: кривая Безье, которая применяется для анимации

  • easing.overshoot:

  • easing.period: период анимации

  • easing.type: тип анимации

• exclude: список объектов, исключенных из анимации

• from: начальное значение свойства

• properties: анимируемые свойства

• property: анимируемое свойство

• target: объект, к которому применяется анимация

• targets: группа объектов, к которым применяется анимация

• to: конечное значение свойства

Для определения анимации внутри элемента применяется синтаксис:

тип_анимации on свойство

Например, анимируем свойство x элемента Rectangle:

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: "METANIT.COM"

    Rectangle {
        x: 10
        width: 50
        height: 50
        color: "green"
        
        PropertyAnimation on x {
            duration: 5000  // 5 секунд
            to: 250         // пока x не будет равно 250
            loops: Animation.Infinite   // бесконечная анимация
        }
    }
}

Здесь анимация длится 5 секунд, пока свойство x прямоугольника не станет равным 250 единиц.

Отдельные анимации можно объединять в группы и выполнять одну за другой или параллельно. Для последовательного выполнения группы анимаций применяется тип SequentialAnimation:

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: "METANIT.COM"

    Rectangle {
        x: 10
        width: 50
        height: 50

        SequentialAnimation on color {
            ColorAnimation { to: "red"; duration: 1000 }
            ColorAnimation { to: "yellow"; duration: 1000 }
            ColorAnimation { to: "green"; duration: 1000 }
            loops: Animation.Infinite
        }
    }
}

В данном случае для прямоугольника последовательно выполняются три анимации ColorAnimation, которые меняют цвет.

Подобным образом, например, можно сделать анимацию в обратную сторону:

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: "METANIT.COM"

    Rectangle {
        width: 50
        height: 50
        color: "green"

        SequentialAnimation on x {
            NumberAnimation { to: 250; duration: 4000 }
            NumberAnimation { to: 0; duration: 4000 }
            loops: Animation.Infinite
        }
    }
}