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 ms删除一次属性。

它正在触发，它发生的速度如此之快，你无法看到它。要演示更改您对window.requestAnimationFrame的调用以使用setTimeout，您会注意到动画：

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

不是说这是首选解决方案，而是解释为什么会这样。

Answer 2

它执行正常。但我猜想，它不会做你想要的。动画帧会在每个渲染帧（例如60fps）上触发，而不会在CSS动画关键帧上触发。

animationend事件是你的朋友。

＆＃13;

var index = 0;
var buttons = document.querySelectorAll('.btn');
function btnBlinkRun() {
  if (index < 2) {
    index = index + 1;
  } else {
    index = 0;
  }
  const element = document.querySelector('#ani--scaleinout');
  element.id = null;
  buttons[index].id = 'ani--scaleinout';
  buttons[index].addEventListener("animationend", btnBlinkRun, { once: true });
}

btnBlinkRun();

＆＃13;

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

＆＃13;

<div>
  <div class="btn" id="ani--scaleinout"></div>
  <div class="btn"></div>
  <div class="btn"></div>
</div>

＆＃13;

requestAnimationFrame未触发提供给它的函数

2 个答案: