Разработка приложений на C++_Практическая работа №7
.pdf
Модуль 2. Расширенные возможности Qt
Quick
Тема 2.3. Анимация
Практика
1
1.Кликер
Создать список элементов, по которым будем производить клики. Для отслеживания кликов будет использоваться область MouseArea, в которой будет отслеживаться несколько сигналов взаимодействия:
onClicked - в данном сигнале будет останавливаться анимация и выполняться результат взаимодействия со списком;
onPressed - при сигнале нажатия необходимо запустить анимацию, с
предварительной установкой координат анимируемого объекта Rectangle; onReleased - при отпускании элемента списка необходимо остановить
анимацию;
onPositionChanged - при смене позиции области также необходимо остановить анимацию.
Пример создания списка элементов с интеграцией области MouseArea и
отслеживанием сигналов взаимодействия: import QtQuick 2.0
import Sailfish.Silica 1.0
Page {
ListView {
id: listView
width: parent.width height: parent.height
model: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"] delegate: Item {
width: parent.width height: 100
Text {
text: modelData
2
font.pointSize: 32 anchors.centerIn: parent
}
MouseArea {
id: mouseArea
anchors.fill: parent onClicked: {
console.log("Clicked: " + modelData)
}
onPressed: {
console.log("Pressed: " + modelData) // Запуск анимации
}
onReleased: {
console.log("Released: " + modelData) // Остановка анимации
}
onPositionChanged: {
console.log("Position changed: " + modelData)
// Остановка анимации и выполнение соответствующих
действий
}
}
}
}
}
Данный пример создает список из элементов модели ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]. Для каждого элемента списка создается
3
область MouseArea, в которой отслеживаются сигналы onClicked, onPressed, onReleased и onPositionChanged. При клике на элемент список будет обрабатывать сигнал onClicked, при нажатии на элемент обрабатывается сигнал onPressed, при отпускании элемента - onReleased, а при изменении позиции области - onPositionChanged.
2. Анимации
Rectangle { width: 100 height: 100
color: "lightgreen" anchors.centerIn: parent RotationAnimation on rotation {
loops: Animation.Infinite from: 0
to: 360
}
}
RotationAnimation определяет анимацию вращения для свойства rotation.
В данном случае, анимация настроена на бесконечное количество повторений
(loops: Animation.Infinite). Анимация начинается с угла 0 градусов (from: 0) и
заканчивается на угле 360 градусов (to: 360). Это означает, что прямоугольник будет вращаться полный круг по часовой стрелке.
Таким образом, этот код создает светло-зеленый прямоугольник размером 100x100 пикселей, который находится в центре своего родительского элемента и имеет анимацию вращения вокруг своего центра.
Анимация будет продолжаться бесконечно, создавая эффект вращения прямоугольника.
4
Например, приведенный ниже код определяет поведение для свойства
`x` элемента Rectangle, описывающего его перемещение на экране:
Rectangle { id: rect width: 400 height: 400 color: "red"
Behavior on x { NumberAnimation {
duration: 1000
}
}
MouseArea {
anchors.fill: parent
onClicked: { rect.x += 300
}
}
}
Вэтом примере элемент Rectangle повернется вправо на 50 пикселей при щелчке пользователя на прямоугольнике. Изменение свойства `x` будет осуществлено плавно с использованием элемента NumberAnimation, который
всвою очередь был определен с помощью элемента Behavior.
Вследующем примере последовательно выполняются две анимации чисел. Rectangle Анимируется до x позиции 50, затем до y позиции 50. ТО есть сначала квадрат сдвинется по оси x, а потом по - y.
Rectangle {
id: rect
width: 100; height: 100 color: "red"
SequentialAnimation {
running: true
5
NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 } NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
}
}
Анимации, определенные в Transition, автоматически выполняются параллельно, поэтому SequentialAnimation можно использовать для включения анимации в Transition, если это предпочтительное поведение.
В следующей анимации параллельно выполняются две анимации чисел. Rectangle Переходит к (50,50) путем одновременной анимации его x и y свойств. То есть, квадрат будет одновременно сдвигаться по осям x и y, получается по диагонали.
Rectangle {
id: rect
width: 100; height: 100
color: "red"
ParallelAnimation {
running: true
NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
}
}
Например, в следующем коде анимация начинается при щелчке на
элементе Rectangle, а заканчивается по истечении времени, определенного
свойством duration:
Rectangle {
6
id: rect
property bool isAnimating: false
width: 300 height: 300 color: "blue"
MouseArea { anchors.fill: parent onClicked: {
if (!rect.isAnimating) animation.running = true
else animation.stop()
}
}
NumberAnimation { id: animation target: rect property: "width" to: 200
duration: 500
onStarted: rect.isAnimating = true onStopped: rect.isAnimating = false
}
}
Вэтом примере, щелчок на прямоугольнике запускает анимацию изменения свойства `width`. При нажатии на прямоугольник во время выполнения анимации, анимация останавливается.
Вследующем фрагменте мы анимируем добавление правой привязки к
Rectangle:
Item {
id: container
width: 500; height: 500
Rectangle {
7
id: myRect
width: 200; height: 200 color: "red"
}
states: State {
name: "reanchored"
AnchorChanges { target: myRect; anchors.right: container.right }
}
transitions: Transition {
// smoothly reanchor myRect and move into new position AnchorAnimation { duration: 1000 }
}
Component.onCompleted: container.state = "reanchored"
}
Когда AnchorAnimation используется в Transition, он будет анимировать все AnchorChanges, которые произошли во время изменения состояния. Это можно переопределить, установив конкретный целевой элемент с помощью свойства AnchorChanges.target.
Например, следующее ParentChange изменяется blueRect, чтобы стать дочерним элементом redRect при нажатии на него. Включение
ParentAnimation, который определяет NumberAnimation, который будет применяться во время перехода, гарантирует плавную анимацию элемента при переходе к его новому родительскому элементу:
Item {
width: 200; height: 100
Rectangle {
id: redRect
width: 400; height: 400 color: "red"
}
8
Rectangle {
id: blueRect
x: redRect.width width: 200; height: 200 color: "blue"
states: State {
name: "reparented"
ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
}
transitions: Transition { ParentAnimation {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
}
}
ParentAnimation может содержать любое количество анимаций. Эти анимации будут выполняться параллельно; чтобы запускать их последовательно, определите их в SequentialAnimation.
9