feat(buttonNavigation): move the selector along the path instead of moving directly to the selected button

This commit is contained in:
2026-01-13 18:34:01 +01:00
parent f75a1c38e8
commit 91d8b6db3b
2 changed files with 161 additions and 51 deletions

View File

@@ -10,39 +10,10 @@ const props = withDefaults(
);
const { onRender } = useScreen();
const { assets } = useAssets();
const ANIMATION_SPEED = 15;
let [currentX, currentY, currentWidth, currentHeight] = props.rect;
onRender((ctx, deltaTime) => {
const [targetX, targetY, targetWidth, targetHeight] = props.rect;
const dx = targetX - currentX;
const dy = targetY - currentY;
const dw = targetWidth - currentWidth;
const dh = targetHeight - currentHeight;
if (
Math.abs(dx) < 0.5 &&
Math.abs(dy) < 0.5 &&
Math.abs(dw) < 0.5 &&
Math.abs(dh) < 0.5
) {
[currentX, currentY, currentWidth, currentHeight] = props.rect;
} else {
const speed = (ANIMATION_SPEED * deltaTime) / 1000;
currentX += dx * speed;
currentY += dy * speed;
currentWidth += dw * speed;
currentHeight += dh * speed;
}
const x = Math.floor(currentX);
const y = Math.floor(currentY);
const w = Math.floor(currentWidth);
const h = Math.floor(currentHeight);
onRender((ctx) => {
const [x, y, w, h] = props.rect;
ctx.globalAlpha = props.opacity;