标签: requestanimationframe
使用requestAnimationFrame控制fps？
这似乎requestAnimationFrame是现在制作动画的事实上的方式.在大多数情况下,它对我来说效果很好,但是现在我正在尝试做一些画布动画,我想知道:有没有办法确保它以某个fps运行？我知道rAF的目的是为了一贯平滑的动画,我可能冒着使我的动画不稳定的风险,但是现在看起来它的速度几乎是任意的,并且我想知道是否有办法打击不知何故.
我使用setInterval但我想要rAF提供的优化(特别是当选项卡处于焦点时自动停止).
如果有人想查看我的代码,它几乎是:
animateFlash: function() {
ctx_fg.clearRect(0,0,canvasWidth,canvasHeight);
ctx_fg.fillStyle = 'rgba(177,39,116,1)';
ctx_fg.strokeStyle = 'none';
ctx_fg.beginPath();
for(var i in nodes) {
nodes[i].drawFlash();
}
ctx_fg.fill();
ctx_fg.closePath();
var instance = this;
var rafID = requestAnimationFrame(function(){
instance.animateFlash();
})
var unfinishedNodes = nodes.filter(function(elem){
return elem.timer < timerMax;
});
if(unfinishedNodes.length === 0) {
console.log("done");
cancelAnimationFrame(rafID);
instance.animate();
}
}
其中Node.drawFlash()只是一些代码,它根据计数器变量确定半径,然后绘制一个圆.
javascript performance animation canvas requestanimationframe
推荐指数
解决办法
查看次数
为什么jQuery不使用requestAnimationFrame？
有些浏览器支持requestAnimationFrame,为什么不使用呢？毕竟,它自谷歌Chrome 10以来一直受到支持.尽管如此,jQuery 似乎并没有使用它.我发现了一个关于它的错误报告,但没有给出真正的解释？不过,我确信jQuery人有他们的理由.
他们为什么不使用这个很棒的API？
推荐指数
解决办法
查看次数
如何使用requestAnimationFrame？
我是动画新手,但我最近用动画制作了动画setTimeout.FPS太低了,所以我找到了一个使用的解决方案requestAnimationFrame,在此链接中有所描述.
到目前为止,我的代码是:
//shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
//Get metrics
var leftCurveEndX = finalLeft - initialLeft;
var leftCurveEndY = finalTop + finalHeight - initialTop;
var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
var rightCurveEndY = leftCurveEndY;
chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame …推荐指数
解决办法
查看次数
滚动事件:requestAnimationFrame VS requestIdleCallback VS被动事件侦听器
我们知道,通常建议去掉滚动侦听器,以便在用户滚动时UX更好.
但是,我经常找到像Paul Lewis这样有影响力的人推荐使用的图书馆和文章requestAnimationFrame.但是,随着Web平台的快速发展,某些建议可能会随着时间的推移而被弃用.
我看到的问题是处理滚动事件有很多不同的用例,例如构建视差网站,或处理无限滚动和分页.
我看到3个可以在UX方面有所作为的主要工具:
所以,我想知道,每个用例(我只有2个,但你可以拿出其他的),我现在应该使用什么样的工具来获得非常好的滚动体验？
更确切地说,我的主要问题将与无限滚动视图和分页(通常不必触发视觉动画,但我们想要一个良好的滚动体验)更相关,是否更好地用+被动滚动requestAnimationFrame的组合替换requestIdleCallback事件处理程序 我也想知道什么时候requestIdleCallback用于调用API或处理API响应以使滚动执行得更好,或者浏览器可能已经为我们处理了什么？
javascript dom requestanimationframe requestidlecallback passive-event-listeners
推荐指数
解决办法
查看次数
多个requestAnimationFrame性能
如果我正在做多个动画,那么添加多个requestAnimationFrame回调在性能方面是否正常？F.ex:
function anim1() {
// animate element 1
}
function anim2() {
// animate element 2
}
function anim3() {
// animate element 3
}
requestAnimationFrame(anim1);
requestAnimationFrame(anim2);
requestAnimationFrame(anim3);
或者它被证明比使用单个回调更糟糕:
(function anim() {
requestAnimationFrame(anim);
anim1();
anim2();
anim3();
}());
我问,因为我真的不知道幕后发生了什么,requestAnimationFrame当你多次调用它时排队回调？
javascript performance jquery animation requestanimationframe
推荐指数
解决办法
查看次数
使用requestAnimationFrame在Canvas中计算FPS
我怎么能计算画布游戏应用程序的FPS？我已经看过一些例子,但没有一个使用requestAnimationFrame,我不知道如何在那里应用他们的解决方案.这是我的代码:
顺便说一句,有没有我可以添加的库来监督性能？
推荐指数
解决办法
查看次数
$(window).scroll in vanilla JavaScript
什么是普通JS中的以下内容？
$(window).scroll(function() { });我也想要动画滚动,例如:
$('html, body').animate({scrollTop:1750}, 'slow');
我应该用requestAnimationFrame吗？
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
是否有任何示例在点击时触发动画而不是连续渲染？
推荐指数
解决办法
查看次数
requestAnimationFrame垃圾回收
我正在使用Chrome Dev Tools v27中的时间轴分析以下代码的内存使用情况.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title>RAF</title>
</head>
<body>
<script type='text/javascript' charset='utf-8'>
var frame = function() {
window.webkitRequestAnimationFrame(frame);
};
window.webkitRequestAnimationFrame(frame);
</script>
</body>
</html>
注意这很简单.但最终我看到一个牙齿图案出现,表明垃圾收集器正在回收内存.
raf是否默认创建垃圾对象？有什么方法可以避免这种情况吗？谢谢.
javascript optimization garbage-collection memory-leaks requestanimationframe
推荐指数
解决办法
查看次数
限制Three.js中的帧率以提高性能,requestAnimationFrame？
我在想,对于一些项目我做60fps并不是完全需要的.我想我可以有更多的物体和物体以30fps运行,如果我能让它以该帧速率平稳运行.我想如果我在three.js中编辑了requestAnimationFrame垫片,我可以将它限制为30.但是我想知道是否有更好的方法来使用提供的three.js本身.此外,这会给我带来我正在思考的性能提升.我能以30fps的速度渲染两倍于60fps的物体吗？我知道在30和60之间运行的东西之间的区别,但是我能够以平稳的恒定30fps运行吗？
我通常使用WebGLRenderer,如果需要,可以回退到Canvas,除了专门针对一个的项目,通常是webgl着色器项目.
推荐指数
解决办法
查看次数
Chrome requestAnimationFrame问题
相关主题:requestAnimationFrame垃圾回收
我一直在努力为我正在为触摸设备构建的小部件中的平滑动画,我发现帮助我的一个工具是Chrome内存时间轴屏幕.
这对我在rAF循环中评估我的内存消耗有所帮助,但是我对此时在Chrome 30中观察到的行为的一些方面感到困扰.
当最初进入我的页面,其中rAF循环正在运行时,我看到了这一点. 
看起来没问题.如果我完成了我的工作并且在内循环中消除了对象分配,那么就不应该有锯齿.这是与链接主题一致的行为,也就是说,无论何时使用rAF,Chrome都会内置泄漏.(哎呀!)
当我开始在页面中执行各种操作时,它会变得更有趣.
我实际上并没有做任何不同的事情,只是暂时添加了两个元素,这些元素将CSS3 3D变换样式应用于几帧,然后我停止与它们进行交互.
我们在这里看到的是Chrome报告,突然间每个rAF发射(16ms)都会导致Animation Frame Fired x 3.
这种重复,以及它的速率,单调增加直到页面刷新.
你已经可以看到在第二撷取画面锯齿斜率从最初的跳跃之后已经大幅提升Animation Frame Fired至Animation Frame Fired x 3.
不久之后,它跳到了x 21:
似乎我的代码正在运行一大堆额外的时间,但所有额外的多次运行只是浪费热量,丢弃计算.
当我拿第三个屏幕时,我的Macbook发热非常糟糕.不久之后,在我能够将时间线擦洗到结束位(大约8分钟)以查看x数字增加到什么之前,检查员窗口变得完全没有响应,并且我被提示我的页面变得没有响应并且必须是终止.
这是页面中运行的全部代码:
// ============================================================================
// Copyright (c) 2013 Steven Lu
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without …推荐指数
解决办法
查看次数
标签 统计
javascript ×9
animation ×3
canvas ×3
jquery ×2
performance ×2
dom ×1
frame-rate ×1
html ×1
html5 ×1
memory-leaks ×1
optimization ×1
scroll ×1
three.js ×1