MyTetra Share
Делитесь знаниями!
О, смотри-ка какое хорошее место. Дайте два!
Анимации в QML на примерах
24.01.2018
12:34
Текстовые метки: qt, qml, анимация, animation, NumberAnimation, PropertyAnimation, анимационные последовательности
Раздел: Компьютер - Программирование - Язык C++ - Библиотека Qt - QML - Краткая памятка по QML

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


Язык 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. При запуске объекта параллельной анимации, все анимации, в него входящие, начинают выполняться одновременно. Параллельная анимация считается завершенной, когда закончилась самая длительная анимация из всего набора входящих в нее анимаций.



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования