window.cancelAnimationFrame()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод window.cancelAnimationFrame() останавливает анимацию, запланированную с помощью window.requestAnimationFrame().

Синтаксис

window.cancelAnimationFrame(requestID);

Параметры

requestID: Значение, которое возвращает window.requestAnimationFrame() при запросе callback.

Примеры

var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

var cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var start = window.mozAnimationStartTime; // Поддерживается только FF. В других браузерах можно использовать Date.now().

var myReq;

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress / 10, 200) + "px";
  if (progress < 2000) {
    // Важно обновлять requestId при каждом запросе requestAnimationFrame
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);
// остановка с использованием последнего requestId
cancelAnimationFrame(myReq);

Спецификации

Specification
HTML # animationframeprovider-cancelanimationframe