用于开始CSS转换的requestAnimationFrame
用于开始CSS转换的requestAnimationFrame
提问于 2012-10-25 20:15:13
请求动画帧来开始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);谢谢你的回复。
回答 2
Stack Overflow用户
发布于 2015-04-02 11:13:58
我知道这个问题很老，但这可能对某些人有用。
在本例中，rAF(requestAnimationFrame)是无用的。因为你是用css转换滑动元素，并调用rAF一次。你必须循环属性的变化，逐帧调用rAF来优化浏览器的CPU和GPU性能。
关于rAF的主要思想：
当你想在没有css动画的情况下制作dom元素的动画时，你必须改变元素的样式属性(比如width，height，top，left等)。周期性地。
如果没有rAF，你必须使用setTimeout，setInterval函数来根据时间改变道具。但是浏览器不会优化这些进程，这可能会影响CPU和GPU的性能。
当您使用rAF时，现代浏览器可以使用更少的CPU和GPU来优化动画性能。
有用的链接：
Stack Overflow用户
发布于 2015-04-02 12:22:13
不不是的。在现代浏览器中，所有动画、CSS过渡、CSS动画、SMIL、element.animate都由相同的内部引擎控制。浏览器将在下一个可用帧上启动您的动画。RAF和原生动画有不同的线程。RAF是为JavaScript动画设计的。该重写将只等待几毫秒，直到设置这些更改。在此之后，您的动画将由内部引擎控制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13076540
复制相关文章
点击加载更多
相似问题
如何使我的图像响应，最大宽度不工作
图像对最大宽度属性没有响应。
图像的宽度和最大宽度属性
如何使IE支持最小宽度/最大宽度CSS属性？
最大高度和最大宽度的响应图像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
