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

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

WBOY

リリース： 2016-05-16 17:56:10

オリジナル

1102 人が閲覧しました

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

コードをコピーしますコードは次のとおりです。

>

animate /javascript " src="tangram-1.5.0.core.js">

<入力タイプ" value ="start" onclick="an.start()" />

< ;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 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% の機能が使用されています。