CreateTweens() は jQuery 内部関数アニメーションで呼び出され、イージング アニメーション グループを作成します。作成完了後の結果は次のようになります。
上記のイージング アニメーション グループは 4 つのアトミック アニメーションで構成されていることがわかります。すべてのアトミック アニメーションに関する情報が含まれています。
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; } } }); }
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; }] };
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: function() { var hooks = Tween.propHooks[ this.prop ]; return hooks && hooks.get ? hooks.get( this ) : Tween.propHooks._default.get( this ); },
主に次の 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;
違いは、非表示/表示はこのイージング アニメーション グループをdefaultPrefilter で直接作成し (すべてのプロパティのデフォルトは px 単位)、他のアニメーションは createTweens を呼び出すときにイージング アニメーション グループを作成することです。
tick = function() { ... length = animation.tweens.length; for ( ; index < length ; index++ ) { animation.tweens[ index ].run( percent ); } ... }
それでは、アニメーションの核となるプロセス全体を整理しましょう:
opt = { complete: fnction(){...},//动画执行完成的回调 duration: 400,//动画执行时长 easing: "swing",//动画效果 queue: "fx",//动画队列 old: false/fnction(){...}, }
に押し込まれます。
(animation.tweens)
です
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 について これですべての内容が終わりました。ご質問がございましたら、お気軽にお問い合わせください。メッセージをいただければ、できるだけ早くご連絡させていただきます。