Question

我试图先水平div水平，然后垂直。但是使用requestAnimationFrame的问题在于，它同时执行两个动画，使div对角移动。

以下是小提琴链接：https://jsfiddle.net/akonchady/z4qmkuyc/22/

我做错了什么？

注意：如果我按第二次调用给出超时，它会按预期工作：

animate('abc', 'marginLeft', 250, 1000);
setTimeout(function() {
  animate('abc', 'marginTop', 250, 1000);
}, 3000);

但是我想避免超时。如何使用requestAnimationFrame？

实现此目的

Answer 1

JavaScript中的大多数functions都是同步的（将按顺序执行）。但是使用asynchronous函数（不会等待早期函数完成），使用callbacks来控制执行流程。

要在第一个动画完成后调用发送function，请使用callback

＆＃13;

function animate(id, styleAttr, finalValue, duration, callback) {
  var ele = document.getElementById('abc'),
    startTime = +new Date, //Not sure how readable this is ?
    delta = null,
    req = null;

  (function timeout() {
    elapsedTime = +new Date - startTime;
    if (elapsedTime >= duration) {
      cancelAnimationFrame(req);
      ele.style[styleAttr] = finalValue + 'px';
      if (typeof callback !== 'undefined') {
        callback();
      }
      return;
    } else {
      delta = finalValue / duration;
      ele.style[styleAttr] = delta * elapsedTime + 'px';
    }
    req = requestAnimationFrame(timeout);
  })();
}
animate('abc', 'marginLeft', 250, 1000, function() {
  animate('abc', 'marginTop', 250, 1000);
});

＆＃13;

#abc {
  width: 100px;
  height: 100px;
  background-color: red;
}

＆＃13;

<div id='abc'>
</div>

＆＃13;

使用requestAnimationFrame动画化div

1 个答案:

Fiddle Demo