Javascript-Motion-Framework-Code

Ich bin ein paar Tage zu spät, sorry!
Optimieren Sie weiterhin den Code des Javascript Motion Frameworks.
Es gibt einen Fehler im vorherigen Code. Wenn man wiederholt darauf klickt, erhöht sich die Geschwindigkeit.

Jetzt lasst es uns lösen
Es ist eigentlich ganz einfach
Wenn Sie mit dem Training beginnen, schließen Sie den vorhandenen Timer.

Denken Sie darüber nach: Wie man viele Objekte gleichzeitig bewegen kann, ohne dass sie sich gegenseitig beeinflussen.
1. Fügen Sie jedem Objekt separat einen Timer hinzu
2. Wenn sich die Maus hineinbewegt, erhöht sich die Breite auf 800. Wenn die Maus herausbewegt wird, verringert sich die Breite langsam auf die ursprüngliche Breite
Der spezifische Code lautet wie folgt:

Die Startposition und die Endposition sind zufällig, Wie schreibt man JSON, um mehrere Werte zu übergeben?
Implementierungsideen: 1. Ändern Sie die beiden formalen Parameter name und target in json
2. Verwenden Sie dann eine for in-Schleife. Iterieren Sie über Eigenschaften und Werte.

Geben Sie in der Funktion move() die Startposition und den Abstand ein. Verwenden Sie stattdessen json
, was ungefähr der Fall ist.
                                      var start = {};
var dis = {};

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

Beim Training gibt es Geschwindigkeits- und Bewegungskurven.
Schreiben Sie eine Beurteilungsbedingung und übergeben Sie einen Parameter für die Lockerung. Wenn die Bedingung erfüllt ist, wird die entsprechende Geschwindigkeit bestimmt.
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linear':
var cur = start[name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math .pow(a,3)*dis[name];
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';
}
Natürlich gibt es Standardeinstellungen, und einige müssen nicht festgelegt werden. Dies ist unser ultimatives Sport-Framework. onload = function(){
var oDiv = document .getElementsByTagName('p')[0];
          var timer;
function getStyle(obj,name){
//currentStyle: current Style
if(obj.currentStyle){
return obj.currentStyle[name];//Nicht kompatibel mit Google und Firefox
}else{
//getComputedStyle: berechneter Stil
return getComputedStyle(obj,false)[name];//Nicht kompatibel mit IE8--
}
}
//complete = dur,easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var komplett = komplett ||.
komplett.dur = komplett.dur || count = parseInt(complete.dur/30);//Gesamtzeiten
var start = {};//{width:300,height:300}
var dis = {};
//{ width:300,height:300}
for(var name in json){
start[name] = parseFloat(getStyle(obj,name)) ;
dis[name] = json[name] - start[name];
}
var n = 0;//Aktuelle Anzahl der Schritte
obj.timer = setInterval(function(){
n++;
for(var name in json ){
var a = n/count;
switch(complete.easing){
case 'linear':
var cur = start [name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[name] ;
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})
}})
}

}

Das obige ist der detaillierte Inhalt vonJavascript-Motion-Framework-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!