javascript - requestAnimationFrame 没有触发提供给它的函数

Question

我使用setInterval实现了无限循环动画。我现在想将实现更改为 requestAnimationFrame() ，以便获得我所追求的性能。由于某些原因， requestAnimationFrame() 不会调用提供给它的函数。

我的代码如下所示；

var index = 0;
var $btn = $('.btn');
function btnBlinkRun() {
  if (index < 2) {
    index = index + 1;
  } else {
    index = 0;
  }
  $('#ani--scaleinout').removeAttr('id');
  $($btn[index]).attr('id', 'ani--scaleinout');
  window.requestAnimationFrame(btnBlinkRun);
}

btnBlinkRun();

.btn{
  width: 30px;
  height: 30px;
  
  background: blue;
  border-radius: 100%;
  margin-bottom: 10px;
}

#ani--scaleinout {
  animation: zoominout 1s ease-in;
}

@keyframes zoominout {
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  
  <div class="btn" id="ani--scaleinout"></div>
    <div class="btn"></div>

    <div class="btn"></div>

  
</div>

Answer 1

看起来发生的事情是您每秒多次触发 requestAnimationFrame 。您的 CSS 动画的持续时间为 1s。但是您每隔 x 毫秒就会删除该属性。

它正在触发，只是发生得太快，你看不到它。为了演示更改对 window.requestAnimationFrame 的调用以使用 setTimeout，您会注意到动画:

setTimeout(function() {
    window.requestAnimationFrame(btnBlinkRun);
}, 1000);

并不是说这是首选解决方案，而是解释为什么会发生这种情况。