javascript - 用于开始 CSS 转换的 requestAnimationFrame

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 transition 滑动元素并调用 rAF 一次。您必须通过逐帧调用 rAF 来循环 prop 更改，以通过浏览器优化 CPU、GPU 性能。

关于 rAF 的主要思想:

当你想在没有 css 动画的情况下为 dom 元素设置动画时，你必须定期更改元素的样式属性(如宽度、高度、顶部、左侧等)。

没有rAF，你必须使用setTimeout，setInterval函数来根据时间改变props。但是浏览器不会优化这些过程，这可能会对 CPU、GPU 性能造成痛苦。

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

有用的链接:

requestAnimationFrame for Smart Animating

requestAnimationFrame