JavaScript簡易イージングプラグイン（ソースコードパッケージ化）_JavaScriptスキル

要件は次のとおりです: 開始、一時停止 (線形トゥイーンと非線形トゥイーンの両方がサポートされます)、継続、終了が可能 複数のスタイルを並行してサポートします 特定のフレームワークに依存しないことが最善ですrun ファイル サイズは大きいほど小さい方が良いです 彼はいくつかの既存のプラグインまたはライブラリを探しましたが、満足のいくものや比較的バランスのとれたものはほとんどありませんでした。この要件の下で、私は基本的に比較的単純なアニメーション コンポーネントを作成しました。この要件を満たしました。最初のコード オンライン デモ: http://demo.jb51.net/js/2012/animate/ パッケージのダウンロード: animate_jquery.rar html パート:

コードをコピーします コードは次のとおりです。 > animate /javascript " src="tangram-1.5.0.core.js"> html,body,ul,li{padding:0;margin:0;} #anim{width:50px;height:50px;background:red;position:absolute ; トップ :30px;left:0;}

&lt ;input type="button" value="resume" onclick="an.resume()" /> 自動開始、一時停止、その後再開 ;

パートをアニメーション化します。

コードをコピー コードは次のとおりです: function animate(options){ this.from = options。 from;//if from を使用しない場合、 this.to = options.to {}; this.onStart = options.onStart empty;// 以下はいくつかのコールバック関数です。メカニズムは使用されません this.onStop = options.onStop || this.onContinue = options.onContinue || .onPause = options .onPause || var element = options.element; var period = options.duration 300;// 変更の合計期間、単位は ms var pending = false;//はい、一時停止されていませんが、まだ開始されていない場合、値も true になります。 var timer = null; var mixin = options.mix; this.from || getState(element, this .to);//元のデータ var thiz = this;//初期スタイルを取得 関数 getState(ele, targetStyles){ var obj = {}; var i = 0; for (targetStyles の var p) { i ; obj[p] = parseFloat(mixin.getStyle(ele, p) ); } if(i == 0){ return null; } 関数 empty(){} 関数animate(from, to, elapse) { var startTime = (new Date).getTime() (elapse ? - elapse : 0);//一時停止から始まることを証明する 3 番目のパラメータがある場合、次に、startTime を現在の時刻から仮の時刻の経過時間を引いた値に設定します。パラメータが 2 つだけの場合、経過時間は 0 になります。 timer = setInterval(function(){ var endTime = (new Date)) .getTime(); if( endTime - startTime thiz.onAnimate(); for(var p in from){ if(from.hasOwnProperty(p)){ var currentPropertyStyle = mixin.compute(currentElapse, from[p], to[p]-from[p], mixin.setStyle(element, p); , currentPropertyStyle); } } else{ thiz.stop(thiz.to) } }; 🎜>this.start = function(){ if(pending){ this.resume(); } else{ this.onStart(); var スタイル = this.to); } } this.stop = function(){ p のスタイル){ if(styles.hasOwnProperty(p)){ mixin.setStyle(element, p,styles[p]); } } this.onStop( ); } this .pause = function(){ clearInterval(timer); this.onPause(); this。再開 = function(){ 保留 = false; this.onContinue(); } } 使用部分： 复制代码 代码如下: var mixinT = { getStyle:baidu.dom.getStyle, setStyle:baidu.dom.setStyle, compute:function(t, b, c, d){ //return t*c/d b; if (t==0) b を返します。 if (t==d) return b c; if ((t/=d/2) return c/2 * (-Math.pow(2, -10 * --t) 2) b; } }; var mixinJQ = { getStyle:function(ele, styleName){ return $(ele).css(styleName); }, setStyle:function(ele, styleName, styleValue){ $(ele).css(styleName, styleValue); }, compute:function(t, b, c, d){ return b t*c/d; } }; var an = new animate({ element:document.getElementById('anim'), //from:{'width':100, 'height':100, left:0, top: 30}, to:{left:500}, mix:mixinT, duration:2000 }); if(/demo=1/.test(location.search)){ varデモリンク = baidu.g('demolink'); demolink.href= 'animate.html'; demolink.innerHTML = '戻る'; an.start(); setTimeout(function(){ an.pause(); resume(); }, 1200); 関数resume(){ setTimeout(function(){an.resume()}, 1000); } } 上は完全なデモの代コードです。 は、開始、一時停止、再開、停止を行うことができるという要求を満たし、1 つの回帰関数:D を送信します。 は、複数のサンプル形式を同時にサポートできます。 getStyle、setStyle、compute という関数は、アニメーションの実行時に必要な操作です。この 3 つはユーザーの選択に関係しており、前の 2 つの可能性とフレームワークに関係しており、3 番目の可能性とユーザーが採用する変更計算方式に関係しています。したがって、主要および主流のトゥイーン タイプの 4 つのパラメータについては、http://www.robertpenner.com/easing/およびhttp://www.actionscript.org/resources/articles/170/1 を参照してください。私の例では、tangram と jquery のクラスを使用し、2 つの mixin オブジェクトをそれぞれ個別に適用することで、 いくつかの「私有」の量と関数が詰め込まれており、このようにしてアニメーションを開始するとき、オブジェクトは無関心ですが、ポイントは内部に保存されており、各サンプルが自分で管理する方法です。使用する場合は、options.from を提供しないこともできます。関数は、options.to に基づいて中間関数の値を計算します。これは、mixin が提供するメソッドに大きく依存するため、この部分にもバグがあります。それでも、80% の機能が使用されています。