虚拟时钟臂的最后一个滴答动画-解网

问：

我正在 css 和 javascript 的帮助下开发虚拟时钟。随着时间的流逝，我使用以下转换来转换时钟的臂。我的问题是，当手臂到达小时结束时，即从第 59 个刻度过渡到第 1 个刻度时，它会非常快速地将手臂缠绕回小时的开始，而不是保持其路线。换句话说，在第 59 个价格变动时，它执行 -59，而不是添加一个并重置计数器。

function setDate(){

const now = new Date();const seconds = now.getSeconds();
const secondsDegrees = ((seconds/60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

const minutes = now.getMinutes();
const minutesDegrees = ((minutes/60) * 360) +90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

const hours = now.getHours();
const hoursDegrees = ((hours/12) * 360) +90;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}

我试图通过添加一个if...else 语句禁用一分钟最后一秒的过渡效果。这对输出没有任何影响。我认为当我打开和关闭动画时，倒带动画更快。

if (seconds == 0) {
transition = false;
if(seconds > 0){
transition = true;
} else {
transition = false;
}}

我正在添加可以在我的CSS文件中看到过渡的部分。

.hand {
width: 50%; 
height: 6px; 
background: black; 
position: absolute; 
top: 50%; 
transform-origin: 100%; 
transform: rotate(90deg); 
transition: all 0.05s; 
transition-timing-function: cubic-bezier(0.1, 2.7,0.58, 1); 
}

javascript css-transitions 转换实时时钟

const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');

function setDate(){

   const time = new Date().getTime() / 1000 % (60 * 60 * 12 * 10) - new Date().getTimezoneOffset()*60;
   const secondsDegrees = Math.floor(time) / 60 * 360 - 90;
   seconds.style.setProperty('--rotate', secondsDegrees+'deg');

   const minutesDegrees = Math.floor(time / 60) / 60 * 360 -90;
   minutes.style.setProperty('--rotate', minutesDegrees+'deg');

   const hoursDegrees = Math.floor(time/60/60) / 12 * 360 -90;
   hours.style.setProperty('--rotate', hoursDegrees+'deg');
}

setDate();
setInterval(setDate, 1000);

#clock {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  margin: 10px;
  position: relative;
}

#hours, #minutes, #seconds {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-2px, -50%) rotate(var(--rotate, 0));
  transform-origin: 2px 50%;
  border-radius: 4px;
  transition: transform .2s ease;
}

#hours {
  width: 30px;
  height: 6px;
  background: black;
}

#minutes {
  width: 45px;
  height: 4px;
  background: #414141;
}

#seconds {
  width: 45px;
  height: 2px;
  background: #fa48a1;
}

<div id="clock">
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

或者更简单：检查加载时的初始值，然后随着间隔递增：

const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');

const now = new Date();
let timeSeconds = now.getHours()*60*60+now.getMinutes()*60+now.getSeconds()-1;

function setDate(){
   timeSeconds++;
   seconds.style.setProperty('--rotate', (timeSeconds / 60 * 360 - 90)+'deg');
   minutes.style.setProperty('--rotate', (Math.floor(timeSeconds / 60 ) / 60 * 360 - 90)+'deg');
   hours.style.setProperty('--rotate', (Math.floor(timeSeconds / 60 / 60) / 12 * 360 - 90)+'deg');
}

setDate();
setInterval(setDate, 1000);

#clock {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  margin: 10px;
  position: relative;
}

#hours, #minutes, #seconds {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-2px, -50%) rotate(var(--rotate, 0));
  transform-origin: 2px 50%;
  border-radius: 4px;
  transition: transform .2s ease;
}

#hours {
  width: 30px;
  height: 6px;
  background: black;
}

#minutes {
  width: 45px;
  height: 4px;
  background: #414141;
}

#seconds {
  width: 45px;
  height: 2px;
  background: #fa48a1;
}

<div id="clock">
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

虚拟时钟臂的最后一个滴答动画

The Last Tick Animation of the Arms of the Virtual Clock

评论

评论