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

Posted 2023-02-22

【中文标题】使用zepto，是不是可以对动画进行排队？

【英文标题】：using zepto, is it possible to queue animations?使用zepto，是否可以对动画进行排队？

【发布时间】：2012-02-16 07:16:15

【问题描述】：

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

但是 jquery type queue API 似乎不受支持。

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

“完成”回调也不传递任何参数，因此知道您处于动画序列的哪个阶段有点难看 - 也许有解决方法？

【参考方案1】：

您可以传递给 zepto 的 anim(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 应该没什么大不了的。

干杯

【参考方案2】：

我不确定你是否会觉得它有帮助，但我写了一个小插件来排队 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
);