sho/quickshell-rice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(lockscreen): implement smooth sliding dot array with displaced transitions and animated width expansion

Browse Source
This commit is contained in:
Sho 2026-08-02 16:18:35 +09:00
parent 7f41c5ebae
commit 48a2ad22cf
1 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
quickshell/modules/lockscreen/LockscreenContent.qml
View File

@ -259,33 +259,58 @@ Item {
font.weight: Font.Medium font.weight: Font.Medium
} }
// ANIMATED TYPING DOTS (Ultra-smooth scale, opacity, & glow entry) // ANIMATED TYPING DOTS (Ultra-smooth sliding dot array with add/remove/displaced transitions)
Row { Item {
id: dotsContainer
anchors.centerIn: parent anchors.centerIn: parent
spacing: 12 implicitWidth: Math.min(320, LockscreenService.typedCount * 26)
implicitHeight: 20
visible: LockscreenService.typedCount > 0 && !LockscreenService.isAuthenticating visible: LockscreenService.typedCount > 0 && !LockscreenService.isAuthenticating
Repeater { Behavior on implicitWidth {
NumberAnimation { duration: 220; easing.type: Easing.OutCubic }
}
ListView {
id: dotsView
anchors.centerIn: parent
width: Math.min(dotsContainer.implicitWidth, count * 26)
height: 20
orientation: ListView.Horizontal
spacing: 12
interactive: false
model: LockscreenService.typedCount model: LockscreenService.typedCount
add: Transition {
ParallelAnimation {
NumberAnimation { property: "scale"; from: 0.1; to: 1.0; duration: 250; easing.type: Easing.OutBack; easing.overshoot: 1.6 }
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.OutCubic }
}
}
remove: Transition {
ParallelAnimation {
NumberAnimation { property: "scale"; to: 0.0; duration: 180; easing.type: Easing.InCubic }
NumberAnimation { property: "opacity"; to: 0.0; duration: 150; easing.type: Easing.OutCubic }
}
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 220; easing.type: Easing.OutCubic }
}
delegate: Item {
width: 14
height: 14
Rectangle { Rectangle {
id: dot id: dot
width: 14 anchors.fill: parent
height: 14
radius: 7 radius: 7
color: index === LockscreenService.typedCount - 1 ? Theme.accent : Theme.fg color: index === LockscreenService.typedCount - 1 ? Theme.accent : Theme.fg
Behavior on color { ColorAnimation { duration: 180 } } Behavior on color { ColorAnimation { duration: 180 } }
scale: 1.0
opacity: 1.0
ParallelAnimation {
running: true
NumberAnimation { target: dot; property: "scale"; from: 0.1; to: 1.0; duration: 240; easing.type: Easing.OutBack; easing.overshoot: 1.8 }
NumberAnimation { target: dot; property: "opacity"; from: 0.0; to: 1.0; duration: 180; easing.type: Easing.OutCubic }
}
// Inner Glow Core // Inner Glow Core
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
@ -293,6 +318,8 @@ Item {
height: 6 height: 6
radius: 3 radius: 3
color: "#ffffff" color: "#ffffff"
opacity: index === LockscreenService.typedCount - 1 ? 1.0 : 0.6
}
} }
} }
} }