0

我想使用javascriptsetInterval函数来实现一个盒子旋转动画效果，我希望动画保持1.5秒，在1.5秒内盒子会旋转360度，所以我以一毫秒计算增量，并每毫秒使用setInterval函数。这是我的代码：

var duration= 1500;//The animation duration time
var rotate = 360;//The rotate need to be rotate
var degPerSec = rotate / parseFloat(duration); //the increment per millisecond
var degree = 0;//the begin degree
console.time('rotate');
var timer = setInterval(function () {
    degree = degree + degPerSec;
    $('#test')[0].style.MozTransform = 'rotate(' + degree + 'deg)';
     $('#test')[0].style.WebkitTransform = 'rotate(' + degree + 'deg)';

    if (degree >= rotate) { //if reach 360 degree , clear the interval
        clearInterval(timer);
        console.timeEnd('rotate');// caculate the duration 
    }
    }, 1)
})

动画可以成功执行，但似乎它不仅持续了1.5s，当我console.time用来计算整个持续时间时，它持续了大约6s！不是1.5s。为什么会发生这种情况？我该如何解决这个问题？

这是演示

更新：：为什么我不使用css3：因为旋转度是作为参数，需要在外面传递表格，尚未定义

4

5 回答 5

0

这是因为您更改了 dom，然后会发生重新流动，并且重新流动会更新整个视图（需要一段时间）。要解决这个问题，要么减少更新频率，要么使用 css3 动画/过渡。

于 2012-06-20T15:09:15.040 回答
0

在某些操作系统（例如 Windows）上，1 毫秒的间隔没有意义，因为那里的调度程序时间片约为 10 毫秒。此外，您的函数总共可能需要超过 1 毫秒。这两个同意你的放缓。

为了安全起见，您可以测量函数调用之间的实际延迟。

于 2012-06-20T15:09:23.200 回答
0

你这样做有理由吗？为什么不直接使用transition来定义转换的持续时间？

...
-webkit-transform: rotate(360deg);  
-webkit-transition:-webkit-transform 1s ease-in-out;  
...
于 2012-06-20T15:11:02.043 回答
0

当您可以使用简单的样式表时，您到底为什么要使用 Jquery 呢？您已经在使用 Mozilla 和 Webkit 特定的分支代码。还不如只用 CSS3 来完成它。更快（使用本机 C 代码而不是 JS）并且更简单。

#test{
    width:30px;
    height:30px;
    background:red;
    position:absolute;
    left:20px;
    top:20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

编辑：如果您需要对旋转度数使用可变参数，使用 JS 仍然非常可行：

var degrees = 360;
var incrementer = 1;
setInterval(function() {
  var deg = "rotate(" + (degrees * incrementer) + "deg)";
  var obj = document.getElementById("test");
  if (typeof(obj.style.transform) !== "undefined") {
    obj.style.transform = deg;
  } else if (typeof(obj.style.MozTransform) !== "undefined") {
    obj.style.MozTransform= deg;
  } else if (typeof(obj.style.WebkitTransform) !== "undefined") {
   obj.style.WebkitTransform = deg;
  }
  incrementer = incrementer + 1;
}, 1500);
于 2012-06-20T15:15:51.650 回答
0

以上所有关于 CSS 使用的评论当然都是正确的。还值得注意的是，每毫秒运行这么多代码是太过分了——你只需要大约 30 帧/秒就可以让动画在人眼中流畅地显示，而这里你运行的是 1000 帧/秒。如果将帧间隔更多一点并每隔约 33 毫秒运行一次动画，则动画会更快并且看起来更流畅。

最后，有一个用于确定最佳帧速率并为我们执行内置于浏览器的运行循环的工具，称为requestAnimationFrame。您可以将此回调传递给它，它将确定最有效的帧速率（如果可能，通常为 60）并以最有效的方式运行动画，最大限度地减少与重绘相关的开销。

对于这个例子，它就像替换并稍微调整你的旋转值一样setInterval简单requestAnimationFrame。

于 2012-06-20T15:23:00.260 回答