Разработка приложений на C++_Практическая работа №11
.pdf
Модуль 3 Тема 3.5
1
Создайте проект с реализацией боковой панели навигации меню
Общий принцип реализации состоит в том, чтобы при клике на кнопку открывалась боковая панель, перемещаясь из-за границы экрана в видимую область, а затем при повторном клике - закрывалась, перемещаясь обратно из видимой области за границу экрана. Для этого используется анимация перемещения и изменения прозрачности боковой панели.
Основными элементами кода являются:
● Первый элемент - кнопка, при нажатии на которую открывается боковая панель навигации меню вправо. При повторном клике панель закрывается. Боковая панель реализована с помощью прямоугольника
(Rectangle) с заданным цветом и радиусом. Для перемещения прямоугольника используются анимации, объединенные в параллельную анимацию. При запуске анимации происходит изменение свойства x, т.е. перемещение прямоугольника, и изменение значения свойства opacity, т.е. прозрачности.
●Второй элемент - кнопка, при нажатии на которую открывается боковая панель навигации меню влево. При повторном клике панель закрывается, перемещаясь в обратном направлении. Реализация боковой панели аналогична предыдущей.
●Оба элемента объединены в общую страницу (Page), которая представляет основной контент приложения.
Блоки с анимацией содержат свойства target, properties, from, to, duration
иeasing.
●target определяет объект, свойства которого будут анимироваться;
●properties - перечисляет свойства объекта, которые будут изменяться в ходе анимации;
●from и to - начальное и конечное значения свойств в ходе
анимации;
●duration - длительность анимации в миллисекундах;
2
● easing - тип используемой кривой, определяющей характер изменения свойства в ходе анимации.
Вместе, элементы кода создают основу для реализации боковых панелей навигации меню для приложения.
import QtQuick 2.2 import Sailfish.Silica 1.0
Page {
objectName: "mainPage" allowedOrientations: Orientation.All
Button {
id: btn1
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("menu right") onClicked: {
if(menuRect.x === parent.width + 1)
{
menuStartAnim.start()
}
else
{
menuStopAnim.start()
}
}
}
3
//Combination animation ParallelAnimation{
id: menuStartAnim
//Attribute animation NumberAnimation{
target: menuRect properties: "x"
from: parent.width + 1 to: menuRect.width
//Animation duration, milliseconds duration: 500
//Animation gradient curve easing.type: Easing.OutQuad
}
NumberAnimation{ target: menuRect properties: "opacity" from: 0.2
to: 0.8 duration: 500;
easing.type: Easing.OutQuad
}
}
ParallelAnimation{
id: menuStopAnim
NumberAnimation{ target: menuRect properties: "x"
from: menuRect.width
4
to: parent.width + 1 duration: 500; easing.type: Easing.Linear
}
NumberAnimation{ target: menuRect properties: "opacity" from: 0.8
to: 0.2 duration: 500;
easing.type: Easing.Linear
}
}
Rectangle {
id: menuRect
x : parent.width + 1 width: parent.width / 2 height: parent.height color: "lightblue" radius: 5
}
Button {
id: btn2
anchors.top: btn1.bottom anchors.left: btn1.left text: qsTr("menu left")
5
onClicked: { if(menuRect2.x < 0)
{
menuStartAnim2.start()
}
else
{
menuStopAnim2.start()
}
}
}
//Combination animation ParallelAnimation{
id: menuStartAnim2
//Attribute animation NumberAnimation{
target: menuRect2 properties: "x" from: -1000
to: 0
//Animation duration, milliseconds duration: 500
//Animation gradient curve easing.type: Easing.OutQuad
}
NumberAnimation{ target: menuRect2 properties: "opacity"
6
from: 0.2 to: 0.8
duration: 500;
easing.type: Easing.OutQuad
}
}
ParallelAnimation{
id: menuStopAnim2
NumberAnimation{ target: menuRect2 properties: "x" from: 0
to: -1000 duration: 500;
easing.type: Easing.Linear
}
NumberAnimation{ target: menuRect2 properties: "opacity" from: 0.2
to: 0.8 duration: 500;
easing.type: Easing.Linear
}
}
Rectangle {
id: menuRect2 x: -1000
7
y: 0
width: parent.width / 2
height: parent.height
color: "lightblue"
radius: 5
}
}
8