javascript - 基于秒计算时如何获得平滑旋转

Question

我有第二根针，它根据角度旋转seconds。 旋转就像滴答滴答滴答.....360 deg

这是所需的代码：

setInterval(clockRunner, 1000);

function clockRunner() {
  let date = new Date()
  let currentSecond = date.getSeconds();
  let secondRotation = 6 * currentSecond + "deg";

  document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
  document.getElementById("secondNeedle").style.transformOrigin = "center 91%";
 
}

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
 
}

<div id="secondNeedle"></div>

可以像下面的代码片段那样进行旋转：

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
  animation: example 60s linear infinite;
  transform-origin: center 91%;
}

@keyframes example {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

<div id="secondNeedle"></div>

知道在上面的代码片段旋转中没有计算。但是能不能达到同样的效果

提前感谢您的帮助

标签： javascripthtmlcss

Answer 1

当然。

由于您transform每秒都在修改，因此对滴答的最小修复是为transform持续时间为 1 秒的值添加线性转换：

transition: 1s transform linear;

function clockRunner() {
  let date = new Date()
  let currentSecond = date.getSeconds();
  let secondRotation = 6 * currentSecond + "deg";
  document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
  document.getElementById("secondNeedle").style.transformOrigin = "center 91%";

}

clockRunner();
setInterval(clockRunner, 1000);

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
  transition: 1s transform linear;
}

<div id="secondNeedle"></div>

正如@epascarello 所指出的，当时钟从 59 秒移动到 0 秒时，时钟并没有做正确的事情。

为了避免这种环绕效应，您需要跟踪时钟完成的完整转数：

let revolutions = 0;
let lastAngle = 0;
function clockRunner() {
  let date = new Date()
  let currentSecond = date.getSeconds();
  let angle = 6 * currentSecond;
  if(angle < lastAngle) revolutions += 1;
  let secondRotation = (revolutions * 360 + angle) + "deg";
  lastAngle = angle;
  document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
  document.getElementById("secondNeedle").style.transformOrigin = "center 91%";

}

clockRunner();
setInterval(clockRunner, 1000);

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
  transition: 1s transform linear;
}

<div id="secondNeedle"></div>