Итак, сделаем пример из статьи "QML компоненты" более динамичным, добавив состояния и переходы между этими состояниями. Мы сделаем, чтобы наш текст, при щелчке по нему, передвигался в нижнюю часть экрана, вращаясь, и становился красным.
Во-первых, мы создаем новое состояние "down" для нашего элемента "text". Это состояние будет активировано, когда пользователь зажмет левую кновку мыши в области MouseArea, и дезактивировано, когда кнопка будет отпущена.
Состояние "down" всключает в себя ряд изменений свойств компонента "text" (некоторые эти свойста были опущены при инициализации компонента и имели значения по умолчанию, принятые в QML). Собственно, мы устанавливаем свойство "y" компонента "text" в 160, "rotation" (вращение) в 180 и "color" (цвет) в red (красный).
Поскольку мы не хотим, чтобы текст возник внизу немедленно, а переместился плавно, мы добавляем переход (Transition) между нашими двумя состояниями. Свойства "from" и "to" определяют состояния, между которыми будет совержаться переход. В этом случае мы хотим переход от состояния по умолчанию до нашего состояния "down".
Поскольку мы хотим, чтобы тот же самый переход запускался наоборот, изменяясь назад от состояния "down" к состоянию по умолчанию, мы устанавливаем свойство "reversible" в "true". Это эквивалентно описанию этих двух переходов отдельно.
Элемент ParallelAnimation гарантирует, что два типа анимации (NumberAnimation и ColorAnimation) будут выполняться одновременно. Мы могли бы также запускать эти анимации по очереди, друг за другом, используя SequentialAnimation вместо ParallelAnimation.
