Improve toolbar animations

This at least fixes the animations a little bit. I'm still not perfectly happy with them, though. The remaining problem seems to be that when mirrored landscape toolbar is closed ScoreText components move a bit weird way. There are a number of things changed here and those are listed below. Fix mistakes with values. There were some values that were just plain wrong. Add AnimationDelay component that properly deals with delay before animating text movement. Switch everything to use Easing.Linear just to simplify the animation. Otherwise it's pretty difficult to get everything to move at the right time relative to each other. That said, they are still not quite moving as I'd like them to. Signed-off-by: Tomi Leppänen <[email protected]>
Tomin1 · Oct 16, 2022 · cd1be8e · cd1be8e
1 parent f9db1b3
commit cd1be8e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 12 deletions.
diff --git a/qml/toolbar/AnimationDelay.qml b/qml/toolbar/AnimationDelay.qml
@@ -0,0 +1,33 @@
+/*
+ * Patience Deck is a collection of patience games.
+ * Copyright (C) 2022 Tomi Leppänen
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.6
+import Sailfish.Silica 1.0
+
+SmoothedAnimation {
+    id: delay
+    property real a
+    property real b
+    property real _target
+    target: delay
+    properties: "_target"
+    easing.type: Easing.Linear
+    from: 0
+    to: Math.abs(b - a)
+    velocity: toolbarVelocity
+    onRunningChanged: if (!running) _target = 0
+}
diff --git a/qml/toolbar/LandscapeExpansionParallelAnimation.qml b/qml/toolbar/LandscapeExpansionParallelAnimation.qml
@@ -20,24 +20,27 @@ import Sailfish.Silica 1.0
 
 ParallelAnimation {
     SmoothedAnimation {
+        easing.type: Easing.Linear
         target: titleLandscape
         properties: "width"
         from: spaceX - Theme.paddingSmall * 2
         to: maximumSpaceX - Theme.paddingSmall * 2
         velocity: toolbarVelocity
     }
     SmoothedAnimation {
+        easing.type: Easing.Linear
         target: scoreTextLandscape
         properties: "x"
         from: Math.min(-scoreTextLandscape.nameWidth + spaceX - minimumSpaceX, 0)
-        to: Math.min(-scoreTextLandscape.nameWidth + maximumSpaceX - minimumSpaceX, 0)
+        to: 0
         velocity: toolbarVelocity
     }
     SmoothedAnimation {
+        easing.type: Easing.Linear
         target: elapsedTextLandscape
         properties: "x"
         from: Math.min(-elapsedTextLandscape.nameWidth + spaceX - minimumSpaceX, 0)
-        to: Math.min(-elapsedTextLandscape.nameWidth + maximumSpaceX - minimumSpaceX, 0)
+        to: 0
         velocity: toolbarVelocity
     }
 }
diff --git a/qml/toolbar/LandscapeShrinkParallelAnimation.qml b/qml/toolbar/LandscapeShrinkParallelAnimation.qml
@@ -20,19 +20,20 @@ import Sailfish.Silica 1.0
 
 ParallelAnimation {
     SmoothedAnimation {
+        easing.type: Easing.Linear
         target: titleLandscape
         properties: "width"
-        from: spaceX - Theme.paddingSmall
+        from: Math.min(spaceX - Theme.paddingSmall, maximumSpaceX - Theme.paddingSmall * 2)
         to: minimumSpaceX - Theme.paddingSmall
         velocity: toolbarVelocity
     }
     SequentialAnimation {
-        SmoothedAnimation {
-            from: spaceX
-            to: Math.max(scoreTextLandscape.contentWidth, spaceX)
-            velocity: toolbarVelocity
+        AnimationDelay {
+            a: Math.max(scoreTextLandscape.nameWidth + minimumSpaceX, spaceX)
+            b: scoreTextLandscape.nameWidth + minimumSpaceX
         }
         SmoothedAnimation {
+            easing.type: Easing.Linear
             target: scoreTextLandscape
             properties: "x"
             from: Math.min(-scoreTextLandscape.nameWidth + spaceX - minimumSpaceX, 0)
@@ -41,12 +42,12 @@ ParallelAnimation {
         }
     }
     SequentialAnimation {
-        SmoothedAnimation {
-            from: spaceX
-            to: Math.max(elapsedTextLandscape.contentWidth, spaceX)
-            velocity: toolbarVelocity
+        AnimationDelay {
+            a: Math.max(elapsedTextLandscape.nameWidth + minimumSpaceX, spaceX)
+            b: elapsedTextLandscape.nameWidth + minimumSpaceX
         }
         SmoothedAnimation {
+            easing.type: Easing.Linear
             target: elapsedTextLandscape
             properties: "x"
             from: Math.min(-elapsedTextLandscape.nameWidth + spaceX - minimumSpaceX, 0)

diff --git a/qml/toolbar/Toolbar.qml b/qml/toolbar/Toolbar.qml
@@ -123,7 +123,7 @@ Item {
 
                 drag {
                     target: toolbar
-                    minimumX: Screen.height - maximumSpaceX
+                    minimumX: Screen.height - maximumSpaceX - handleWidth
                     maximumX: Screen.height - minimumSpaceX - handleWidth
                 }
             }
@@ -329,13 +329,15 @@ Item {
 
             LandscapeShrinkParallelAnimation {
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "width"
                     from: spaceX + handleWidth
                     to: minimumSpaceX + handleWidth
                     velocity: toolbarVelocity
                 }
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: handle
                     properties: "x"
                     from: spaceX
@@ -351,13 +353,15 @@ Item {
 
             LandscapeExpansionParallelAnimation {
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "width"
                     from: spaceX + handleWidth
                     to: maximumSpaceX + handleWidth
                     velocity: toolbarVelocity
                 }
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: handle
                     properties: "x"
                     from: spaceX
@@ -373,13 +377,15 @@ Item {
 
             LandscapeShrinkParallelAnimation {
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "width"
                     from: Screen.height - toolbar.x
                     to: minimumSpaceX + handleWidth
                     velocity: toolbarVelocity
                 }
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "x"
                     to: Screen.height - minimumSpaceX - handleWidth
@@ -394,13 +400,15 @@ Item {
 
             LandscapeExpansionParallelAnimation {
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "width"
                     from: Screen.height - toolbar.x
                     to: maximumSpaceX + handleWidth
                     velocity: toolbarVelocity
                 }
                 SmoothedAnimation {
+                    easing.type: Easing.Linear
                     target: toolbar
                     properties: "x"
                     to: Screen.height - maximumSpaceX - handleWidth