Анимация колеса рулетки с динамическими данными с сервера
Я работаю над колесом рулетки, которое вращается в 2 фазы.
1) Когда пользователь нажимает кнопку вращения, он просто переходит в бесконечное вращение, пока данные не поступят с сервера.
2) Когда данные поступают, они просто поворачиваются на угол, полученный с сервера.
Мы получаем данные с сервера, потому что они содержат некоторую конфиденциальную информацию, которую мы не хотим отправлять клиенту.
Проблема, с которой я сталкиваюсь, заключается в том, что переход от 1) к 2) не является плавным. Спиннер неожиданно останавливается на случайное время, а затем запускается 2) (Конечное вращение).
Вот моя рабочий пример js, которая представляет собой простейшую репликацию сценария https://jsfiddle.net/ej2c5k7z/6/
HTML:
<div id = "spinning" style = "background-color: red; display: inline-block">
abcdefghijkl
</div>
JavaScript:
let element = $("#spinning");
// Simulate random interval for data being fetched from server
let randomIntervalSeconds = Math.random()*10;
console.info(randomIntervalSeconds);
// TODO: keep rotating the element for randomIntervalSeconds
// I used below code along with setInterval with 1001 ms interval
let intervalKey = setInterval(function(){
element.css({"transform": "rotate(" + 360 + "deg)", "transition-duration": 1 + "s"});
},1001)
setTimeout(function(){
// Simulate data arrived callback.
clearInterval(intervalKey);
element.css({"transform": "rotate(" + (360+48) + "deg)", "transition-duration": 1 + "s"});
}, randomIntervalSeconds*1000)
Мне просто интересно, можно ли вообще поддерживать вращение счетчика (или любого div) бесконечно до тех пор, пока не появятся данные и плавно не перейдет в конечное вращение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вероятно, это не совсем то, что вы ищете, но, возможно, это может вдохновить вас над линией ворот. Я попытался дать вашему div класс, который заставляет его всегда вращаться, а затем, по истечении тайм-аута, я удаляю вращающуюся анимацию и поворачиваю div на необходимое количество градусов. кажется, что он слишком сильно "защелкивается" на месте, и я (пока?) не понял, как это обойти, но завтра я попробую еще немного.
let element = $("#spinning");
// Simulate random interval for data being fetched from server
let randomIntervalSeconds = Math.random()*10;
console.info(randomIntervalSeconds);
// TODO: keep rotating the element for randomIntervalSeconds
// I used below code along with setInterval with 1001 ms interval
setTimeout(function(){
// Simulate data arrived callback.
element.removeClass("go");
element.css({"transform": "rotateZ(" + (360+48) + "deg)", "transition-duration": 1.5 + "s"});
}, randomIntervalSeconds*1000)#spinning {
background-color: red;
display: inline-block;
margin: 50px;
}
.go {
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotateZ(0deg) }
to { transform: rotateZ(360deg) }
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "spinning" class = "go">
abcdefghijkl
</div>
Я уже пробовал удалить классы анимации css. но этот переход слишком резкий и выглядит неестественно.