javascript - jQuery 动画循环回调

Question

我编写了一个名为 .Ani() 的特殊函数，它的工作方式类似于 jquery .animate(相同的语法，等等只是先通过 CSS 运行它，如果不支持过渡，则运行 .animate)。

我想做的是允许用户传入一串坐标以沿路径设置动画:

"0,0||5,5||10,10"

$(this).Ani({'top': 0, 'left': 0}, duration, easing, function() {
    // callback function
});

上面只是对坐标 1 进行动画处理，我需要通过运行相同的代码(它本身也会有一个回调)对回调内的下一组坐标 (5,5) 进行动画处理。

我已经通过不拆分值等简化了上面的内容，因为此时我想要完成的是如何循环 X 次(坐标集的数量)并为每个生成动画线一组坐标。类似于:

var path="0,0||5,5||10,10",
    COORDS=path.split('||');

for(var i=0, l=COORDS.length; i<l; i++) {
   $(this).Ani({ 'top' : COORDS[i].split(',')[1], 'left' : COORDS[i].split(',')[0] }, 500, ease, function() {
      // WHEN DONE ANIMATING TO THIS LOCATION 
      // RUN THE NEXT ANIMATION FOR THE NEXT SET OF COORDINATES (5,5)
   });
};

Answer 1

这是我的建议:

function Animate(path, callback) {
  var animatedObject = $(this)
  var onCompleteCallback = callback || function() { };
  var COORDS=path.split('||');
  var size = COORDS.length;

  if (size === 0) {
    // maybe call onCompleteCallback(); ?
    return;
  }

  var step = COORDS[0].split(',');
  var currentStep = 0;


  function doAnimation() {
    animatedObject.Ani({ 'top' : step[1], 'left' : step[0] }, 500, ease, function() {
        ++currentStep;
        if (currentStep === size) {
           onCompleteCallback();
           return;
        }
        step = COORDS[currentStep].split(',');
        doAnimation();
    });
  }

  doAnimation();
};

只需调用它:Animate("0,0||5,5||10,10", callbackFunctionWhenItsDoneIfYouWant);