javascript - 我应该使用 requestAnimationFrame 淡入多个元素吗？实现60fps的动画？

Question

尝试保持 60 fps 动画。目前，我收到很多以大约 30~ fps 的速度发生的慢帧峰值，而且我的眼睛很明显会出现断断续续的情况。

重大修改:丢弃旧的过时代码，添加带有解释的新代码

    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);
        }
    },

我的新代码在上面。成功了:

• 遍历多个元素(每个元素都是 ele)，然后调用 fadeIn(ele)
• 因此，所有元素都会淡入。
• 但是，我希望每次“淡入”之间有一个 50ms 延迟(每次在新元素上触发 fadeIn()

Answer 1

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

这是一个答案，显示了 complete JSFiddle 的摘录.它不会尝试复制您的确切代码，而是尝试解释您需要了解的内容，以便您可以相应地调整您的代码。编写的代码易于理解，所以我相信还有其他方法可以更快地完成它!

这个答案从顶层向下，这意味着我描述了 JSFiddle 源代码的结尾并向后工作。我个人认为这比从细节开始更容易理解。

1. 您需要在某处开始动画。所以 JSFiddle 中的最后一件事是

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

   这将调用一个名为 eachFrame() 的函数何时是下一帧的时间，例如。每秒 60 次的下一个倍数。不过，它只会执行一次。

2. 你需要 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
   

   eachFrame()确定相对于动画开始的当前时间。 getTime() 以毫秒为单位为您提供时间。

   另一件事eachFrame()就是调用window.requestAnimationFrame(eachFrame);再次。这不是递归。相反，eachFrame()将完成运行，然后在下一次出现帧时，浏览器将调用 eachFrame()再次。

3. 您需要的最后一个功能是实际绘制框架!即render(current time) .假设，例如 head1和 head2引用两个要设置动画的标题元素，例如 <h1>在您的 HTML 中声明的元素。 clamp(x)函数返回 x但低于 0，高于 1。

   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
   

   在render() ，你根据当前时间计算出不透明度。您不必担心帧之间的延迟，因为 requestAnimationFrame为我们处理。您可以通过偏移时间来错开转换。在这个例子中，opacity1取决于 currTime和 opacity2取决于 currTime减去常数 FADE_SPACING ，因此元素 2 的不透明度变化将比元素 1 的不透明度变化晚 FADE_SPACING 开始。女士

JSFiddle已填写所有详细信息。它为两个 <h1> 的不透明度设置动画。元素，每个元素的动画开始之间有一个间距。希望对您有所帮助!