Question

zepto.js有一个动画元素的API，允许包含“完成”回调函数。 animate source

我想知道是否有使用zepto创建动画序列的内置方法，还是应该从某处捏一个队列函数？

“完成”回调也没有传递任何参数，因此知道你所在的动画序列的哪个阶段有点难看 - 也许这是一个解决方法？

Answer 1

我不确定你是否会觉得它有用但是我写了一个小插件来排队zepto动画：

$.fn.queueAnim = function (steps, callback) {
  var $selector = this;

  function iterator(step) {
    step.push(iterate);
    $selector.animate.apply($selector, step); 
  }

  function iterate() {
    if (!steps.length) return callback && callback();

    var step = steps.shift();
    iterator(step);
  }

  iterate();
}

示例用法：

$('div').queueAnim([
  [ { 'rotate': '15deg' }, 200, 'ease-out' ],
  [ { 'rotate': '-13deg' }, 300, 'ease-out' ],
  [ { 'rotate': '10deg' }, 400, 'ease-out' ],
  [ { 'rotate': '0deg' }, 500, 'ease-out' ]
], function () {
  // all done
});

Answer 2

只有在动画结束时才能调用您可以传递给zepto动画（ate）函数的回调。

可以假设在回调期间css属性与传入的属性相同。因此，如果您不直接传递它们，则可以重用该对象。

此外，在回调中，您始终可以使用$.fn.css函数来获取当前样式，尽管这可能不是最高效的方式。

关于排队，使用动画回调，您可以通过使用嵌套回调调用$.fn.anim来构建基本队列。

$('div').animate({width: 200}, 1000, "linear", function(){

    $(this).animate({"background-color": "red"}, 300, "ease-in", function() {
        var $this = $(this),
            width = $this.css("width"); // will be "200px"

        $this.animate({height: 300}, 1000, "linear");
    });

});

如果您想要或需要更高级的队列，将jQuery队列作为插件移植到zepto应该没什么大不了的。

干杯

使用zepto，是否可以对动画进行排队？

2 个答案: