CSS 和 jQuery 模拟时钟 - 流畅的动画

Question

我的 CSS3/jQuery 模拟时钟有点小问题。

对于每一步，时钟指针都非常辛苦。相反，我希望运动/动画流畅。我已经尝试过使用transition: all .1s，但是当时钟指针到达顶部时，它就搞砸了。

我正在使用transform: rotate() 来旋转每只手。每移动一次，它会旋转 6 度。

也许解决方案是，不是只旋转指针，每秒、分钟和小时旋转 6 度，而是秒针每 1/6 秒旋转 1 度，秒针每 10 秒旋转 1 度。分针和时针每 10 分钟一次。我认为它可以创建更流畅的手部动画，但我不知道该怎么做。

这是我的 JavaScript 代码：

$(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css({ "transform": srotate });

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css({ "transform": hrotate});

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css({"transform" : mrotate });

      }, 1000 );

});

jsFiddle Demo

希望你理解这个问题，并能帮助我:)

Answer 1

为手设置线性过渡：

#clock div {
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

为避免指针反向归零的奇怪行为，您应该将 JS 更改为以毫秒为单位工作。这样旋转值（度）只会增加。 CSS 旋转很好：

$(function() { 
     var i=0;
    setInterval( function() {
        //get time since midnight in milliseconds
         var now = new Date(),
        then = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        0,0,0),
        mil = now.getTime() - then.getTime(); // difference in milliseconds

          var h = (mil/(1000*60*60));
          var m = (h*60);
          var s = (m*60);
          //console.log(h+":"+m+":"+s);   


      var sdegree = (s * 6);
      var srotate = "rotate(" + sdegree + "deg)";  
      $("#sec").css({ "transform": srotate });

      var hdegree = h * 30 + (h / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      $("#hour").css({ "transform": hrotate});

      var mdegree = m * 6;
      var mrotate = "rotate(" + mdegree + "deg)";      
      $("#min").css({ "transform" : mrotate });

         if(i>0){
             $("#clock").addClass("transform");       
         }
         i++;

      }, 1000 );

});

http://jsfiddle.net/FHNJf/10/

更新：

这是一个纯 JS 解决方案，用于平滑扫手。它使用requestAnimationFrame 对循环进行计时，并且由于它不使用 CSS 转换，因此不会出现当您将焦点返回到浏览器选项卡时手必须“赶上”的奇怪行为。

//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
              window.setTimeout(callback, 1000 / 60);
          };
})();

//initialize the clock in a self-invoking function
(function clock(){ 
    var hour = document.getElementById("hour"),
        min = document.getElementById("min"),
        sec = document.getElementById("sec");
    //set up a loop
    (function loop(){
        requestAnimFrame(loop);
        draw();
    })();
    //position the hands
    function draw(){
        var now = new Date(),//now
            then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
            diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
            h = (diffInMil/(1000*60*60)),//hours
            m = (h*60),//minutes
            s = (m*60);//seconds
        //rotate the hands accordingly
        sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
        hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
        min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
    } 
})();

http://jsfiddle.net/FHNJf/13/

Answer 2

您只需要在手形元素上指定过渡持续时间。试试这个：

#clock div {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;
}

Updated fiddle

Answer 3

您希望第二只（以及所有其他）手平稳移动吗？尝试将以下 css 添加到 #sec div：

[prefix-]transition: all 1.00s linear 0.0s;

这只会让您了解其中的一部分，您必须聪明地了解如何让变换旋转，因为它最终可能会在 12 点钟左右引起错误。

对于它的价值，您可能有一个 setInterval(...)，它会创建一个 new Date() 并相应地更新手。