sidebar: anime: pull to load more

2025-10-29 10:24:11 +01:00
parent 26361718a7
commit ede90eb282
2 changed files with 124 additions and 33 deletions
@@ -0,0 +1,90 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+
+Rectangle {
+    id: root
+
+    property bool loading: true
+    property double pullProgress: 0
+
+    // Size, color
+    property double implicitSize: 48
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+    radius: Math.min(width, height) / 2
+    color: Appearance.colors.colPrimaryContainer
+    property double baseShapeSize: root.implicitSize * 1.3
+    property double leapZoomSize: root.baseShapeSize * 1.3
+    property double leapZoomProgress: 0
+
+    // Shape
+    property list<var> shapes: [
+        MaterialShape.Shape.SoftBurst,
+        MaterialShape.Shape.Cookie9Sided,
+        MaterialShape.Shape.Pentagon,
+        MaterialShape.Shape.Pill,
+        MaterialShape.Shape.Sunny,
+        MaterialShape.Shape.Cookie4Sided,
+        MaterialShape.Shape.Oval,
+    ]
+    property int shapeIndex: 0
+    property double pullRotation: root.loading ? 0 : -(root.pullProgress * 360)
+    property double continuousRotation: 0
+    property double leapRotation: 0
+    rotation: pullRotation + continuousRotation + leapRotation
+
+    RotationAnimation on continuousRotation {
+        running: root.loading
+        duration: 12000
+        easing.type: Easing.Linear
+        loops: Animation.Infinite
+        from: 0
+        to: 360
+    }
+    Timer {
+        interval: 800
+        running: root.loading
+        repeat: true
+        onTriggered: leapAnimation.start()
+    }
+    ParallelAnimation {
+        id: leapAnimation
+        PropertyAction { target: root; property: "shapeIndex"; value: (root.shapeIndex + 1) % root.shapes.length }
+        RotationAnimation {
+            target: root
+            direction: RotationAnimation.Shortest
+            property: "leapRotation"
+            to: (root.leapRotation + 90) % 360
+            duration: 350
+            easing.type: Easing.InOutQuad
+        }
+        NumberAnimation {
+            target: root
+            property: "leapZoomProgress"
+            from: 0
+            to: 1
+            duration: 750
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.animationCurves.standard
+        }
+    }
+
+    MaterialShape {
+        id: shape
+        anchors.centerIn: parent
+        shape: root.shapes[root.shapeIndex]
+        implicitSize: {
+            const leapZoomDiff = root.leapZoomSize - root.baseShapeSize
+            const progressFirstHalf = Math.min(root.leapZoomProgress, 0.5) * 2;
+            const progressSecondHalf = Math.max(root.leapZoomProgress - 0.5, 0) * 2;
+            print("progress", root.leapZoomProgress, "zoom", root.baseShapeSize + leapZoomDiff * progressFirstHalf - leapZoomDiff * progressSecondHalf)
+            return root.baseShapeSize + leapZoomDiff * progressFirstHalf - leapZoomDiff * progressSecondHalf;
+        }
+        color: Appearance.colors.colOnPrimaryContainer
+
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+}