ericek111/sloposk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Smooth flick animation: scale the symbol instead of its font size

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
ericek111
2026-10-14 20:30:15 +02:00
co-authored by Claude Opus 5.5
parent 5277ab16ff
commit e532f5c072
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qml/Key.qml
+9 -4
View File
@@ -57,14 +57,19 @@ Item {
// Flicking slides the secondary symbol down into the main position. // Flicking slides the secondary symbol down into the main position.
Text { Text {
id: flick id: flick
readonly property real restY: key.height * 0.1 // Drawn at its final size and scaled down at rest. Animating
readonly property real centerY: (key.height - height) / 2 // 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 visible: text !== "" && !key.blank
text: key.flickLabel text: key.flickLabel
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
y: restY + (centerY - restY) * key.flickProgress y: centerY - height / 2
font.pixelSize: key.height * (0.24 + 0.16 * key.flickProgress) scale: restScale + (1 - restScale) * key.flickProgress
font.pixelSize: key.height * 0.4
color: key.flickProgress >= 1 ? Theme.text : Theme.secondaryText color: key.flickProgress >= 1 ? Theme.text : Theme.secondaryText
} }