4

自分のサイトに次のようなアニメーションを実装したいと思います。

  • 複数のDOM要素を更新する必要があります。
  • 各DOM要素には独自のアニメーションパスがあります（位置によって異なります）
  • それでも緩和効果があります。

各要素に対してjQueryのanimate（）関数を呼び出すと（キュー：falseを使用）、各要素が残りの要素とわずかに同期しなくなります。複数のタイマーが実行されているので、理にかなっています。

アニメーションステップごとにコールバックを使用して、タイマーイベントを1つだけ持つことはできますか？何かのようなもの：

jQuery.fx.timeline( from, to, easing, function( step, total ) {

      var percentage = step / total;
      // ...update DOM elements based on the percentage of the animation

} );
4

4 に答える 4

4

この記事を見てください：http：//james.padolsey.com/javascript/fun-with-jquerys-animate/

とてもクリアでとても簡単です！

于 2009-09-24T10:26:29.677 に答える
4

JavaScriptのすべてのタイマーは、ネイティブのプレーンな古い学校のJavaScript関数setInterval()またはに基づいていますsetTimeout()。jQueryでさえこれを内部的に使用します。

タイマーを同期する秘訣setInterval()は、呼び出されるタイマーが1つだけであることを確認することです。そのため、自分で何かを作成します。

アニメーションは次のように設計できます。

  • それぞれ30msの間隔で10ステップあります。
  • 合計アニメーションは300msかかります。

  • 各ステップで、現在の進捗状況/パーセンテージを計算できます。

    varパーセンテージ=（currentStep / totalSteps）;

これで、関数がによって呼び出されるたびに、setInterval()すべてのDOM要素を一度に正しい位置に設定できます。各アニメーションフレームのどこに要素を配置するかを見つけるには、次を使用します。

var diff       = ( to - from );
var stepValue  = from + diff * percentage;

jQueryイージング関数は直接呼び出すことができ、最終的なステートメントは次のようになります。

var stepValue  = jQuery.easing[ easingMethod ]( percentage, 0, from, diff );

私はこれをクラスに変えました：

/**
 * Animation timeline, with a callback.
 */
function AnimationTimeline( params, onstep )
{
  // Copy values.

  // Required:
  this.from     = params.from || 0;         // e.g. 0%
  this.to       = params.to   || 1;         // e.g. 100%
  this.onstep   = onstep || params.onstep;  // pass the callback.

  // Optional
  this.steps    = params.steps    || 10;
  this.duration = params.duration || 300;
  this.easing   = params.easing   || "linear";

  // Internal
  this._diff  = 0;
  this._step  = 1;
  this._timer = 0;
}

jQuery.extend( AnimationTimeline.prototype, {

  start: function()
  {
    if( this.from == this.to )
      return;

    if( this._timer > 0 )
    {
      self.console && console.error("DOUBLE START!");
      return;
    }

    var myself  = this;    
    this._diff  = ( this.to - this.from );
    this._timer = setInterval( function() { myself.doStep() }, this.duration / this.steps );
  }

, stop: function()
  {
    clearInterval( this._timer );
    this._timer = -1;
    this._queue = [];
  }

, doStep: function()
  {
    // jQuery version of: stepValue = from + diff * percentage;
    var percentage = ( this._step / this.steps );
    var stepValue  = jQuery.easing[ this.easing ]( percentage, 0, this.from, this._diff );

    // Next step
    var props = { animationId: this._timer + 10
                , percentage: percentage
                , from: this.from, to: this.to
                , step: this._step, steps: this.steps
                };
    if( ++this._step > this.steps )
    {
      stepValue = this.to;  // avoid rounding errors.
      this.stop();
    }

    // Callback
    if( this.onstep( stepValue, props ) === false ) {
      this.stop();
    }
  }
});

そして今、あなたは使うことができます：

var el1 = $("#element1");
var el2 = $("#element2");

var animation = new AnimationTimeline( {
    easing: "swing"
  , onstep: function( stepValue, animprops )
    {
      // This is called for every animation frame. Set the elements:
      el1.css( { left: ..., top: ... } );
      el2.css( { left: ..., top: ... } );
    }
  });

// And start it.
animation.start();

一時停止/履歴書を追加することは、読者にとっての演習です。

于 2009-12-04T10:27:26.447 に答える
4

それを行うための簡単な答え。多分誰かが私がしたようにそれを検索するでしょう。

アニメーション関数で「step」属性を使用できます。

$(obj).animate(
    {
        left: 0
    },
    {
        duration: 50,
        step: function( currentLeft ){
            console.log( "Left: ", currentLeft );
        }
    }
 );

したがって、各ステップで、これにより現在の左位置がログに記録されます

于 2013-04-04T19:10:01.210 に答える
1

jqueryキューをチェックしましたか？

アニメーションをキューに入れて、それぞれにコールバックを設定できます。少し遊んでみれば、思い通りの成果が得られると思います。

それがお役に立てば幸いです、シナン。

于 2009-09-01T12:42:42.287 に答える