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

Answer 2

您可以使Ani将函数作为参数发送给回调，该回调在被调用时为下一对坐标运行Ani函数，并完整发送其余参数。

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

PS为什么不让Ani作为封装逻辑的对象？ 它可以简化代码并提高性能，但可以提高LOC。

Answer 3

我想是这样的

$.fn.Ani = function(vals, dur, ease, callback) {
    var coords = vals.split('||'),
        self   = this,
        i      = 0;

    (function fn(cooo) {
        var arr = cooo.split(',');
        self.animate({top: arr[0], left: arr[1]}, dur, ease, function() {
            if (coords[++i]) {
                fn(coords[i]);
            } else {
                callback();
            }
        });
    })(coords[i]);
}

var path = "0,0||5,5||10,10";

$(element).Ani(path, 1200, 'swing', function() {
    // complete
});

小提琴