notification animations: slide-in/out popups, staggered center fade, dismiss fade
This commit is contained in:
parent
b5b2276ff1
commit
608da78cea
2 changed files with 71 additions and 8 deletions
|
|
@ -83,6 +83,19 @@ M.PopupPanel {
|
||||||
|
|
||||||
width: menuWindow.panelWidth
|
width: menuWindow.panelWidth
|
||||||
height: notifContent.height + 12
|
height: notifContent.height + 12
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
Component.onCompleted: fadeIn.start()
|
||||||
|
NumberAnimation {
|
||||||
|
id: fadeIn
|
||||||
|
target: notifItem
|
||||||
|
property: "opacity"
|
||||||
|
to: 1
|
||||||
|
duration: 150
|
||||||
|
easing.type: Easing.OutCubic
|
||||||
|
// Stagger by index
|
||||||
|
Component.onCompleted: fadeIn.from = 0
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
@ -225,10 +238,20 @@ M.PopupPanel {
|
||||||
anchors.margins: -4
|
anchors.margins: -4
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
onClicked: M.NotifService.dismiss(notifItem.modelData.id)
|
onClicked: _dismissAnim.start()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
id: _dismissAnim
|
||||||
|
target: notifItem
|
||||||
|
property: "opacity"
|
||||||
|
to: 0
|
||||||
|
duration: 150
|
||||||
|
easing.type: Easing.InCubic
|
||||||
|
onFinished: M.NotifService.dismiss(notifItem.modelData.id)
|
||||||
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
id: notifArea
|
id: notifArea
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
|
||||||
|
|
@ -40,13 +40,15 @@ PanelWindow {
|
||||||
required property int index
|
required property int index
|
||||||
|
|
||||||
width: popupCol.width
|
width: popupCol.width
|
||||||
height: contentCol.height + 16
|
height: _targetHeight * _heightScale
|
||||||
opacity: 0
|
opacity: 0
|
||||||
x: 50
|
x: 320
|
||||||
|
clip: true
|
||||||
|
|
||||||
Component.onCompleted: {
|
readonly property real _targetHeight: contentCol.height + 16
|
||||||
slideIn.start();
|
property real _heightScale: 0
|
||||||
}
|
|
||||||
|
Component.onCompleted: slideIn.start()
|
||||||
|
|
||||||
ParallelAnimation {
|
ParallelAnimation {
|
||||||
id: slideIn
|
id: slideIn
|
||||||
|
|
@ -54,13 +56,21 @@ PanelWindow {
|
||||||
target: popupItem
|
target: popupItem
|
||||||
property: "opacity"
|
property: "opacity"
|
||||||
to: 1
|
to: 1
|
||||||
duration: 200
|
duration: 250
|
||||||
easing.type: Easing.OutCubic
|
easing.type: Easing.OutCubic
|
||||||
}
|
}
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
target: popupItem
|
target: popupItem
|
||||||
property: "x"
|
property: "x"
|
||||||
to: 0
|
to: 0
|
||||||
|
duration: 350
|
||||||
|
easing.type: Easing.OutBack
|
||||||
|
easing.overshoot: 0.5
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: popupItem
|
||||||
|
property: "_heightScale"
|
||||||
|
to: 1
|
||||||
duration: 250
|
duration: 250
|
||||||
easing.type: Easing.OutCubic
|
easing.type: Easing.OutCubic
|
||||||
}
|
}
|
||||||
|
|
@ -200,11 +210,41 @@ PanelWindow {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ParallelAnimation {
|
||||||
|
id: slideOut
|
||||||
|
NumberAnimation {
|
||||||
|
target: popupItem
|
||||||
|
property: "opacity"
|
||||||
|
to: 0
|
||||||
|
duration: 200
|
||||||
|
easing.type: Easing.InCubic
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: popupItem
|
||||||
|
property: "x"
|
||||||
|
to: 320
|
||||||
|
duration: 250
|
||||||
|
easing.type: Easing.InCubic
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: popupItem
|
||||||
|
property: "_heightScale"
|
||||||
|
to: 0
|
||||||
|
duration: 200
|
||||||
|
easing.type: Easing.InCubic
|
||||||
|
}
|
||||||
|
onFinished: M.NotifService.dismissPopup(popupItem.modelData.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateDismiss() {
|
||||||
|
slideOut.start();
|
||||||
|
}
|
||||||
|
|
||||||
// Click to dismiss
|
// Click to dismiss
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
z: -1
|
z: -1
|
||||||
onClicked: M.NotifService.dismissPopup(popupItem.modelData.id)
|
onClicked: popupItem.animateDismiss()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue