标签: requestanimationframe

我使用 Paul Irish https://gist.github.com/paulirish/1579671的脚本 在 html 站点内创建动画循环。

它可以工作，尽管它在全屏模式下比在浏览器窗口中更快。另外，我观察到不同的速度取决于画布大小和我使用的浏览器。

问：使用脚本如何保证稳定的帧率？

代码可在此处获取（《Beginning WebGL》，第 1 章，作者：Brian Danchilla）： https://github.com/bdanchilla/beginningwebgl/blob/master/01/2D_movement.html

我想知道我是否应该将游戏切换到requestAnimationFrame.如果还有理由再这样做了,正如我读到的那样,当你在主流浏览器中切换标签时,setTimeout()现在也会暂停.

无论如何,说我想控制动画的FPS.

目前我可以这样做:

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000 / k.settings.engine.fps );

k.settings.engine.fps想要的fps 在哪里？

如果我这样做requestAnimationFrame,我就失去了这种可能性,它只会给我任何可以给予的东西:

window.requestAnimFrame(k.operations.startLoop);
renderLoop();

我看到有人建议将requestAnimFrame放在另一个循环中:

setInterval( function () {
    requestAnimationFrame( draw );
}, 1000 / 60 );

那么......我该怎么办？保持原状？

requestAnimationFrame有什么好处,现在切换标签时setTimeout也暂停了？

我正在尝试建立一个视差网站,在滚动网站时移动少量元素.但是在阅读Paul Irish的这篇文章之后,并没有使用我正在使用的滚动事件监听器,而且这个视频说滚动监听器有点儿麻烦.我的问题是:requestAnimationFrame

1. 它在Chrome中看起来非常流畅,但它在Firefox中闪烁不定.我在这里做错了吗？
2. 我的代码实际上是否占用了比使用普通滚动事件监听器更多的资源？每次我玩这个代码时,我都能听到我的笔记本电脑风扇炽热.

我的文件位于http://www.socialbuzz.com.au/index.html,请滚动到页面底部以查看从javascript操作的元素.

我想更改视口内元素的背景颜色(使用overflow: scroll)

所以这是我的第一次尝试:http: //jsfiddle.net/2YeZG/

如您所见,在绘制新颜色之前,前一种颜色会短暂闪烁.其他人也有类似的问题.

按照HTML5摇滚说明,我试着介绍requestAnimationFrame解决这个问题无济于事:

http://jsfiddle.net/RETbF/

我在这做错了什么？

这是一个更简单的例子,显示了同样的问题:http://jsfiddle.net/HJ9ng/

这里提交的Chromium错误:http://code.google.com/p/chromium/issues/detail？id = 151880

我在运行动画时遇到了麻烦.这是在里面var ob1 = function() {};.当被调用时,它会运行一段时间,然后我得到错误Uncaught RangeError: Maximum call stack size exceeded.但是,这种相同的结构在对象之外运行没有问题.

/////////////// Render the scene ///////////////
this.render = function (){

        renderer.render(scene,camera);
        if(isControls == true) controls.update(clock.getDelta());
        this.animate();
        //console.log(true);
        requestAnimationFrame(this.render());
}

/////////////// Update objects ///////////////
this.animate = function (){
        console.log("!");
}

不知道我在这里做错了什么......

window.requestAnimFrame = function(){
return (
    window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function(/* function */ callback){
        window.setTimeout(callback, 1000 / 60);
    }
);
}();

function animationSequence(elem, ind) {
    this.ind = ind;
    this.elem = elem;
    this.distance = 450;
    this.duration = 900;
    this.increment = 0;
    this.start = Math.abs(this.ind)*450;
    var requestId = requestAnimFrame(this.animate);
    this.move();

    this.move = function() {
        this.elem.style.left = this.start - this.increment + "px";
    }
    this.animate = function() {
        var self = this;
        this.move();
        this.increment += 5;
        if (this.increment …

我正在学习用JavaScript编写代码.我用一些定时鼠标动画编程.我只是要添加一些绘制鼠标路径的代码.

这将是一个需要mousemove事件的东西,每次鼠标移动时都会在Canvas上绘制一个新的线路径.随着时间的推移,这条路径将变得更加透明,直到它消失为止.当然,新的路径总是不透明的,所以有一个连续的运动.

我想出了一种方法,我可以用requestanimationframe来做到这一点.基本上每次发生新的mousemove事件时,我都会将鼠标路径坐标添加到名为mousePathArray的对象数组中.该对象将携带路径坐标和"animationStage"计数器.此计数器将基本确定路径在"动画"的该阶段的透明度.(后期阶段意味着更透明.)

然后每个动画帧我将调用一个函数,它将遍历数组中的所有对象并根据它们的坐标和animationStage计数器绘制线条,将计数器增加1并在animationStage计数器到达结束时删除数组对象数字(可能是50或其他).

这一切都可以完成,但听起来不是全部,只需引入一个setInterval函数就可以轻松完成,每次鼠标移动时都会调用setInterval.

那么值得做多远呢？是不是更快或者只是更好的JS练习不一起使用setInterval和rAF？

写完所有这些之后,我实际上编写了上面讨论过的仅限rAF的代码.粘贴这里太长了,但规则需要它.这里是jsfiddle:http://jsfiddle.net/06f7zefn/2/

(我知道有很多低效率和可能很糟糕的编码练习,但是对我来说,我已经5天了!我可以制作一个isDrawing？boolean,而不是在每一帧上调用animate(),我可以只需执行ctx.moveTo()一次,其余为LineTo(),而不必每次迭代都移动到(),因为一个点来自另一个点离开的位置)

如果我能够理解我正在谈论的主要想法,那就是我要求你的意见.而不是让与时间相关的所有内容都来自rAF调用,而不是在这里使用setInterval或setTimeout更好吗？

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var currentPosX, currentPosY, prevPosX, prevPosY;
var mousePathArray = [];

canvas.addEventListener ('mousemove', mouseOp);


function mouseOp (mouseEvent) {
    prevPosX = currentPosX;
    prevPosY = currentPosY;
    currentPosX = mouseEvent.clientX;
    currentPosY = mouseEvent.clientY;
    mousePathArray.push( {
        x1: currentPosX,
        x2: prevPosX,
        y1: currentPosY,
        y2: prevPosY,
        animStage: 0
    });
}

function animate () {
    var anims = mousePathArray.length;
    if (anims!=0) { …

我有一个带有requestAnimationFrame循环的干净HTML文件,完全没有处理.但是,如果我查看Chrome DevTools上的内存消耗,我会看到使用的内存不断增加,垃圾收集器每隔几秒运行一次,以收集大约1兆字节的垃圾数据.

那么这个内存泄漏来自哪里？

这就是我的内存使用情况:

这是我的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <script>

        function update() {

            window.requestAnimationFrame(update);

        }

        update();

    </script>
</head>
<body>

</body>
</html>

据我了解，requestAnimationFrame的运行速度应尽可能接近浏览器的帧速率（约60fps）。为了确保确实发生这种情况，我一直在记录每个requestAnimationFrame调用的时间戳，如下所示：

function animate(now){
    console.log(now);
    window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);

Console.log数据显示调用始终在大约0.016674毫秒之间进行，因此表明帧速率为？。60fps（精确到59.9736116108912fps）。

Console.logs（样本数据）：

Timestamp   FPS               (Current - previous) timestamp
------------------------------------------------------------
100.226     59.97361161       0.016674
116.9       59.97361161       0.016674
133.574     59.97361161       0.016674
   .             .               .
   .             .               .
150.248     59.97361161       0.016674
166.922     59.97361161       0.016674
183.596     59.97361161       0.016674
200.27      59.97361161       0.016674

到目前为止，requestAnimationFrame调用是在一致的时间间隔内进行的，并且调用不会滞后/执行得太快。

但是，修改animate（）函数的内容以执行相对更复杂的函数会导致requestAnimationFrame调用不一致。

Console.logs（样本数据）：

Timestamp       FPS               (Current - previous) timestamp
------------------------------------------------------------
7042.73         59.97361161       0.016674
7066.278        42.4664515        0.023548
7082.952        59.97361161       0.016674
7099.626        59.97361161       0.016674
   .                 .                .
   .                 .                .
17104.026       59.97361161       0.016674
17112.84        113.4558657       0.008814
17129.514 …

我正在阅读这篇文章，但不确定我是否理解最终的钩子是如何工作的。

这是代码：

const useAnimationFrame = (callback) => {
  const requestRef = useRef();
  const previousTimeRef = useRef();

  const animate = (time) => {
    if (previousTimeRef.current !== undefined) {
      const deltaTime = time - previousTimeRef.current;
      callback(deltaTime);
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);
}

并以这种方式使用例如：

const [count, setCount] = useState(0);

useAnimationFrame((deltaTime) => {
  setCount((prevCount) => {
    return prevCount + 1;
  });
});

好吧，目标是有一个每帧递增的数值。

我可以解释运行这段代码会发生什么：

1. 该组件创建一个本地状态useState(0)

2. 然后 …