标签: requestanimationframe

如果我有一个使用requestAnimationFrame的循环,如下所示:

function render() {
    // Rendering code

    requestAnimationFrame(render);
}

如果我把requestAnimationFrame函数放在函数的开头,会有什么区别,如下所示:

function render() {
    requestAnimationFrame(render);

    // Rendering code
}

我没有注意到任何差异,但我已经看到两种实现,其中一种更好,或者它们是否相同？

编辑:我想到的一件事是,如果我把它放在开头,并且渲染代码需要很长时间才能运行,比如说10毫秒,最终不会把它放到帧速率下降10毫秒？

我的目标是创建一个动画循环,requestAnimationFrame以便我可以这样做:

animationObservable.subscribe(() =>
{
    // drawing code here
});

我尝试将此代码作为基本测试:

let x = 0;

Rx.Observable
    .of(0)
    .repeat(Rx.Scheduler.animationFrame)
    .takeUntil(Rx.Observable.timer(1000))
    .subscribe(() => console.log(x++));

这是一个JSFiddle,但我不负责任何浏览器崩溃运行它.

我希望这会将数字从0记录到大约60(因为这是我的显示器的刷新率)超过1秒.相反,它会快速记录数字(比它快得多requestAnimationFrame),开始导致页面滞后,最后在10000和几秒钟后溢出堆栈.

为什么animationFrame调度程序以这种方式运行,使用RxJS运行动画循环的正确方法是什么？

我正在构建一个使用requestAnimationFrame进行视差滚动的网站.有多个部分,每个部分都有一个全尺寸的背景图像以及一些中间和前景图像.我通过requestAnimationFrame设法让这个动画变得相对流畅,但动画中仍然偶尔出现抖动.

通过在帧模式下观看Chrome的时间线,我可以看到导致"jank"的进程被标记为"Image Decode".此外,一旦动画完成一次,jank就不会重现.

似乎大多数浏览器现在都推迟了尚未查看的图像的解码.有没有一种方法可以预先解码(而不仅仅是预加载)图像,而不会让用户看到它们？

我需要观察 DOM 元素的位置，因为我需要显示一个相对于它的弹出面板（但不在同一个容器中），并且面板应该跟随元素。我应该如何实现这样的逻辑？

这是一个片段，您可以在其中看到外部和嵌套弹出面板的打开，但它们不遵循水平滚动。我希望他们都遵循它并继续显示在相应的图标附近（它应该是一种适用于任何地方的通用方法）。您可能会忽略嵌套弹出窗口未与外部关闭在一起 - 这只是为了使代码片段更简单。我希望除了showPopup功能之外没有任何变化。本例中特别简化了标记；不要试图改变它——我需要它。

~function handlePopups() {
  function showPopup(src, popup, popupContainer) {
    var bounds = popupContainer.getBoundingClientRect()
    var bb = src.getBoundingClientRect()

    popup.style.left = bb.right - bounds.left - 1 + 'px'
    popup.style.top = bb.bottom - bounds.top - 1 + 'px'

    return () => {
      // fucntion to cleanup handlers when closed
    }
  }

  var opened = new Map()

  document.addEventListener('click', e => {
    if (e.target.tagName === 'I') {
      var wasActive = e.target.classList.contains('active')
      var popup = document.querySelector(`.popup[data-popup="${e.target.dataset.popup}"]`)

      var old = …

在递归调用时requestAnimationFrame,我面临着高CPU使用率(30%到40%),是否有人有降低它的好策略？

简单的例子:

var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 20;

var canvasContext = canvas.getContext('2d');
document.body.appendChild(canvas)

var rafId;
function drawLoop(time) {
  canvasContext.clearRect(0, 0, 100, 20);
  canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20);
  rafID = window.requestAnimationFrame(drawLoop);
}

drawLoop();

我正在研究Three.js的一些个人项目.我正在使用requestAnimationFrame功能.我想每2秒调用一次函数.我搜索但我找不到任何有用的东西.

我的代码是这样的:

function render() {
   // each 2 seconds call the createNewObject() function
   if(eachTwoSecond) {
      createNewObject();
   }
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}

任何的想法？

浏览器读取并运行JavaScript文件,文件中写入的同步任务立即变为执行中任务,setTimeout回调变为macrotasks,并且promise回调变为微任务.一切都是好的.

在我见面之前,我以为我掌握了JavaScript事件循环requestAnimationFrame.

@TJ Crowder为我提供了以下代码片段.

const messages = [];
setTimeout(() => {
  // Schedule a microtask
  Promise.resolve().then(() => {
    log("microtask");
  });
  
  // Schedule animation frame callback
  requestAnimationFrame(() => {
    log("requestAnimationFrame");
  });
  
  // Schedule a macrotask
  setTimeout(() => {
    log("macrotask");
  }, 0);
  
  // Schedule a callback to dump the messages
  setTimeout(() => {
    messages.forEach(msg => {
      console.log(msg);
    });
  }, 200);

  // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
  const …

我正试图在我的Ionic 2应用程序中使用ThreeJS实现一个非常基本的动画.基本上是试图旋转立方体.但是多维数据集不会旋转,因为requestAnimationFrame只在render循环中执行一次.

我只能看到这一点.

没有旋转动画.我在下面分享我的代码.

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #webgloutput></div>
</ion-content>

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as THREE from 'three';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('webgloutput') webgloutput: ElementRef;


  private renderer: any;
  private scene: any;
  private camera: any;
  private cube: any;

  constructor(public navCtrl: NavController) {
  }

  ngOnInit() {
    this.initThree();
  }

  initThree() {
    this.scene = new THREE.Scene();
    this.camera = …

我试图弄清楚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时自己使用它的情况？

我正在玩这个requestAnimationFrame但是我在除了Chrome之外的任何其他浏览器中都有非常生涩的动画.

我创建一个像这样的对象:

var object = function() {

    var lastrender = (new Date()).getTime();
    var delta = 0;

    return {

        update: function() {
             //do updates using delta value in calculations.
        },

        loop: function() {
            var looptimestamp = (new Date()).getTime();
            delta = looptimestamp - lastrender;
            lastrender = looptimestamp;

            this.update();

            window.requestAnimationFrame(this.loop.bind(this));
        }
    };
}

现在我只是在画布元素上绘制一个矩形并移动它.它是处理器上非常轻量级的操作.这在Chrome中运行得相当顺利,当我控制日志记录delta值时,它几乎在~17左右.但是,如果我在Firefox或Safari中执行相同操作,则会获得以下delta值:

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on

看起来好像浏览器没有很好地与显示器同步,并且在除Chrome之外的所有其他情况下,使用旧的setTimeout方法以16ms作为目标超时,可以获得更平滑的动画.

有谁知道,如果可以requestAnimationFrame在Chrome以外的浏览器中使用更流畅的动画？有没有人成功获得比上面在Firefox中发布的更稳定的delta值？