标签: requestanimationframe

我想更改视口内元素的背景颜色(使用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

因此,我一直是一个优秀的网民,使用功能检测来查看浏览器是否支持requestAnimationFrame,setTimeout否则只回归基于解决方案(保罗爱尔兰着名帖子的内容).

var NOW = Date.now || function () { return new Date.getTime(); };
var reqAnimFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        /*                        ... ||                     */
        function (callback) {
            setTimeout(function () { callback(NOW()); }, 1000 / 60);
        };

var previousTime = NOW();
function animStep(time) {
    var timePassed = time - previousTime;
    myCharacter.move(myCharacter.speed * timePassed);
    previousTime = time;
    reqAnimationFrame(animStep);
} 

// start the animation
reqAnimationFrame(animStep); 

在Internet Explorer 10出现之前,这种方法无处不在.在IE10中,time传递的参数似乎与当前时间无关,搞砸了计算timePassed.

这是怎么回事？

我正在学习用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) { …

在有关前端工程师性能最佳实践的mozilla文档中，建议结合setTimeout使用requestAnimationFrame以在重新绘制后立即运行某些东西：

requestAnimationFrame(() => {
  setTimeout(() => {
    // This code will be run ASAP after Style and Layout information have
    // been calculated and the paint has occurred. Unless something else
    // has dirtied the DOM very early, querying for style and layout information
    // here should be cheap.
  }, 0);
});

为什么这是推荐的解决方案？究竟是什么使它成为在重画后立即安排某些事情的最佳方式？

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

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调用.因为它们都在同一个线程上,所以这看起来有点躲闪,因为它们可以踩到彼此的脚趾.

我正在寻找创建一个函数,使用requestAnimationFrame和delta time在HTML5画布上滚动图像元素x像素.我无法弄清楚的是当requestAnimationFrame allready用一个参数(一个DOMHighResTimeStamp)回调我的函数时,如何为我的函数添加更多参数.我很确定以下代码不起作用:

function scroll(timestamp, distanceToScroll, secondsToScroll) {
  //delta = how many milliseconds have passed between this and last draw
  if (!lastDraw) {var lastDraw = timestamp;};
  delta = (0.5 + (timestamp - lastDraw)) << 0; //bitwise hack for rounding integers
  lastDraw = timestamp;

  //speed (pixels per millisecond) = amount of pixels to move / length of animation (in milliseconds)
  speed = distanceToScroll / secondsToScroll;

  //new position = current position + (speed * delta)
  position += (speed * delta);

  context.drawImage(myImage,0,position,50,50/*of 200*/,0,0,100,100); …

我目前正在试验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在停止继续下一次调用之前会继续运行函数中的代码？

我刚刚在新的 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

在我的reactjs应用程序中，我使用了一个名为pidegon-maps的轻量级地图库来显示船只位置。在不尝试使用更大的库（传单、谷歌地图反应）的情况下，我尝试为船只所走的路线制作动画。

从这个问题中汲取灵感，我尝试创建一个类似的实现。

useEffect(() => {

let start = [0.108266, 52.202758];
let end = [0.11556, 52.201733];

const speedFactor = 500;

let diffX = parseFloat(end[0]) - parseFloat(start[0]);
let diffY = parseFloat(end[1]) - parseFloat(start[1]);
let sfX = diffX / speedFactor;
let sfY = diffY / speedFactor;

let i = 0;
let j = 0;

let lineCoordinates = [];

while (i < diffX || Math.abs(j) < Math.abs(diffY)) {
  lineCoordinates.push([start[0] + i, start[0] + j]);

  if (i < diffX) {
    i += …