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

Question

[KononovD]

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

я понимаю, что это из-за транзишина, если его убрать - все становится нормально. Но как это пофиксить? может есть альтернативы?

Answer 1

[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();

Comments

[KononovD]

Спасибо) почему-то анимировать часы на css я не догадался.. хотя мог бы-_-

Утром уже разберусь в обеих вариантах. Ещё раз спасибо за развернутый ответ!

Answer 2

[Дмитрий]

Можно так... хотя вариант и не идеальный https://codepen.io/anon/pen/LqKwxd

Comments

[KononovD]

спасибо) градусы, которые уходят в бесконечный + - тот еще костыль, конечно, но зато работает)

[Дмитрий]

KononovD, да, я знаю. Вариант сложнее выглядит примерно так: если секунды равны 0, то ставить секунды равны 60; создать класс в css, где transition: none, и применять этот класс если секунды=60, указывать трансформацию как обычно (по идее она будет без анимации в обратную сторону), и далее убираем этот дополнительный класс, чтобы на след секунде снова была анимация. Как то так...

[KononovD]

Дмитрий, при transition 1s такого не сделать, или будет дёрганый переход