标签: requestanimationframe

我有一个问题,我没有答案,需要额外的一双眼睛,以了解情况,所以这里:

在Chrome和FF中,我的小动画工作正常(当用户将鼠标悬停在它们所在的div上时,同时绘制了4个圆圈).

但是......就Safari和Opera而言,他们只是不想展示我的动画.我一直在使用错误控制台,我得到的消息是:

类型错误:'undefined不是函数(评估'requestAnimationFrame(function {

动画(curPerc/100)

}))

我不确定这里发生了什么,但我认为'animate'函数是循环的,只是在'hover'函数上工作,当它完成第一个循环时,函数正在寻找另一个输入,不是收到一个,然后导致'未定义'错误？我可以在这方面做出决定!另外..这并不能解释为什么它可以在Chrome和FF中运行,而不是Safari或Opera

以下是其中一个圆圈动画的代码,可以为您提供一个想法:

HTML:

<canvas id="myCanvasVD" width="200" height="200"></canvas>

使用Javascript:

(function() {
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 window.requestAnimationFrame = requestAnimationFrame;
})();

$(document).ready(function() {
$("#aboutPageDiv").hover(function() {
            var myCanvas = document.getElementById('myCanvasVD');
            var ctx = myCanvas.getContext("2d");
            var x = myCanvas.width / 2;
            var y = myCanvas.height / 2;
            var radius = 75;
            var endPercentVD = 87;
            var curPerc = 0;
            var counterClockwise = false;
            var circ = Math.PI * 2;
            var quart = …

FastDOM - 一个小型库,可以将DOM读取和写入raf(requestAnimationFrames).

https://github.com/wilsonpage/fastdom

我已经阅读了代码,但是,我正在努力了解它是如何工作的.以下是我们的一些假设: - 浏览器通常设置为60fps - 所以总共可以在一秒内最多60raf

也就是说每个FastDOM读/写批处理将在17ms(1000 ms/60 fps)之后运行.这会不是很慢,因为一个函数可能会一个接一个地读/写调用？

显然,上述情况并非如此,但我很困惑,并希望澄清.

谢谢,

我正在尝试将视频添加到Fabric.js中，我已经完成了。

但有一个问题：

如何停止或取消requestAnimFrame()？

例子 ：

var canvas = new fabric.Canvas('c');
var videoEl = document.getElementById('video');
var video = new fabric.Image(videoEl);

canvas.add(video);
video.getElement().play();

fabric.util.requestAnimFrame(function render() {
  canvas.renderAll();
  fabric.util.requestAnimFrame(render);

  var current_time = videoEl.currentTime;
  if(current_time >= 5) {
    videoEl.pause();
    console.log(current_time);
  }

});

https://jsfiddle.net/l2aelba/kro7h6rv/

这是视频将在 5 秒后停止。我会停止/取消requestAnimFrame

导致CPU负载过高

我正在编写一个脚本,根据光标位置左右变换调整图像.
还有一些CSS可以在悬停时缩放图像.

// JavaScript source code
var catchX = 0,
    catchY = 0,
    x = 0,
    y = 0,
    burn = 1 / 28;

function imageWatch() {
    x += (catchX - x) * burn;

    translate = 'translate(' + x + 'px, ' + y + 'px)';

    $('.image-area img').css({
        '-webit-transform': translate,
        '-moz-transform': translate,
        'transform': translate
    });

    window.requestAnimationFrame(imageWatch);
}

$(window).on('mousemove click', function (e) {

    var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
    catchX = (26 * mouseX) / 100;

}); …

我有一个类需要一些坐标和持续时间数据。我想用它来为svg. 更明确地说，我想使用该数据svg在时间范围内更改属性。

我在课外使用一个step函数requestAnimationFrame：

function step(timestamp) {
  if (!start) start = timestamp
  var progress =  timestamp - start;
  var currentX = parseInt(document.querySelector('#start').getAttribute('cx'));
  var moveX =  distancePerFrame(circleMove.totalFrames(), circleMove.xLine);

  document.querySelector('#start').setAttribute('cx', currentX + moveX);
  if (progress < circleMove.duration) {
    window.requestAnimationFrame(step);
  }
}

var circleMove = new SingleLineAnimation(3000, startXY, endXY)

var start = null

function runProgram() {
  window.requestAnimationFrame(step);
}

我可以把它的方法，取代了circleLine用this。这对于第一次运行很好，但是当它this.step第二次调用回调时，好吧，我们处于回调黑洞中，并且对 的引用this被破坏了。做旧的self = this也行不通，一旦我们进入回调this是未定义的（我不知道为什么）。这是一种方法：

step(timestamp) { …

我正在研究 Next.js 和 React-Native-Web。我设法按照官方 Next.js 示例将它们一起运行，但是当我尝试使用反应本机中的动画包时，它失败并出现错误，即 requestAnimationFrame未定义。基本上这个功能是使用node_modules包，但是我在webpack中设置了别名来将所有react-native需求转换为react-native-web，所以即使是node_modules包也应该使用react-native-web。

关于如何解决它有什么建议吗？

ReferenceError: requestAnimationFrame is not defined
    at start (...node_modules\react-native-web\
dist\cjs\vendor\react-native\Animated\animations\TimingAnimation.js:104:11)
enter code here

谢谢你的帮助！

cancelAnimationRequest我正在制作一个进度条（最终..），我想在达到某个值（10、100、...、N）时停止动画（调用）并将其重置为 0。

但是，使用我当前的代码，它会重置为 0，但会无限期地继续运行。我认为这部分代码可能有问题：

setCount((prevCount) => {
    console.log('requestRef.current', requestRef.current, prevCount);
    
    if (prevCount < 10) return prevCount + deltaTime * 0.001;
    
    // Trying to cancel the animation here and reset to 0:
    cancelAnimationFrame(requestRef.current);

    return 0;
});

这是整个示例：

setCount((prevCount) => {
    console.log('requestRef.current', requestRef.current, prevCount);
    
    if (prevCount < 10) return prevCount + deltaTime * 0.001;
    
    // Trying to cancel the animation here and reset to 0:
    cancelAnimationFrame(requestRef.current);

    return 0;
});

const Counter = () => {
  const [count, setCount] = React.useState(0);

  // …

请参阅这个小提琴 - http://jsfiddle.net/rnqLfz14/28/

[此代码不是我的 - http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing ]

//....

function stop() {
    running = false;
    started = false;
    cancelAnimationFrame(frameID);
}

//...

function mainLoop(timestamp) {
    // Throttle the frame rate.
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        frameID = requestAnimationFrame(mainLoop);
        return;
    }
    delta += timestamp - lastFrameTimeMs;
    lastFrameTimeMs = timestamp;

    begin(timestamp, delta);

    if (timestamp > lastFpsUpdate + 1000) {
        fps = 0.25 * framesThisSecond + 0.75 * fps;

        lastFpsUpdate = timestamp;
        framesThisSecond = 0;
    }
    framesThisSecond++;

    var numUpdateSteps = 0; …

我通常不太关心微优化,直到javascript UI性能(特别是在移动设备上)并保持神圣的16.666666667ms下的所有内容以获得平滑不间断的60fps.

我正在从requestAnimationFrame运行tick函数,直到满足条件,并且它依赖于在当前实例上设置的某些值,例如this.velocity,this.translateX等.

我的问题是,是否应该使用this在var _this = this;声明之外声明的缓存版本,而不是指"这个地方更快？" 要清楚我已经多次调用它了......下面是一些代码:

swipeIt.prototype.tick = function() {
    if (Math.abs(this.translateX) < (+this.elWidth*1.2 && this.velocity > 6) ) {


        this.velocity = this.velocity*1.15;
        this.translateX = (this.dir === 'left') ? this.translateX - this.velocity : this.translateX + this.velocity;

        requestAnimationFrame(function() {
          _this._update(_this.updateCb);
          _this.tick();
        });

    } else {
       //....
    }
}

关于进一步优化这一点的任何其他建议都会受到欢迎,这是我第一次真正给予这一点.干杯.

阅读本文关于更快的滚动效果后,我感到非常兴奋.我使用了Warry的方法,看看我是否能发现性能上的任何差异 - 与使用scroll事件监听器相比:

window.addEventListener('scroll', function() {
    console.log('Scrolling: ' + window.pageYOffset);
});

文章代码:

function loop() {
    if (lastPosition == window.pageYOffset) {
        requestAnimationFrame(loop);
        return false;
    } else lastPosition = window.pageYOffset;

    console.log('Scrolling: ' + window.pageYOffset);
    // make sticky calculations...

    requestAnimationFrame(loop);
}
loop(); // start loop

这两段代码输出相同的(Y)偏移量,并且在性能方面似乎相同.所以我的问题是:这篇文章是对的吗？

另外,requestAnimationFrame这张图片怎么样？我知道它告诉浏览器它希望执行重新绘制.或者...位置固定的方式去了吗？我对这个主题感兴趣,因为我正在开发一个关于粘性元素的插件.

任何信息或建议表示赞赏!