Question

我正在设计一个时钟，用于＆＃34;指针＆＃34;我使用JS和CSS的组合来制作流畅的动画，将秒，分和小时转换为模拟时钟中的相应程度：

function clock() { 
  var t = moment(),
      s = t.seconds() * 6,
      a = t.minutes() * 6,
      o = t.hours() % 12 / 12 * 360 + (a / 12);

  $(".hour").css("transform", "rotate(" + o + "deg)");
  $(".minute").css("transform", "rotate(" + a + "deg)");
  $(".second").css("transform", "rotate(" + s + "deg)");
}

setInterval(clock, 1000);

问题是，在达到360度之后我不希望变量永远增加，我只是回到0然后重新开始，但是，CSS让手逆时针转动会产生不良影响。

Example

我正在考虑使用JS移除过渡属性，当我即将从360转到0然后再将其放入时，这可能是一个解决方案，但我想知道是否有更清洁方式。

Answer 1

它本身不能完成。从356度到2度的过渡总是逆时针方向。如果你不介意从356到2度的可见刻度，只需删除过渡。但没有理由这样做。尝试利用rotate可以采取任何理智值，也高于360度的事实。因此，不要回到0，只是让时钟继续增加值“无休止地”（js中的最高int值是9007199254740991，所以你必须在几百万年后刷新浏览器...... :)）。

到目前为止，您可以在setInterval回调之外的单独counter对象中跟踪旋转，如下所示：

var counter = {
  s: 0,
  a: 0,
  o: 0
};

var previous = null;

然后，您希望将上一次迭代中的所有值存储在某处，并将当前值与之前的值进行比较。如有必要，将适当的计数器加1。

if(previous){
  if(s < previous.s){
    counter.s += 1;
  }
  if(a < previous.a){
    counter.a += 1;
  }
  if(o < previous.o){
    counter.o += 1;
  }
}

previous = {
  s: s,
  a: a,
  o: o
};

然后只需在内联css中设置相乘的度数值。通过这种方式，您仍然可以访问s等纯值，以防您需要这些值。

$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)");

工作小提琴：https://jsfiddle.net/dannyjolie/tccroo1q/6/

CSS变换始终顺时针旋转，不超过360度

1 个答案: