sync clock and widget fly-in animations to wave phase

shell/lock/LockClock.qml

@@ -5,22 +5,15 @@ Item {
     id: root
 
     required property real screenHeight
+    property real wavePhase: 0
+    property real unlockFade: 1
 
     readonly property real _fontSize: Math.max(48, screenHeight * 0.28)
 
-    opacity: 0
-    property real _slideX: -80
-
-    NumberAnimation on opacity {
-        to: 1
-        duration: 400
-        easing.type: Easing.OutCubic
-    }
-    NumberAnimation on _slideX {
-        to: 0
-        duration: 500
-        easing.type: Easing.OutCubic
-    }
+    // Appear as wave reaches the clock (left edge)
+    readonly property real _progress: Math.max(0, Math.min(1, wavePhase / 300)) * unlockFade
+    opacity: _progress
+    property real _slideX: (1 - _progress) * -80
 
     transform: Translate {
         x: root._slideX

shell/lock/LockSurface.qml

@@ -95,7 +95,7 @@ WlSessionLockSurface {
         }
     }
 
-    // Clock - rotated, left-aligned
+    // Clock - rotated, left-aligned, flies in with wave
     LockClock {
         id: _clockItem
         anchors.left: parent.left
@@ -103,6 +103,8 @@ WlSessionLockSurface {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         screenHeight: root.height
+        wavePhase: _hexWave.wavePhase
+        unlockFade: root._unlockFade
     }
 
     // Center content - password and notifications
@@ -163,12 +165,15 @@ WlSessionLockSurface {
         }
     }
 
-    // Right column - widgets
+    // Right column - widgets, fly in when wave exits screen
     LockWidgets {
         id: _widgetCol
         anchors.right: parent.right
         anchors.rightMargin: 48
         anchors.verticalCenter: parent.verticalCenter
+        wavePhase: _hexWave.wavePhase
+        screenWidth: root.width
+        unlockFade: root._unlockFade
     }
 
     onVisibleChanged: {
@@ -202,20 +207,6 @@ WlSessionLockSurface {
         id: _unlockAnim
 
         ParallelAnimation {
-            NumberAnimation {
-                target: _clockItem
-                property: "opacity"
-                to: 0
-                duration: 200
-                easing.type: Easing.InCubic
-            }
-            NumberAnimation {
-                target: _clockItem
-                property: "_slideX"
-                to: -80
-                duration: 200
-                easing.type: Easing.InCubic
-            }
             NumberAnimation {
                 target: content
                 property: "opacity"
@@ -230,20 +221,6 @@ WlSessionLockSurface {
                 duration: 200
                 easing.type: Easing.InCubic
             }
-            NumberAnimation {
-                target: _widgetCol
-                property: "opacity"
-                to: 0
-                duration: 200
-                easing.type: Easing.InCubic
-            }
-            NumberAnimation {
-                target: _widgetCol
-                property: "_slideX"
-                to: 80
-                duration: 200
-                easing.type: Easing.InCubic
-            }
             NumberAnimation {
                 target: root
                 property: "_unlockFade"

shell/lock/LockWidgets.qml

@@ -8,19 +8,14 @@ Item {
 
     width: 280
 
-    opacity: 0
-    property real _slideX: 80
+    property real wavePhase: 0
+    property real screenWidth: 0
+    property real unlockFade: 1
 
-    NumberAnimation on opacity {
-        to: 1
-        duration: 400
-        easing.type: Easing.OutCubic
-    }
-    NumberAnimation on _slideX {
-        to: 0
-        duration: 500
-        easing.type: Easing.OutCubic
-    }
+    // Fly in when wave exits the right edge
+    readonly property real _progress: (screenWidth > 0 ? Math.max(0, Math.min(1, (wavePhase - screenWidth) / 500)) : 0) * unlockFade
+    opacity: _progress
+    property real _slideX: (1 - _progress) * 80
 
     transform: Translate {
         x: root._slideX