当前位置：文江博客话题详情

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

发布于 2024-12-28 08:56:38 字数 471 浏览 0 评论 0原文

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

但是jquery 类型队列 API 似乎不受支持。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰◇生如夏花灿烂 2025-01-04 08:56:38

我不确定您是否会发现它有帮助，但我编写了一个小插件来对 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
});

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

an example usage:

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

回复收藏 0 原文

甜中书 2025-01-04 08:56:38

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

干杯

The Callback you can pass to zepto's anim(ate) function is only called when the animation is finished.

It is save to assume that during the callback the css properties are the same as those passed in. So if you don't pass them in directly you can reuse the object.

Also, inside the callback you can always use the $.fn.css function to get the current style, although this might not be the most performant way.

Regarding queueing, using the animation callbacks you can build a rudimentary queue by calling $.fn.anim with nested callbacks.

$('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");
    });

});

If you want or need more advanced queues, porting the jQuery queue to zepto as a plugin should be no big deal.

Cheers

回复收藏 0 原文

~没有更多了~