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）。 / p>

我通过不拆分值等简化了上述内容，因为此时我想完成的是如何遍历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();
});

P.S。为什么不将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
});

FIDDLE

jQuery动画循环回调

3 个答案: