QML bietet standardmäßig keine Klick-Interaktionsanimation im Material Design -Stil für Android , aber dies kann einfach mit Rectangle. -Primitiven angepasst werden. Rectangle, beim Klicken, Es ist notwendig, das zweite untergeordnete Objekt Rectangle auf den gesamten Bereich des übergeordneten Objekts zu strecken. In diesem Fall dehnt sich das untergeordnete Objekt für eine bestimmte Zeit aus und sieht aus wie ein sich ausdehnender Kreis, geht jedoch nicht über das übergeordnete Objekt hinaus.
Lassen Sie uns zur Verdeutlichung eine Liste von Elementen erstellen, auf die wir klicken werden. Um Klicks zu verfolgen, wird der Bereich MouseArea verwendet, in dem mehrere Interaktionssignale getrackt werden:
- onClicked - dieses Signal stoppt die Animation und führt das Ergebnis der Interaktion mit der Liste aus;
- onPressed - Wenn das Signal gedrückt wird, muss die Animation mit der vorläufigen Einstellung der Koordinaten des animierten Objekts Rectangle. gestartet werden.
- onReleased - Beim Loslassen eines Listenelements muss die Animation gestoppt werden;
- onPositionChanged - Beim Ändern der Position des Bereichs muss auch die Animation gestoppt werden.
Um eine Animation durchzuführen, wird das PropertyAnimation-Objekt verwendet. In diesem Objekt wird das Animationsziel ausgewählt und die Liste der Eigenschaften, die geändert werden. Im Falle eines animierten Rectangl, -Objekts ist es notwendig, es als Kreis zu erweitern, dazu erhöhen wir seine Breiten-, Höhen- und Radiuseigenschaften um den gleichen Wert. Und um das übergeordnete Objekt vollständig auszufüllen, setzen wir den Endwert der Eigenschaften auf das Dreifache der Breite des übergeordneten Elements.
Eine weitere wichtige Eigenschaft des übergeordneten Elements ist:
clip - Durch Aktivieren dieser Eigenschaft ( true ) schneiden wir die untergeordneten Elemente des Objekts ab, sodass sie nicht über die Grenzen des übergeordneten Elements hinausgehen.
Click-Animation - Implementierung im Code
import QtQuick 2.5
import QtQuick.Controls 1.4
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
/* Создадим список с несколькими элементами,
* по которым будет производитсья анимированный клик
* */
ListView {
anchors.fill: parent
// В объекте находится ...
delegate: Item {
height: 48
anchors.left: parent.left
anchors.right: parent.right
// ... прямоугольный фон,
Rectangle {
id: body
anchors.fill: parent
color: "white"
// дочерние объекты будут обрезаться по области данного родительского элемента
clip: true
/* ... в котором находится другой фон, который будет
* анимированным кругом клика
* */
Rectangle {
id: colorRect
height: 0
width: 0
color: "#e8e8e8"
/* Свойство трансформации, в котором будут пересчитываться
* стартовые координаты, чтобы был круг в центре клика
* */
transform: Translate {
x: -colorRect.width / 2
y: -colorRect.height / 2
}
}
// Надпись в элементе списка
Text {
text: fragment
anchors.left: parent.left
anchors.leftMargin: 72
anchors.top: parent.top
anchors.bottom: parent.bottom
font.pixelSize: 14
renderType: Text.NativeRendering
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
// Область клика по элементу
MouseArea {
anchors.fill: parent
onClicked: {
circleAnimation.stop()
}
onPressed: {
/* При нажатии на элемент выставляем стартовые координаты
* фона для анимации круга в элементе
* */
colorRect.x = mouseX
colorRect.y = mouseY
// Запускаем анимацию
circleAnimation.start()
}
onReleased: circleAnimation.stop()
onPositionChanged: circleAnimation.stop()
}
// Анимация свойств
PropertyAnimation {
id: circleAnimation
target: colorRect // Целью задаём круговой фон
properties: "width,height,radius" // В анимации изменяем высоту, ширину и радиус закругления
from: 0 // Изменяем параметры от о пикселей ...
to: body.width*3 // ... до тройного размера ширины элемента списка
duration: 300 // в течении 300 милисекунд
// По остановке анимации обнуляем высоту и ширину анимированного фона
onStopped: {
colorRect.width = 0
colorRect.height = 0
}
}
}
}
model: listModel
}
// Модель списка с элементами
ListModel {
id: listModel
ListElement {fragment: qsTr("1-й Фрагмент")}
ListElement {fragment: qsTr("2-й Фрагмент")}
ListElement {fragment: qsTr("3-й Фрагмент")}
ListElement {fragment: qsTr("4-й Фрагмент")}
ListElement {fragment: qsTr("5-й Фрагмент")}
ListElement {fragment: qsTr("6-й Фрагмент")}
ListElement {fragment: qsTr("7-й Фрагмент")}
}
}
Videoanleitung
Das Ergebnis der Materialdesign-Animation ist nicht ganz identisch mit dem, was es sein sollte, zeigt aber die Grundidee. Sie können eine Demonstration der Arbeit im Video-Tutorial sehen.
