add slidefade text animation to some stuff

2025-08-19 18:09:07 +07:00
parent ee21139356
commit 8d3a036b3b
8 changed files with 87 additions and 5 deletions
@@ -3,6 +3,11 @@ import QtQuick
 import QtQuick.Layouts

 Text {
+    id: root
+    property bool animateChange: false
+    property real animationDistanceX: 0
+    property real animationDistanceY: 6
+
    renderType: Text.NativeRendering
    verticalAlignment: Text.AlignVCenter
    font {
@@ -12,4 +17,73 @@ Text {
    }
    color: Appearance?.m3colors.m3onBackground ?? "black"
    linkColor: Appearance?.m3colors.m3primary
+
+    component Anim: NumberAnimation {
+        target: root
+        duration: 300 / 2
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+    }
+
+    Behavior on text {
+        id: textAnimationBehavior
+        property real originalX: root.x
+        property real originalY: root.y
+        enabled: root.animateChange
+
+        SequentialAnimation {
+            alwaysRunToEnd: true
+            ScriptAction {
+                script: textAnimationBehavior.originalX = root.x;
+            }
+            ScriptAction {
+                script: textAnimationBehavior.originalY = root.y;
+            }
+            ParallelAnimation {
+                Anim {
+                    property: "x"
+                    to: textAnimationBehavior.originalX - root.animationDistanceX
+                    easing.type: Easing.InSine
+                }
+                Anim {
+                    property: "y"
+                    to: textAnimationBehavior.originalY - root.animationDistanceY
+                    easing.type: Easing.InSine
+                }
+                Anim {
+                    property: "opacity"
+                    to: 0
+                    easing.type: Easing.InSine
+                }
+            }
+            PropertyAction {} // Tie the text update to this point (we don't want it to happen during the first slide+fade)
+            PropertyAction {
+                target: root
+                property: "x"
+                value: textAnimationBehavior.originalX + root.animationDistanceX
+            }
+            PropertyAction {
+                target: root
+                property: "y"
+                value: textAnimationBehavior.originalY + root.animationDistanceY
+            }
+            ParallelAnimation {
+                Anim {
+                    property: "x"
+                    to: textAnimationBehavior.originalX
+                    easing.type: Easing.OutSine
+                }
+                Anim {
+                    property: "y"
+                    to: textAnimationBehavior.originalY
+                    easing.type: Easing.OutSine
+                }
+                Anim {
+                    property: "opacity"
+                    to: 1
+                    easing.type: Easing.OutSine
+                }
+            }
+        }
+    }
 }