Javascript 我应该使用requestAnimationFrame淡入几个元素吗？要实现60帧动画？

试图保持60 fps的动画。目前，我得到了很多以每秒30帧的速度出现的慢帧峰值，我的眼睛可以注意到这种起伏

重要编辑：扔掉旧的过时代码，添加新代码并进行解释

    fadeIn: function(ele){
        raf = window.requestAnimationFrame(function() {
            console.log(ele);
            var opacity = 0;
            function increase () {
                opacity += 0.05;
                if (opacity >= 1){
                    // complete
                    ele.style.opacity = 1;
                    return true;
                }
                ele.style.opacity = opacity;
                requestAnimationFrame(increase);
            }
            increase();
        });
    },

    fadeInElements: function(elements, properties, speed, delay){
        var raf;
        var ele;

        for (i = 0; i < properties.length; i++){
            ele = elements[properties[i]];
            console.log('outside loop ' + ele);
            instance.fadeIn(ele);
        }
    },

fadeIn：功能（ele）{
raf=window.requestAnimationFrame（函数（）{
控制台日志（ele）；
var不透明度=0；
功能增加（）{
不透明度+=0.05；
如果（不透明度>=1）{
//完整的
ele.style.opacity=1；
返回true；
}
ele.style.opacity=不透明度；
请求动画帧（增加）；
}
增加（）；
});
},
时尚元素：功能（元素、属性、速度、延迟）{
var-raf；
var-ele；
对于（i=0；i

我的新代码在上面。这是成功的：

• 迭代几个元素（每个元素都是

  ele

  ），然后调用

  fadeIn（ele）

• 所以，所有的元素都会消失
• 但是，我希望在新元素上每次“淡入”（每次触发

  fadeIn（）

  ）之间有

  50ms

  延迟

---

好消息是，它实际上不是递归，更像是超时。您提供了一个绘制帧的函数，浏览器会为您调用它

下面是一个答案，它显示了a的摘录。它不尝试复制您的确切代码，而是尝试解释您需要知道的内容，以便您可以相应地修改代码。代码的编写是为了易于理解，因此我相信还有其他方法可以更快地完成

这个答案从上到下都是有效的，这意味着我描述了JSFIDLE源代码的结尾，并以我自己的方式进行了反向工作。我个人认为这比从细节开始更容易理解

您需要在某个地方启动动画，因此JSFIDLE中最后一件事是

window.requestAnimationFrame(eachFrame);    //start the animation

这将在下一帧时间（例如每秒60次的下一个倍数）调用名为

eachFrame（）

的函数。不过，它只会执行一次

您需要

eachFrame（）

来跟踪我们在动画中的位置

var startTime = -1.0;  // -1 = a flag for the first frame.
function eachFrame()
{
  // Render this frame ------------------------
  if(startTime<0) {
    // very first frame (because of the -1.0): save the start time.
    startTime = (new Date()).getTime();
    render(0.0);
      // the parameter to render() is the time within the
      // animation.
  } else {
    // every frame after the first: subtract the saved startTime
    // to determine the current time.
    render( (new Date()).getTime() - startTime );
  }

  // Now we're done rendering one frame. ------
  //Start the timer to call this function again
  //when it's time for the next frame.
  window.requestAnimationFrame(eachFrame);  

}; //eachFrame

在

render（）中

，您可以根据当前时间计算不透明度。您不必担心帧间延迟，因为

requestAnimationFrame

为我们处理这一问题。您可以通过偏移时间来错开过渡。在本例中，

opacity1

取决于

currTime

而

opacity2

取决于

currTime

减去一个常数

FADE\u间距

，因此元素2的不透明度更改将比元素1的不透明度更改延迟

FADE\u间距

ms

---

已经填充了所有的细节。它为两个

元素的不透明度设置动画，每个元素的动画开始之间有一个间隔。我希望这会有帮助！

为什么你对此持怀疑态度？

rAF

是解决此类问题的方法，你应该从一开始就这样做。我不知道是什么原因事实上，你想通过这个动画来实现，所以我无法真正帮助你编写代码，但你肯定需要一种不同的方法。如果你更清楚一点，也许……这里有一个简单的动画，它使用

requestAnimationFrame

——并且也播放音频！：）这里还有一个。（不是我说的——我觉得这是一个很好的例子，所以我只是简单介绍一下。）你能创建一个stacksnippets来演示一下吗？@MaxArt好吧，我相信你肯定是对的，我只是在学习如何做rAF时非常笨拙，如果说得通的话，“延迟一下”。为了尽可能简化我的目标，我想要一个传递HTML元素数组的函数。然后，通过将每个元素的不透明度设置为1，然后等待一些

delay

ms，然后将下一个元素的不透明度设置为1，该函数在每个元素中一个接一个地淡出。动画自动发生，因为元素已设置了

过渡：.33s不透明度减缓

。这更清楚了吗？在GameDev.SE上也可能对您有所帮助。我无法告诉您我有多感激您如此详尽的回答，非常感谢。我希望所有的教程（或代码）都写得像这样清晰！我想在我对你的代码进行了适当的修改之后，我最终会理解如何自己编写RAF函数（只是看了一下，但当然我必须重新编写才能正确地学习！）再次感谢你，否则我很可能无法自己解决这个问题。很高兴能够提供帮助！：）我将在我的博客上放一个扩展版，欢迎在这里或那里进一步提问：）。链接在我的个人资料。无论如何，这是一个非常有用的答案。当你的博客帖子打开时，请在你的答案中自由链接。据我所知，自我推销是可以的，只要它被明确地认定为是这样的，并且与一个高价值的答案相联系，这就是。

function render(currTime)
{ // *** Put your rendering code here ***
  // How opaque should head1 be?  Its fade started at currTime=0.
  var opacity1 = clamp(currTime/FADE_DURATION);
    // over FADE_DURATION ms, opacity goes from 0 to 1

  // How opaque should head2 be?
  var opacity2 = clamp( (currTime-FADE_SPACING)/FADE_DURATION );
    // fades in, but doesn't start doing it until
    // FADE_SPACING ms have passed.

  // Apply the changes
  head1.style.opacity = opacity1;
  head2.style.opacity = opacity2;
} //render