Проблема с повторным запуском анимации
Делаю игру для учебного проекта и столкнулся с проблемой. Создал анимацию кубика на CSS, которая показывает бросок кости. Хочу чтобы функция startGameRound()
запускала анимацию два раза подряд с задержкой между ними.
Сейчас работает только вторая анимация throwPlayerTwo()
, первая throwPlayerOne()
не показывается. Пробовал разные варианты с таймерами, но результат тот же.
Основная функция:
function startGameRound() {
throwPlayerOne();
window.setTimeout(() => { }, 2000);
throwPlayerTwo();
}
function throwPlayerOne() {
var firstPlayerResult = generateRandomNumber();
window.setTimeout(() => { updatePlayerOnePosition(firstPlayerResult) }, 1200);
window.setTimeout(clearDiceState, 3500);
}
function throwPlayerTwo() {
var secondPlayerResult = generateRandomNumber();
window.setTimeout(() => { updatePlayerTwoPosition(secondPlayerResult) }, 5000);
window.setTimeout(clearDiceState, 8000);
}
Функция анимации:
function generateRandomNumber() {
clearDiceState();
var resultDisplay = document.getElementById('diceDisplay');
var randomValue = Math.floor(Math.random() * 6) + 1;
document.getElementById('animationContainer').className = 'rollAnimation';
resultDisplay.className = 'showResult';
return randomValue;
}
CSS для анимации:
.rollAnimation {
animation: wobble 0.3s;
animation-iteration-count: 4;
}
@keyframes wobble {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(15deg) scale(1.1); }
50% { transform: rotate(-10deg) scale(0.9); }
75% { transform: rotate(5deg) scale(1.05); }
100% { transform: rotate(0deg) scale(1); }
}
.showResult {
opacity: 1;
transition: opacity 0.8s ease-in;
}
Почему анимация не повторяется при втором вызове?