标签: requestanimationframe

我正在使用chrome中的requestAnimationFrame在raphael中运行一个简单的视图框动画.我注意到所有脚本和渲染任务都已完成但我仍然看到30到60毫秒之间的"死空间",看起来浏览器在那里无所事事.对此有何见解？

请求动画帧开始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);

谢谢你的回答.

我注意到,每当我停靠浏览器窗口或切换标签时,requestAnimationFrame都会停止被调用(我预计会发生这种情况).

有没有办法检测何时发生这种停止？

原因是,我在游戏中运行了计时器.我想在requestAnimationFrame不再渲染时停止计时器.

我查看了'window.blur'和'window.focus'事件,但这些与requestAnimationFrame何时停止和启动无关(例如,当您在浏览器窗口外单击时,会触发window.blur事件但requestAnimationFrame保持不变运行).

我想在requestAnimationFrame启动和停止时订阅.你知道吗？

我有一个看起来像这样的对象链:

Game.world.update()

我想使用requestAnimationFrame来确定此函数的帧速率.

但是,当我像这样实现它:

World.prototype.update = function()
{
    requestAnimationFrame(this.update);
}

范围从世界对象更改为窗口对象.在调用requestAnimationFrame()时如何维护我想要的范围？我知道它与匿名函数等有关,但我无法理解它.

我一直在编写一个javascript演示/测试来学习WebGL.我有一个相当有效的游戏循环结构(根据Chrome Dev Tools)只需1-2毫秒就可以运行.我正在使用requestAnimationFrame来安排循环的运行(因为这显然是执行60fps动画的"正确"方式).当我查看构造框架的时间轴时,实际的javascript代码是最小的,但框架的"空闲"部分可以将框架推到30 fps线以上.FPS计数器显示20-40fps,有很多滴(几乎像锯齿).

如果我的渲染循环已经是1-2毫秒,当它必须适合16毫秒运行60fps时,还有什么我可以解释的吗？

如果我将循环转换为setTimeout循环,它可以轻松容纳60fps.我甚至可以在Retina Resolution中渲染它而不会影响60fps.

例如

    // Timeout version
    function gameLoop()
{
setTimeout(gameLoop, 1000/60);
//Process movement, AI, game logic
 renderLoop();
}
function renderLoop()
{
//Drawing all of the 3d stuff
}

VS

function gameLoop()
{
requestAnimationFrame(gameLoop);
//Process movement, AI, game logic
renderLoop()
}
Function renderLoop()
{
//draw objects
}

我还在某个时候让gameLoop在setTimeout上"单独"运行,而renderLoop被requestAnimationFrame调用.因为它们都在同一个线程上,所以这看起来有点躲闪,因为它们可以踩到彼此的脚趾.

我想setInterval用于程序中的实际步骤和requestAnimationFrame渲染.我认为这将是完美的混合:渲染速度不会减慢实际进度,因此帧速率的下降只会影响帧速率并仍然同步.然而,我得到的也是setInterval功能的下降.

我的意思的一个例子,故意陷入阴影:http://jsfiddle.net/Ltdz168m/

减少或增加补充次数,你会看到差异

似乎requestAnimationFrame实际上不是渲染延迟减慢JavaScript的解决方案.那么我如何更新事物的逻辑方面,可以在60 fps下完成,而不会妨碍渲染？WebWorkers绝对必要吗？

我目前正在试验three.js，它依赖于requestAnimationFrame执行动画。

在renderer.render调用立方体旋转和函数之前，以下代码不会导致无限递归吗？

function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera); 
}
render();

代码有效，但我正在努力提高我对 JavaScript 的整体理解。

在我看来，render 是作为回调函数调用的。但这是否意味着 JavaScript在停止继续下一次调用之前会继续运行函数中的代码？

我正在寻找一种在 React 中为计数器设置动画的方法。

为了这个例子，我有以下结构的 3 个组件：

• 掌握：
• • 逻辑组件
• • 柜台

（Master 是 logicComponent 和 Counter 的父级）

逻辑组件将一个数字传递给主组件，然后主组件将其传递给应该执行动画的计数器组件。logicComponent 以增量方式发送数字，也就是说，每次在那里发生某些事情时，它都会发送一个更新。

例如， logicCounter 调用 Master 十次来增加计数器，我预计计数器将被呈现 10 次，显示 10 个数字。到目前为止我尝试过的所有事情都导致显示最终数字（10）而没有任何增量。

在寻找解决方案后，我遇到了Window.requestAnimationFrame()并且我正在寻找一种在 React 中实现它的正确方法。

我试图避免使用 3rd 方 npms/libraries。

会喜欢你的帮助/想法。谢谢。

使用Reflex-DOM,Event t ()当浏览器准备好绘制下一帧时,即当requestAnimationFrame发生火灾时,我想激发它.我试过这样的:

{-# LANGUAGE RecursiveDo, TypeFamilies #-}

import Reflex.Dom
import Reflex.Host.Class

import GHCJS.DOM (currentWindow)
import GHCJS.DOM.Window as Window
import GHCJS.DOM.Types (RequestAnimationFrameCallback(..))
import GHCJS.Foreign.Callback

import Control.Monad
import Control.Monad.IO.Class

refresh win = do
    (event, ref) <- newEventWithTriggerRef
    postGui <- askPostGui
    rec cb <- liftIO $ asyncCallback1 $ \_timestamp -> do
            scheduleNext
            putStrLn "about to fire the event"
            postGui $ void $ fireEventRef ref ()
            putStrLn "event fired"
        let scheduleNext = Window.requestAnimationFrame win $ Just $ RequestAnimationFrameCallback cb …

我刚刚在新的 Apple iPad Pro（120Hz）的 Safari 上运行 MrDoob 的 FPS 计数器，但它只能以 60fps 的速度运行，而桌面显示器（刷新率为 144Hz）中的 Chrome 浏览器运行速度高达 144fps。

该脚本使用 requestAnimationFrame 来计算它们，因此从技术上讲它不是资源密集型消耗。

我在 WHATWG 规范中找不到它，但似乎应该可以。参考：

1. IE https://connect.microsoft.com/IE/feedback/details/794072/internet-explorer-animations-fails-on-120hz-computer-monitors-works-at-60hz-75hz-100hz
2. http://www.testufo.com/browser.html
3. 相关：https : //github.com/w3c/html/issues/785