fix: cursor smooth movement on higher refreshrate monitors
This commit is contained in:
3 files changed
+21
-19
No files matched your search
@@ -101,7 +101,7 @@
|
|||||||
duration: smoothCursor ? $cursorSmoothness : 0,
|
duration: smoothCursor ? $cursorSmoothness : 0,
|
||||||
translateX: mouseX,
|
translateX: mouseX,
|
||||||
translateY: mouseY,
|
translateY: mouseY,
|
||||||
ease: (t: number) => (t - 1) ** 5 + 1,
|
ease: (t: number) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
|
||||||
});
|
});
|
||||||
|
|
||||||
animate(cursor, {
|
animate(cursor, {
|
||||||
|
|||||||
+12
-10
@@ -1,19 +1,21 @@
|
|||||||
export function estimateRefreshRate(): Promise<number> {
|
export async function estimateFrameRate(): Promise<number> {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const last = performance.now();
|
const samples: number[] = [];
|
||||||
let frames = 0;
|
let last = performance.now();
|
||||||
|
|
||||||
function loop() {
|
const tick = () => {
|
||||||
const now = performance.now();
|
const now = performance.now();
|
||||||
frames++;
|
samples.push(now - last);
|
||||||
|
last = now;
|
||||||
|
|
||||||
if (now - last >= 1000) {
|
if (samples.length < 60) {
|
||||||
resolve(frames - 2);
|
requestAnimationFrame(tick);
|
||||||
} else {
|
} else {
|
||||||
requestAnimationFrame(loop);
|
const avgDelta = samples.reduce((a, b) => a + b) / samples.length;
|
||||||
|
resolve(Math.round(1000 / avgDelta));
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
requestAnimationFrame(loop);
|
requestAnimationFrame(tick);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Logo from '$assets/logo.png';
|
import Logo from '$assets/logo.png';
|
||||||
import { estimateRefreshRate } from '@/displayUtils';
|
import { estimateFrameRate } from '@/displayUtils';
|
||||||
import {
|
import {
|
||||||
beatmapSets,
|
beatmapSets,
|
||||||
currentLoadingInfo,
|
currentLoadingInfo,
|
||||||
@@ -67,15 +67,15 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const calculateCursorSmoothness = async () => {
|
const calculateCursorSmoothness = async () => {
|
||||||
const refreshRate = await estimateRefreshRate();
|
const refreshRate = await estimateFrameRate();
|
||||||
const hzMin = 60;
|
const hzMin = 60;
|
||||||
const hzMax = 144;
|
const hzMax = 500;
|
||||||
const durationMin = 70;
|
const durationMin = 350;
|
||||||
const durationMax = 180;
|
const durationMax = 600;
|
||||||
|
const clamped = Math.min(Math.max(refreshRate, hzMin), hzMax);
|
||||||
const duration =
|
const duration =
|
||||||
durationMin + ((refreshRate - hzMin) / (hzMax - hzMin)) * (durationMax - durationMin);
|
durationMin + ((clamped - hzMin) / (hzMax - hzMin)) * (durationMax - durationMin);
|
||||||
|
console.log(Math.round(duration));
|
||||||
cursorSmoothness.set(Math.round(duration));
|
cursorSmoothness.set(Math.round(duration));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user