Question

请求动画帧开始CSS转换是否有意义？

例如，Mozilla CSS transitions page包含指向此jsfiddle example的链接：

CSS：

#foo{
    border-radius:50px;
    width:50px;
    height:50px;
    background:#c00;
    position:absolute;
    top:0;
    left:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s;  
}

JavaScript的：

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);

重写这个例子如下有意义吗？（见this jsfiddle）

JavaScript的：

var rAF = window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame;
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    rAF(function() {
        f.style.left = (ev.clientX-25)+'px';
        f.style.top = (ev.clientY-25)+'px';
    });
},false);

感谢您的回答。

Answer 1

我知道问题已经过时了，但这可能对某些人有用。

rAF（requestAnimationFrame）在此示例中无用。因为你是带有css过渡的滑动元素并且只调用一次rAF。您必须逐帧调用rAF来循环改变，以便通过浏览器优化CPU，GPU性能。

关于rAF的主要想法：

如果要在没有css动画的情况下为dom元素设置动画，则必须定期更改元素的样式属性（如宽度，高度，顶部，左侧等）。

如果没有rAF，你必须使用setTimeout，setInterval函数来根据时间改变道具。但是浏览器并没有优化这些过程，因此CPU性能和GPU性能都会很痛苦。

当您使用rAF时，现代浏览器可以用更少的CPU和GPU使用来优化动画性能。

有用的链接：

requestAnimationFrame for Smart Animating

requestAnimationFrame

Answer 2

不，不。在现代浏览器中，所有动画，CSS过渡，CSS动画，SMIL，element.animate都由相同的内部引擎控制。浏览器将在下一个可用帧上启动动画。 RAF和原生动画有不同的线程。 RAF适用于JavaScript动画。重写只会等待几毫秒，直到设置这些更改。之后，您的动画将由内部引擎控制。

requestAnimationFrame用于开始CSS转换

2 个答案: