jQuery 1.9.1 ソースコード解析シリーズ (15) アニメーション処理のイージングアニメーションコア Tween_jquery

CreateTweens() は jQuery 内部関数アニメーションで呼び出され、イージング アニメーション グループを作成します。作成完了後の結果は次のようになります。

上記のイージング アニメーション グループは 4 つのアトミック アニメーションで構成されていることがわかります。すべてのアトミック アニメーションに関する情報が含まれています。

createTweens 関数を詳しく見てみましょう。この関数は、トゥイーナー ["*"] を呼び出す配列内の関数を実際に走査します (実際には要素は 1 つだけです)。

  function createTweens( animation, props ) {
    jQuery.each( props, function( prop, value ) {
      var collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),
      index = 0,
      length = collection.length;
      for ( ; index < length; index++ ) {
        if ( collection[ index ].call( animation, prop, value ) ) {
          // we're done with this property
          return;
        }
      }
    });
  } 

トゥイーナー ["*"][0] 関数をもう一度見てください。メインのコードは次のとおりです。

function( prop, value ) {
  var end, unit,
  //根据css特征值获取缓动动画结构
  tween = this.createTween( prop, value ),
  parts = rfxnum.exec( value ),
  target = tween.cur(),
  start = +target || 0,
  scale = 1,
  maxIterations = 20;
  if ( parts ) {
    end = +parts[2];
    unit = parts[3] || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    //非像素单位的属性
    if ( unit !== "px" && start ) {
      // 从一个非零起点开始迭代，
      //对于当前属性，如果它使用相同的单位这一过程将是微不足道
      // 后备为end，或一个简单的常量
      start = jQuery.css( tween.elem, prop, true ) || end || 1;
      do {
        //如果前一次迭代为零，加倍，直到我们得到*东西* 
        //使用字符串倍增因子，所以我们不会偶然看到scale不改变
        scale = scale || ".5";
        // 调整和运行
        start = start / scale;
        jQuery.style( tween.elem, prop, start + unit );
        // 更新scale, 默认0或NaN从tween.cur()获取
        // 跳出循环，如果scale不变或完成时, 或者我们已经觉得已经足够了
      } while ( scale !== (scale = tween.cur() / target) && scale !== 1 && --maxIterations );
    }
    tween.unit = unit;
    tween.start = start;
    //如果提供了+=/-=记号，表示我们正在做一个相对的动画
    tween.end = parts[1] ? start + ( parts[1] + 1 ) * end : end;
    }
    return tween;
  }]
}; 

非表示/表示アニメーションを除いて、他のアニメーションはトゥイーナー ["*"][0] 関数を通じてアニメーション グループをカプセル化していることがわかります。開始/終了/単位のキー配列がいくつかあります。特にアニメーション開始値を非ピクセル単位で取得するのに手間がかかりました。

もう 1 つの重要なポイントは、this.createTween を使用して、単一の CSS 機能の基本的なアニメーション特性を取得することです。 anime.createTweenではjQuery.Tweenを直接呼び出して処理しています。次に詳しく説明していきます。

a.jQuery.Tween

----------------------------------------------- --- ----------------------------------

jQuery.Tween の構造は jQuery に似ています

function Tween( elem, options, prop, end, easing ) {
  return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
  constructor: Tween,
  init: function( elem, options, prop, end, easing, unit ) {
    this.elem = elem;
    this.prop = prop;
    this.easing = easing || "swing";
    this.options = options;
    this.start = this.now = this.cur();
    this.end = end;
    this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
  },
  cur: function() {...},
  run: function( percent ) {...}
};
Tween.prototype.init.prototype = Tween.prototype; 

非常におなじみのラッシュがありますか？

内部の cur 関数は、現在の CSS 特徴値を取得するために使用されます

cur: function() {
  var hooks = Tween.propHooks[ this.prop ];

  return hooks && hooks.get ?
  hooks.get( this ) :
  Tween.propHooks._default.get( this );
}, 

run 関数は、アニメーションの各時点で進行中のアニメーションの各特徴値を処理します。

主に次の 2 つのステップがあります:

1. アニメーションの進行状況と現在のアニメーションの位置を計算します

//如果有动画时长则使用jQuery.easing计算出缓动动画进度eased，否则进度eased为percent
//并根据进度得到当前动画位置now
if ( this.options.duration ) {
  this.pos = eased = jQuery.easing[ this.easing ](
    percent, this.options.duration * percent, 0, 1, this.options.duration
    );
} else {
  this.pos = eased = percent;
}
this.now = ( this.end - this.start ) * eased + this.start;

2. 現在の進捗状況に応じて CSS 特徴量を設定します

//设置css特征值
if ( hooks && hooks.set ) {
  hooks.set( this );
} else {
  Tween.propHooks._default.set( this );
}
return this; 

イージング アニメーションを生成するステップがアニメーション全体の中核であることがわかります。

イージング アニメーション グループを作成します。各アトミック アニメーションには、各アトミック CSS 属性アニメーションに必要なさまざまなパラメーターとアニメーション関数が含まれます。

違いは、非表示/表示はこのイージング アニメーション グループをdefaultPrefilter で直接作成し (すべてのプロパティのデフォルトは px 単位)、他のアニメーションは createTweens を呼び出すときにイージング アニメーション グループを作成することです。

アニメーションを作成するときにティック関数があることをまだ覚えていますか? このティック関数は 1 ステップおきに呼び出されます

   tick = function() {
      ...
        length = animation.tweens.length;
      for ( ; index < length ; index++ ) {
        animation.tweens[ index ].run( percent );
      }
　　　　　　　...
    } 

各アトミック アニメーションには、独自のアニメーションを実行するための独自の run 関数があり、イージング アニメーション グループの作成時に確立されることがわかりましたか。

それでは、アニメーションの核となるプロセス全体を整理しましょう:

1. まず、パラメータに従って jQuery.speed を呼び出してアニメーション関連のパラメータを取得し、次のようなオブジェクトを取得し、.queue を使用してアニメーション実行関数 doAnimation を生成し、それをキューにプッシュして実行します。すぐに

opt = {
    complete: fnction(){...},//动画执行完成的回调
    duration: 400,//动画执行时长
    easing: "swing",//动画效果
    queue: "fx",//动画队列
    old: false/fnction(){...},
} 

2. doAnimation を呼び出して遅延オブジェクトを作成し、遅延オブジェクトの Promise メソッドを使用してアニメーション オブジェクト アニメーション (遅延オブジェクト アニメーション機能リスト) を構築し、最後にアニメーションの実行完了後にアニメーションにコールバック関数を追加します。 。

3. jQuery 内部関数 proFilter を呼び出して、現在のブラウザで認識できるように CSS 機能名を変更し、いくつかの複合 CSS 機能 (paddingTop/Right/Bottom/Left へのパディングなど) を分解します。

4. jQueryの内部関数defaultPrefilterを呼び出して、正常に動作するアニメーションを作成します。 前提条件の修正: たとえば、高さ/幅のアニメーション表示とオーバーフローには特定の値が必要です。特に注意が必要なのは

表示/非表示アニメーションの場合、アニメーション化する必要がある CSS 機能を抽出するために genFx が前に呼び出されます。defaultPrefilter 関数では、アニメーション オブジェクト anime.createTween が直接呼び出され、対応するイージング アニメーション オブジェクトが各 CSS アニメーション プロパティに追加されます。 (アニメーションパラメータや実行などのアニメーション関数を含む) はイージングアニメーショングループanimation.tweens

に押し込まれます。

5. jQuery 内部関数 createTweens を呼び出して、表示/非表示を除く各 CSS アニメーション機能をアニメーション化します。animation.createTween を使用してイージング アニメーション オブジェクト (アニメーション パラメーターや run などのアニメーション関数を含む) を作成し、それをイージングに押し込みます。アニメーション グループ

(animation.tweens)

6. アニメーションのタイミングを開始し、各時点でティック関数を実行して、対応する CSS 特徴値のモーション値を設定します。

CSS特徴量移動の進捗率は

です

remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
temp = remaining / animation.duration || 0,
percent = 1 - temp

取得されたパーセンテージは時間パターンと一致しています。このパーセンテージを置き換えて、アニメーション表示を更新するための正確な CSS 機能値を設定します。

8. アニメーションが完了したら、アニメーション完了コールバックを呼び出します。

編集者が共有した jQuery 1.9.1 ソース コード分析シリーズ (15 回) - アニメーション処理のためのイージング アニメーション コア Tween について これですべての内容が終わりました。ご質問がございましたら、お気軽にお問い合わせください。メッセージをいただければ、できるだけ早くご連絡させていただきます。