Question

我想使用javascript setInterval函数来实现一个框旋转动画效果，我希望动画保持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.5秒，当我使用console.time计算整个持续时间时，它持续约6秒！不是1.5秒。为什么会发生这种情况？我该如何解决？这个问题？

以下是demo

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

Answer 1

因为你改变了dom，然后重新流动并重新流动更新整个视图（需要一段时间）。为了解决这个问题，要么不经常更新，要么使用css3动画/过渡。

Answer 2

1 ms间隔在某些操作系统（例如Windows）上没有意义，因为调度程序时间片大约为10 ms。此外，您的功能总共可能超过1毫秒。这两个人同意你的减速。

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

Answer 3

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

...
-webkit-transform: rotate(360deg);  
-webkit-transition:-webkit-transform 1s ease-in-out;  
...

Answer 4

为什么在使用简单的样式表时，你是否正在使用Jquery？你已经在使用Mozilla-＆amp;特定于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);

Answer 5

以上关于css使用的所有评论都是正确的。同样值得注意的是，每毫秒运行那么多代码都是过分的 - 你只需要~30帧/秒就可以让动画在人眼中流畅地显现，并且在这里你可以运行1000帧/秒。如果将帧空间多一点并且每33毫秒运行一次动画，动画会更快，看起来更平滑。

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

对于此示例，只需将setInterval替换为requestAnimationFrame并对您的轮值进行一些微调即可。

使用javascript setInterval函数实现动画效果：比我预期的要慢

5 个答案: