使用zepto，是否可以对动画进行排队？ [英] using zepto, is it possible to queue animations?

问题描述

zepto.js 有一个动画元素的API，允许包含完成回调功能。 动画源

zepto.js has an API to animate elements, which allows to include a "done" callback function. animate source

然而 jquery类型队列API 没有似乎得到了支持。

however jquery type queue API doesn't seem to be supported.

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

I was wondering if there's a built-in approach for creating animation sequences with zepto or should i just pinch a queue function from somewhere?

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

also the "done" callback doesn't pass any parameters, so its bit ugly to know which stage of the anim sequence you are at - maybe theres a workaround for that?

推荐答案

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

I'm not sure if you will find it helpful but I wrote a litte plugin to queue zepto animations:

$.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
});

这篇关于使用zepto，是否可以对动画进行排队？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！