Остановить вращающееся колесо под определенным углом?CSS

Разбираемся в CSS
Ответить
Anonymous
 Остановить вращающееся колесо под определенным углом?

Сообщение Anonymous »

Я не могу заставить вращающееся колесо остановиться на указанном индексе сектора.
После создания случайного индекса он должен найти свою начальную степень и вычислить минимальный максимальный диапазон, чтобы колесо останавливается где-то между градусами этого сектора.
Может кто-нибудь сказать мне, чего мне здесь не хватает, потому что оно не работает должным образом.
ДЕМО компонента WheelSpin: https://playcode.io/2211878:
То, о чем я говорю, — это метод spin():

Код: Выделить всё

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);
}
Я пытался повернуть колесо с помощью CSS, но не уверен, что это хорошая идея.
Я понятия не имею, как остановить колесо в определенном секторе.
Я пытался повернуть колесо с помощью CSS, но не уверен, что это хорошая идея.
Я понятия не имею, как остановить колесо в определенном секторе.
п>

Подробнее здесь: https://stackoverflow.com/questions/793 ... gle-degree
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»