@KononovD

Стрелка на самописных часах на 60-й секунде крутится в противоположную сторону. Как исправить?

Здравствуйте!
вот пример:
https://codepen.io/Kononov_D/pen/MLMMzY

я понимаю, что это из-за транзишина, если его убрать - все становится нормально. Но как это пофиксить? может есть альтернативы?
  • Вопрос задан
  • 88 просмотров
Решения вопроса 2
profesor08
@profesor08
Убери transition, он тебе только мешает. setTimeout, setInterval тут не подойдут, они не гарантируют, что твои часики будут тикать соответственно времени.

Вариантов у тебя несколько, задать движение стрелок при помощи @keyframes, чтоб они все время крутились, продолжительность 60 сек и 3600 сек соответственно. Программно при загрузке поворачивать контейнер стрелки на нужный угол, чтоб стрелки начинали идти с нужного положения.

Другой вариант это двигать стрелки на js, анимировано и плавно, независимо от частоты кадров. Увеличиваем значение и угол поворота растет и растет до бесконечности, но можешь его уместить в рамки 0 - 359 - (seconds * 6) % 360

const sec = document.getElementById("sec");
const min = document.getElementById("min");

let lastTime = Date.now();
let seconds = (new Date()).getSeconds();
let minutes = (new Date()).getMinutes() + seconds / 60;

function animate() {
  const now = Date.now();
  const deltaTime = now - lastTime;
  lastTime = now; 
  
  seconds += deltaTime / 1000;
  minutes += deltaTime / 1000 / 60;
  
  sec.style.transform = `rotate(${seconds * 6}deg)`;
  min.style.transform = `rotate(${minutes * 6}deg)`;
  
  requestAnimationFrame(animate);
}

animate();


Аналогично можно подсчитывать время на каждом кадре
const sec = document.getElementById("sec");
const min = document.getElementById("min");

function animate() {
  const date = new Date();
  
  const seconds = date.getSeconds() + (date.getTime() % 1000) / 1000;
  const minutes = date.getMinutes() + seconds / 60;
  
  sec.style.transform = `rotate(${seconds * 6}deg)`;
  min.style.transform = `rotate(${minutes * 6}deg)`;
  
  requestAnimationFrame(animate);
}

animate();
Ответ написан
@thewind
php программист, front / backend developer
Можно так... хотя вариант и не идеальный https://codepen.io/anon/pen/LqKwxd
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы