标签: requestanimationframe

我只是想了解为什么地狱window.requestAnimationFrame接受第二个参数作为一个元素,背后的原因是什么？

我很想知道这个函数的底层执行....

我试图弄清楚d3的默认动画requestAnimationFrame是否已用于回调,或者我是否需要自己动手.例如,我已经定义了一个自定义补间,它重复调用重绘函数,以动画在图形上从一个域转换到另一个域(这在coffeescript中):

rd = @redraw # a function that takes an argument to redraw the graph
@svg.transition()
  .duration(1000)
  .tween "zoom", -> 
      interp = d3.interpolate(current_dom, target_dom)
      (t) -> rd interp(t)

在我所有其他重绘的调用中,我安排它requestAnimationFrame:

scheduleRedraw: =>
  # Stop a previous request if it hasn't executed yet
  cancelAnimationFrame(@animRequest) if @animRequest       
  @animRequest = requestAnimationFrame => @redraw

但是,我想知道我是否需要在这里做同样的事情.我一直在看d3源代码,看到唯一的引用requestAnimationFrame是在d3定时器类中.希望对d3有更多了解的人可以帮助回答以下问题:

• d3计时器是否全局用于所有d3动画和过渡？
• 我需要在requestAnimationFrame这里手动使用吗？如果没有,是否有任何我需要在使用d3时自己使用它的情况？

我开始循环

function gameLoop(){
   update();
   draw();
   requestAnimFrame(gameLoop);
}

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

1. 我无法调整帧速率.它总是非常快.为什么我不能每秒将其更改为1帧.我想这只是为了测试目的.
2. 我每次都要清理画布吗？它似乎很好,没有清除它.

谢谢.

以下是完整代码的小提琴链接: 完整代码

谢谢

我有一个对象,我想在画布上绘图.它将requestAnimationFrame用于启动游戏循环:

Contoso.ts

class Contoso
{
   //private ctx: CanvasRenderingContext2D;

   Initialize(ctx: CanvasRenderingContext2D) {
      //this.ctx = ctx;
      Render();
   }

   Render() {
      //...snip doing any actual drawing for the purpose of this question
      requestAnimationFrame(this.Render);
   }
}

app.ts

var contoso: Contoso;

contoso = new Contoso();
contoso.Initialize(canvas);

有人第一次打电话Initialize,requestAnimationFrame设法正确打电话Render.

第二次requestAnimationFrame打电话Render,this.Render是undefined和它崩溃.

这几乎就像是在初次调用之后对象被破坏了Initialize.

到底是怎么回事？

我正在使用Javascript和jQuery构建一个视差滚动脚本来操作figure元素中的图像transform:translate3d,并根据我所做的阅读(Paul Irish的博客等),我被告知这个任务的最佳解决方案是requestAnimationFrame出于性能原因使用.

虽然我理解如何编写Javascript,但我总是发现自己不确定如何编写好的 Javascript.特别是,虽然下面的代码看起来运行正常且顺畅,但我想解决一些我在Chrome开发工具中看到的问题.

$(document).ready(function() {
    function parallaxWrapper() {
        // Get the viewport dimensions
        var viewportDims = determineViewport();         
        var parallaxImages = [];
        var lastKnownScrollTop;

        // Foreach figure containing a parallax 
        $('figure.parallax').each(function() {
            // Save information about each parallax image
            var parallaxImage = {};
            parallaxImage.container = $(this);
            parallaxImage.containerHeight = $(this).height();
            // The image contained within the figure element
            parallaxImage.image = $(this).children('img.lazy');
            parallaxImage.offsetY = parallaxImage.container.offset().top;

            parallaxImages.push(parallaxImage);
        });

        $(window).on('scroll', function() {
            lastKnownScrollTop = $(window).scrollTop();
        });

        function …

我正在寻找一个最好使用的ffmpeg命令,如果我在"requestAnimationFrame"上控制视频鼠标控制.基本上,它需要以高关键帧间隔进行快速搜索和编码.我似乎无法确定哪些参数有助于快速寻找和高关键帧.

谢谢!约翰尼

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision告诉我最近(Chrome 20)requestAnimationFrame获得了一个新的亚毫秒精度计时器,而且我有更新我的代码以支持它.

环顾周围的各种polyfills,他们似乎都在这个更新之前.它们是否具有某种功能(我不这么认为),或者根本没有最新的可用功能？我应该自己做这个时间(看起来有点浪费).

我想在我的应用程序中试验一些React组件的性能.我知道ClojureScript的Om框架(https://github.com/swannodette/om)使用了一些优化技术,比如使用immutables来实现shouldComponentUpdate()和渲染requestAnimationFrame更改.

有没有可以引入基于渲染的简单JavaScript mixin requestAnimationFrame？

试图理解RequestAnimationFrame及其内部工作原理.

浏览器有一个主线程,它是一个事件循环.事件循环可以填充各种异步事件,例如用户交互,定时器被触发,网络调用完成以及事件触发布局和绘制,例如输入或JS.

因此,当JS函数使DOM的布局无效或导致重新绘制时,浏览器的主线程重新绘制需要更新的图层,合成器线程将更新的纹理上传到GPU,最终合成发生,并将生成的图像显示在屏幕上.

所以,我的印象是浏览器只在实际需要时执行绘制.如果您在静态页面上的Chrome开发工具时间轴上捕获事件而没有任何事情发生,则绝对不会捕获任何事件(没有布局,没有绘制,也没有触发动画帧).说得通.

但是,然后在控制台上运行以下代码,

function onBeforeNextRepaint() {
    requestAnimationFrame(onBeforeNextRepaint);

    console.log('About to paint ...');
}

onBeforeNextRepaint();

现在,您再次捕获时间轴事件,并注意到"动画帧触发"事件,并且您的控制台将使用"关于绘制..."进行记录.

根据MDN,

Window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画.

这意味着浏览器不断绘画,因此调用我的函数在每次重绘之前记录消息.我猜测浏览器维护一个调度程序,使绘制调用的速率与屏幕的刷新率相匹配.

现在我的困惑在于以下几点:

1. 浏览器的主线程是否经常重新绘制,生成纹理并将纹理上传到GPU并进行绘制调用(限制以匹配屏幕的刷新率)？(听起来效率低下)
2. 这就是我的'onBeforeNextRepaint'回调被不断调用的原因吗？
3. 如果1和2为真,在我的第一个时间线捕获时,为什么我不捕获"更新图层树"和"复合图层"事件？

我使用 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