Обзор видов анимации

Язык QML поддерживает следующие виды анимаций:

• PropertyAnimation - анимация свойств объекта, базовый тип для большого количества анимаций
• NumberAnimation - анимация числовых свойств объекта. Могут анимироваться как int-свойства, так и real-свойства. Предположительное отличие от PropertyAnimation в том, что имеет оптимизацию на изменение числовых значений
• ColorAnimation - переход между цветами
• RotationAnimation - повороты
• AnchorAnimation - анимация изменения якоря
• ParentAnimation - анимация изменений свойств родителя
• SpringAnimation - анимация свойства с его изменением по принципу пружины

Анимации можно объединять в группы:

• SequentialAnimation - набор из последовательных анимаций
• ParallelAniimation - набор из параллельных анимаций

Так же есть два действия, которые взаимосвязаны с анимацией:

• PropertyAction - позволяет задать мгновенное изменение свойства внутри анимации
• ScriptAction - позволяет выполнить сценарий во время активной анимации

В данной статье рассказывается не обо всех инструментах анимации, а только о самых основных.

Числовая анимация NumberAnimation

Пример анимации перемещения прямоугольника по оси X, для этого анимируется свойство x:

import QtQuick 2.6

Rectangle {

width: 300

height: 300

color: "lightblue"

Rectangle {

id: square

width: 100

height: 100

y: 150

color: "green"

NumberAnimation on x {

from:0

to: 150

duration: 3000 // Длительность анимации в миллисекундах

}

}

}

Здесь анимируется свойство x. Имя анимирующегося свойства пишется после ключевого слова on. Можно анимировать любое свойство, даже самостоятельно созданное в объекте через ключевое слово property <тип> <имя>.

В результате получится зеленый квадрат, который перемещается слева направо:

У типа NumberAnimation, как у наследника типа Animation, есть свойство running. По-умолчанию во всех типах анимации оно установлено в false. Почему же в данном случае анимация запустилась? Потому что есть исключение: если анимирующееся свойство задано через ключевое слово on, то анимация запускается самостоятельно без дополнительных действий. Для всех других видов анимации, для старта анимации надо обязательно не забывать устанавливать свойство running в true (см. ниже).

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

Rectangle {

id: square

width: 100

height: 100

y: 150

color: "green"

}

NumberAnimation on square.x {

from:0

to: 150

duration: 3000

}

- такой код работать не будет.

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

NumberAnimation {

target: square // Идентификатор объекта

properties: "x, y" // Изменяемые свойства объекта

from: 0

to: 100

duration: 3000

running: true // Обязательно устанавливать, иначе анимация не запустится

}

Здесь видно, что можно анимировать не только одно свойство, а сразу несколько свойств, указав их имена через запятую. Это важное отличие от формы с ключевым словом on, после которого имеется возможность указать только одно свойство.

Помимо вышеперечисленных форм записи NumberAnimation, существует еще одна форма записи без ключевого слова on и без установки свойства target:

Item {

states: [

// ...

]

transition: Transition {

NumberAnimation { properties: "x"; from: 100; duration: 200 }

}

}

Такая форма записи работает только в рамках переходов (Transition) или в рамках описания поведения (Behavior).

Анимация свойств объектов PropertyAnimation

Данный вид анимации позволяет анимировать свойство объекта, находясь за пределами самого объекта.

Rectangle {

width: 300

height: 300

color: "lightblue"

Rectangle {

id: square

width: 100

height: 100

y: 150

color: "green"

}

}

PropertyAnimation {

target: square

properties: "x, y"

from:0

to: 150

duration: 3000

running: true

}

Кстати, анимация NumberAnimation является одной из форм анимации PropertyAnimation.

Последовательность анимаций SequentialAnimation

Анимации можно объединять в последовательности. Последовательность анимаций можно запустить сразу, указав ей свойство running: true, либо установив данное свойство при каком-либо событии:

Rectangle {

width: 300

height: 300

color: "lightblue"

Rectangle {

id: square

width: 100

height: 100

y: 150

color: "green"

}

}

SequentialAnimation {

id: seqAni

NumberAnimation {

target: square

properties: "x, y"

from:0

to: 150

duration: 1000

}

NumberAnimation {

target: square

properties: "opacity"

from: 1.0

to: 0.1

duration: 2000

}

}

MouseArea {

anchors.fill: parent

onClicked: seqAni.running=true // Запуск последовательности анимаций

}

Анимации выполняются друг за другом, по мере их перечисления в блоке SequentialAnimation.

Блок SequentialAnimation имеет форму записи с ключевым словом on, после которого указывается анимирующееся в данной последовательности свойство. Такой блок может размещаться только внутри анимируемого объекта:

Rectangle {

width: 100; height: 100

color: "red"

SequentialAnimation on x {

loops: Animation.Infinite

PropertyAnimation { to: 50 }

PropertyAnimation { to: 0 }

}

}

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

Параллельная анимация ParallelAnimation

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