JavaScriptモーションフレームワークコード

数日遅れてしまいました、ごめんなさい！
JavaScript モーション フレームワークのコードの最適化を続けます。
前のコードにはバグがあり、繰り返しクリックすると速度が上がります。では、このバグを解決するにはどうすればよいでしょうか。

それでは、実際に非常に簡単に解決しましょう。
エクササイズを開始するときに、既存のタイマーを閉じます。

考えてみましょう: 多くのオブジェクトを同時に動かし、それらが互いに影響を及ぼさないようにする方法。

1. 各オブジェクトに個別にタイマーを追加します
2. マウスが内側に移動すると、幅は 800 に増加します。マウスが外側に移動すると、幅は元の幅までゆっくりと減少します
具体的なコードは次のとおりです。 script type="text /javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('p');
var timer;
function getStyle(obj,name){
//currentStyle:現在のスタイル
if (obj.currentStyle){
return obj.currentStyle[name];//Google および Firefox と互換性がありません
}else{
//getComputedStyle: 計算されたスタイル
return getComputedStyle(obj,false)[name]; //IE8 とは互換性がありません--
}
}
function move(obj,name,target,dur,fn){
clearInterval(obj.timer);
var count = parseInt(dur/30);//総数回
var start = parseFloat(getStyle(obj,name));//スタートからの距離
var dis = target - start;//距離
// ステップサイズ
var step = dis/count;
var n = 0 ;//現在のステップ数
obj.timer = setInterval(function(){
n++;
obj.style[name] = start+ n*step +'px';
if(n == count){
clearInterval( obj.timer)
fn && fn();
}

},30)
}
for(var i=0;i oDiv[i].onmouseover = function(){
move(this,'width ',800,1000)
}
oDiv[i].onmouseout = function(){
move(this,'width',30,1000)
}
}
}

開始位置と終了位置はランダムで、複数の値を渡すにはJSONを使用します。
実装のアイデア: 1. 2 つの仮パラメータの名前とターゲットを json に変更します
2. 次に、for in ループを使用します。プロパティと値を反復処理します。

move() 関数に開始位置と距離を入力します。代わりに json を使用してください

大まかに言うとこれです。

var start = {};
var dis = {};

for(json の var name){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[名前];
}

運動するとき、速度と動作曲線があります。これをどのように書くか？
判定条件を書いてパラメータイージングを渡すと、その条件を満たすと対応する速度になります。
obj.timer = setInterval(function(){
n++;
for(json の変数名){
var a = n/count;
switch(easing){
case 'linear':
var cur = start[name ] + a*dis[名前];
ブレーク;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[名前];
ブレーク;
case 'ease -out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3))*dis[name];
Break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] ] = cur +'px';
}
}
もちろんデフォルトのものもあれば、設定する必要のないものもあります。これが究極のモーション フレームワークです。 document.getElementsByTagName('p')[0];
var timer;
function getStyle(obj,name){
//currentStyle: 現在のスタイル
if(obj.currentStyle){
return obj.currentStyle [name]; //Google および Firefox とは互換性がありません
}else{
//getComputedStyle: 計算されたスタイル
return getComputedStyle(obj,false)[name];//IE8 とは互換性がありません--
}
}
// complete = dur, easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var complete = complete || {};
complete.dur = complete.dur ||
complete.easing = complete.easing || 'ease-out';

var count = parseInt(complete.dur/30);//合計回数
var start = {};//{width:300,height:300 }
var dis = {};
//{width:300,height:300}
for(json の var name){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json [name] - start[name];
}
var n = 0;//現在のステップ数
obj.timer = setInterval(function(){
n++;
for(json の var name){
var a = n/count;
switch(complete.easing){
case 'linear':
var cur = start[name] + a*dis[name];
Break;
case 'ease-in':
var cur = start [名前] + Math.pow(a,3)*dis[名前];
Break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + ( 1 -Math.pow(a,3))*dis[name];
break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style . filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}

if(n == count){
clearInterval ( obj.timer)
complete.fn && complete.fn();
}

},30)
}

oDiv.onmouseover = function(){
move(this,{width:300,height:300} , {dur:3000,easing:'ease-in'})
}
oDiv.onmouseout = function(){
move(this,{width:50,height:50},{dur:3000,fn:function( ) {
move(oDiv,{opacity:0})
}})
}

}

以上がJavaScriptモーションフレームワークコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。