requestanimationframe

I am struggling to grok requestanimationframe . Is it correct to say that requestanimationframe is a browser API that enables logic that affects the painted user-interface to be run in a best-effort attempt to complete before the next blitting of the interface to the graphics subsystem, so as to avoid wasted effort painting frames that never make it to the screen due to phase differences between the physical screen refresh cycle and application rendering loop? The requestAnimationFrame is just a method which: The requestAnimationFrame method is used to signal to the user agent that a script

I have an app-object constructer that looks like this: var app = function(loadedsettings) { return { init: function() { this.loop(); }, loop: function() { this.update(); window.requestAnimationFrame(this.loop); }, update: function() { //loop through settings and call update on every object. }, settings: [ //array of settings objects, all with update methods. ] }; } Then when I do: var theApp = app(settings); theApp.init(); I get: Uncaught TypeError: Object [object global] has no method 'update' because when requestAnimationFrame is called, the this-value inside the loop function is set to

实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是 请求动画帧。 屏幕刷新频率： 屏幕每秒出现图像的次数。普通笔记本为60Hz 动画原理： 计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。 setTimeout： 通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。 requestAnimationFrame： 优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿 使用： var progress = 0; //回调函数 function render() { progress += 1; //修改图像的位置 if (progress < 100) { //在动画没有结束前

I'm trying to build a parallax site, which will move few elements while scrolling the site. But instead of using a scroll event listener I'm using requestAnimationFrame , after reading this post by Paul Irish , and this video which said that scroll listener is a bit buggy. My questions are: It looks quite smooth in Chrome, but it's flickering badly in Firefox. Did I do something wrong here? Does my code actually taking up more resources than using normal scroll event listener ? I can hear my laptop fan blazing every time I'm playing with this code. My file is located at http://www.socialbuzz

I'm using Javascript & jQuery to build a parallax scroll script that manipulates an image in a figure element using transform:translate3d , and based on the reading I've done (Paul Irish's blog, etc), I've been informed the best solution for this task is to use requestAnimationFrame for performance reasons. Although I understand how to write Javascript, I'm always finding myself uncertain of how to write good Javascript. In particular, while the code below seems to function correctly and smoothly, I'd like to get a few issues resolved that I'm seeing in Chrome Dev Tools. $(document).ready

I mean calling multiple requestAnimationFrame with the same function in one time function Draw() { /* DoSomething */ } function AFunc() { /* prepare something */ requestAnimationFrame(Draw); } function BFunc() { /* prepare something */ requestAnimationFrame(Draw); } window.onload(function(){ AFunc(); BFunc(); }); What will happen? Will it duplicated? Would it be called 2 times in the same frame? Or it would be stacked and called on difference frame? From the MDN documentation : The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when

If I have a loop using requestAnimationFrame like this: function render() { // Rendering code requestAnimationFrame(render); } Will there be any difference if I put the requestAnimationFrame in the beginning of the function, like this: function render() { requestAnimationFrame(render); // Rendering code } I haven't noticed any difference, but I have seen both implementations, is one of them better in any way, or are they the same? Edit: One thing I have thought about is, if I put it in the beginning, and the render code takes quite long time to run, say 10ms, wouldn't putting it in the end