Ein sich drehendes Rad bei einem bestimmten Winkelgrad stoppen?
Posted: 06 Jan 2025, 23:14
Ich kann ein sich drehendes Rad nicht dazu bringen, bei einem bestimmten Sektorindex anzuhalten.
Sobald ein Zufallsindex erstellt wurde, sollte er seinen Startgrad ermitteln und den Min-Max-Bereich berechnen Rad stoppt irgendwo dazwischen in diesem Sektor.
Kann mir jemand sagen, was ich hier übersehe, weil es nicht wie erwartet funktioniert?
WheelSpin-Komponenten-DEMO: https://playcode.io/2211878:
Der Teil, von dem ich spreche, ist eine Methode spin():
Ich habe versucht, mit dem CSS-Ansatz zu drehen, bin mir aber nicht sicher, ob das eine gute Idee ist.
Ich habe auch keine Ahnung, wie ich das Rad in einem bestimmten Sektor anhalten kann.
Sobald ein Zufallsindex erstellt wurde, sollte er seinen Startgrad ermitteln und den Min-Max-Bereich berechnen Rad stoppt irgendwo dazwischen in diesem Sektor.
Kann mir jemand sagen, was ich hier übersehe, weil es nicht wie erwartet funktioniert?
WheelSpin-Komponenten-DEMO: https://playcode.io/2211878:
Der Teil, von dem ich spreche, ist eine Methode spin():
Code: Select all
function spin() {
if (isSpinning.value) return;
isSpinning.value = true;
const targetIndex = getRandomSectorIndex();
const extraSpins = Math.floor(4 + Math.random() * 4);
const angle = 360 / sectors.value.length;
const randomMinMax = (m: number, M: number) => Math.random() * (M - m) + m;
// Target sector angle
const min = targetIndex * angle;
const max = min + angle;
const targetRotation = randomMinMax(min, max);
const rotateTo = currentRotation.value + 360 * extraSpins + targetRotation;
console.log(`Should be: ${sectors.value[targetIndex].code} at index ${targetIndex} of ${targetRotation}deg`);
console.log('rotate to:', rotateTo);
isSpinning.value = false;
if (wheel.value) {
wheel.value.style.transition = 'transform 5s cubic-bezier(0.3, 0, 0.1, 1)';
wheel.value.style.transform = `rotate(${rotateTo}deg)`;
}
currentRotation.value = rotateTo;
setTimeout(() => {
isSpinning.value = false;
// Calculate stopped sector
const normalizedRotation = currentRotation.value % 360;
const sectorIndex = Math.floor(normalizedRotation / 30) % sectors.value.length;
// Reverse index because rotation is clockwise
const reversedIndex = sectors.value.length - 1 - sectorIndex;
done(reversedIndex);
}, 5000);
}
Ich habe auch keine Ahnung, wie ich das Rad in einem bestimmten Sektor anhalten kann.