From e532f5c072c881306ad1c33f11aeceb76ae92995 Mon Sep 17 00:00:00 2001 From: ericek111 Date: Wed, 14 Oct 2026 20:30:15 +0200 Subject: [PATCH] Smooth flick animation: scale the symbol instead of its font size font.pixelSize is an integer, so the old animation stepped in whole pixels and re-laid out the text each step: width and height jumped, centering snapped x sideways and y even moved backwards. Draw at the final size and animate scale and position, which are continuous. Co-Authored-By: Claude Opus 5.5 --- qml/Key.qml | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/qml/Key.qml b/qml/Key.qml index d19b441..1629cfb 100644 --- a/qml/Key.qml +++ b/qml/Key.qml @@ -57,14 +57,19 @@ Item { // Flicking slides the secondary symbol down into the main position. Text { id: flick - readonly property real restY: key.height * 0.1 - readonly property real centerY: (key.height - height) / 2 + // Drawn at its final size and scaled down at rest. Animating + // font.pixelSize instead steps in whole pixels and re-lays out the + // text each step, so the symbol jitters. + readonly property real restScale: 0.6 + readonly property real restCenterY: key.height * 0.1 + height * restScale / 2 + readonly property real centerY: restCenterY + (key.height / 2 - restCenterY) * key.flickProgress visible: text !== "" && !key.blank text: key.flickLabel anchors.horizontalCenter: parent.horizontalCenter - y: restY + (centerY - restY) * key.flickProgress - font.pixelSize: key.height * (0.24 + 0.16 * key.flickProgress) + y: centerY - height / 2 + scale: restScale + (1 - restScale) * key.flickProgress + font.pixelSize: key.height * 0.4 color: key.flickProgress >= 1 ? Theme.text : Theme.secondaryText }