Элементы анимации: плавные переходы
Анимация
играет ключевую роль в динамичном
пользовательском интерфейсе. В QML эти
эффекты создаются путем применения
анимационных объектов к значениям
свойств объекта, чтобы постепенно их
изменять. Анимационные объекты создаются
с помощью встроенного набора анимационных
элементов, которые могут использовать
различные типы анимации. Кроме того,
анимационные объекты могут применяться
и для других целей в зависимости от
контекста.
Следующий
пример представляет код для анимирования
перемещения прямоугольника. В примере
создается объект Rectangle с двумя состояниями:
нчаальным и конечным. В конечном состоянии
прямоугольник сдвигается на вектор
(50, 50). Объект Transition определяет, что когда
состояние прямоугольника меняется от
начального к конечному, все изменения
свойств х и у должны быть анимированными.
Для этого используется Easing.InOutQuad.
import
Qt
4.7
Rectangle
{
id:
rect
width:
100;
height:
100
color:
"red"
states:
State
{
name:
"moved"
PropertyChanges
{
target:
rect;
x:
50;
y:
50
}
}
transitions:
Transition
{
PropertyAnimation
{
properties:
"x,y";
easing.type:
Easing.InOutQuad
}
}
}
Листинг
6. Анимированные переходы между
состояниями.
На
листинге 7 показано, как можно применить
множественные переходы к элементу Item.
(Напомним, что все, что применяется к
Item, распространяется на элемент
Rectangle). По умолчанию, переход применяется
ко всем изменениям состояния. Для
большего контроля можно установить
свойства from и to, чтобы применять переход
только при изменении одного заданного
состояния на другое или между явно
заданными состояниями.
Item
{
...
transitions:
[
Transition
{
...
}
Transition
{
...
}
]
}
Листинг
7. Множественные
переходы.
Оригинальное руководство:
Introduction
to Qt Quick for C++ Developers
Перевод:
Владимир Шабаршин
Редактирование:
Надежда Лагутина, Илья Парамонов
Если
вы заметили неточности в приведённом
тексте статьи или у вас есть дополнения,
пожалуйста, приводите их в комментариях
к статье.
