requestAnimationFrame用于开始CSS转换

Question

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

例如,Mozilla CSS转换页面包含指向此jsfiddle示例的链接:

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);    

重写这个例子如下有意义吗？(见这个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 函数根据时间更改 props。但浏览器不会优化这些进程，这对于 CPU、GPU 性能来说可能会很痛苦。

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

有用的链接：

requestAnimationFrame 用于智能动画

请求动画帧