4

zepto.jsには要素をアニメーション化する API があり、「完了」コールバック関数を含めることができます。アニメーションソース

ただし、jquery 型のキュー APIはサポートされていないようです。

zepto を使用してアニメーション シーケンスを作成するための組み込みのアプローチがあるかどうか疑問に思っていましたか、それともどこかからキュー関数をピンチするだけですか?

また、「完了」コールバックはパラメータを渡さないため、アニメーション シーケンスのどの段階にいるかを知るのは少し見づらいです。

4

2 に答える 2

2

役立つかどうかはわかりませんが、ゼプト アニメーションをキューに入れる小さなプラグインを作成しました。

$.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
});
于 2013-06-22T02:51:33.677 に答える
1

zepto の anim(ate) 関数に渡すことができる Callback は、アニメーションが終了したときにのみ呼び出されます。

コールバック中に 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 に移植することは大したことではありません。

乾杯

于 2012-06-05T21:59:57.660 に答える