• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

meine animation Funktion bitte testen

J

Jonny2009

New member
Anhang anzeigen animation.zip

Hallo Leute, ich habe mal mein eigene animation Funktion geschrieben,
vielleicht kann Sie ja jemand gebrauchen, ich weiss, bitte nicht schreiben so Kommentare
wer brauchten so ein Dreck es gibt doch jQuery ^^.
Nur falls jemand interesse hat und es jemand gebrauchen kann :),
falls es jemand testet wären Fehlermeldungen und Vorschläge auch gerne willkommnen.

Unterstützt werden folgende Animationen

opacity,
width,
borderWidth,
borderTopWidth,
borderBottomWidth,
borderLeftWidth,
borderRightWidth,
padding,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
margin,
marginTop,
marginBottom,
marginLeft,
marginRight,
fontSize,
moveUp,
moveDown,
moveLeft,
moveRight,
moveToElement,
moveToPosition,
left,
top,
moveToAbsolutePosition,
moveXToAbsolutePosition,
moveYToAbsolutePosition


aufgerufen wird eine Animation folgendermassen:

animation ( {
elem: ....,
duration: 5000,
easing: animation.ease.bounceOut,
// gewünschte Animation folgen hier
})

elem = ein oder mehrere Elemente zum Beispiel mit document.getElementById("") oder getElementsByTagName usw.
wenn nur ein Element, kann es normal übergeben werden, mehrere Element werden als Array übergeben

duration = dauer der Animation,

easing = gewünschtes Easing, sind noch nicht viele, werde jetzt noch ein paar dazubauen

begin = Callback Funktion bevor die Animation beginnt

complete = Callback Funktion wenn die Animation zuende ist


Eine Animation stoppen, pausieren oder resumen:

Gestoppt wird eine Animation so:

möchte man zum beispiel opacity Animation stoppen
animation.stop ( element, "opacity" );


Pausiert wird eine Animation so:

möchte man zum beispiel opacity Animation pausieren
animation.pause ( element, "opacity" );

dasselbe mit dem resumen möchte man ein Element wieder resumen:
animation.resume ( element, "opacity" );


Wiegesagt vielleicht kann es ja einer gebrauchen und über Fehler oder ander Vorschläge würde ich mich auch sehr freuen :)

LG
Jonny
 
meine animation Funktion bitte testen, DAnKE :)

Anhang anzeigen animation.zip


Hallo Leute, ich habe mal mein eigene animation Funktion geschrieben,
vielleicht kann Sie ja jemand gebrauchen, ich weiss, bitte nicht schreiben so Kommentare
wer brauchten so ein Dreck es gibt doch jQuery ^^.
Nur falls jemand interesse hat und es jemand gebrauchen kann :),
falls es jemand testet wären Fehlermeldungen und Vorschläge auch gerne willkommnen.

Unterstützt werden folgende Animationen

opacity,
width,
borderWidth,
borderTopWidth,
borderBottomWidth,
borderLeftWidth,
borderRightWidth,
padding,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
margin,
marginTop,
marginBottom,
marginLeft,
marginRight,
fontSize,
moveUp,
moveDown,
moveLeft,
moveRight,
moveToElement,
moveToPosition,
left,
top,
moveToAbsolutePosition,
moveXToAbsolutePosition,
moveYToAbsolutePosition


aufgerufen wird eine Animation folgendermassen:

animation ( {
elem: ....,
duration: 5000,
easing: animation.ease.bounceOut,
// gewünschte Animation folgen hier
})

elem = ein oder mehrere Elemente zum Beispiel mit document.getElementById("") oder getElementsByTagName usw.
wenn nur ein Element, kann es normal übergeben werden, mehrere Element werden als Array übergeben

duration = dauer der Animation,

easing = gewünschtes Easing, sind noch nicht viele, werde jetzt noch ein paar dazubauen

begin = Callback Funktion bevor die Animation beginnt

complete = Callback Funktion wenn die Animation zuende ist


Eine Animation stoppen, pausieren oder resumen:

Gestoppt wird eine Animation so:

möchte man zum beispiel opacity Animation stoppen
animation.stop ( element, "opacity" );


Pausiert wird eine Animation so:

möchte man zum beispiel opacity Animation pausieren
animation.pause ( element, "opacity" );

dasselbe mit dem resumen möchte man ein Element wieder resumen:
animation.resume ( element, "opacity" );


Wiegesagt vielleicht kann es ja einer gebrauchen und über Fehler oder ander Vorschläge würde ich mich auch sehr freuen :)

LG
Jonny
 
sry ist eigentlich eine .rar datei, konnte sie aber nicht hochladen, deswegen hab ich sie in .zip unbenannt, weil ich kein zip drauf habe :S.

Ich dachte es lässt sich auch so öffnen, ich hoffe du kannst .rar dateien öffnen ansonsten versuch ich sie nochmal im zip format hochzuladen.

Gruß
Jonny
 
OK - jetzt funktioniert's.

Hab' auch schon reingesehen und ein paar Dinge gefunden - bin aber noch nicht ganz durch und wollte jetzt schlafen. Schau' mir das morgen mal genauer an.
 
AW: meine animation Funktion bitte testen, DAnKE :)

sry, das erstemal wurde es verschoben, und ich dachte ich hätte einen fehler gemacht :S
 
AW: meine animation Funktion bitte testen, DAnKE :)

Ich hatte Deinen Thread verschoben!
Und meiner Meinung nach in das richtige Subforum.
Deswegen führe ich jetzt Deine Threads zusammen.
 
So:
Was mir bis jetzt aufgefallen ist:
animation.base.js:
  • animate ist kein Konstruktor, sondern eine normale Funktion
  • Warum führst du die neue Variable _properties ein? Wenn properties ein Objekt ist (was ja der Normalfall sein sollte), enthalten diese beiden Variablen immer exakt den gleichen Inhalt.
  • Warum verwendest du bei Zugriffen auf Objekteigenschaften immer Schema 4 und nicht die Standard Punktnotation?
  • Die Kommentare in Zeile 27 und 29 sind falsch.
  • Die Struktur deiner easing-Funktionen finde ich etwas unpraktisch. Ich hätte den Funktionen nur einen Parameter übergeben (eine Zahl zwischen 0 und 1 - 0 für den Anfang und 1 für das End) und die würde dann auch eine Zahl zwischen 0 und 1 zurückgeben.
  • Deine for... in-Schleife in Zeile 49 prüft nicht, ob _key wirklich ein Schlüssel im Objekt ist und nicht etwa im .prototpye => ein if mit .hasOwnProperty
  • In der Funktion animation.getElemList ist die Variable _elem_list_index überflüssig - dafür gibt es ARRAY.push(). Auch die Variable _elem_index ist eigneltich nicht nötig, da i schon die komplette Information enthält.
  • Ich würde ja bei falschen Aufrufparametern einen Fehler werfen und nicht einfach ein return false;
  • Auch animation.elem_index ist überflüssig - das kannst du doch mit animation.elem.length abfragen.
  • In animation.isElementSet (du solltest konsinstent entweder immer elem oder element schreiben und nicht mischen!) ist auch _element und _action überflüssig.
  • In animation.exec ist _last_execute_time nicht der letzte Ausführungszeitpunkt, sondern die Zeitdifferenz zum letzten Ausführungszeitpunkt. Der Variablenname ist also irreführend. (Nicht so bei der Objekteigenschaft "last_execute_time").
  • Das "judderFree"-Zeugs finde ich unnötig. Wenn der Browser nicht hinterherkommt hast du immer einen störenden Effekt - entweder du hast dieses Springen, das du verhindern willst, oder der Übergang ist nicht mit einer glatten Geschwindigkeit, das (meiner Meinung nach) viel mehr stört.
  • window.setTimeout würde ich nicht mit einem Zeiparameter von 0 aufrufen - manche Browser feuern da dann so früh wie möglich (damit braucht deine Animation unnötige Ressource, da das Menschliche Auge das nicht auflösen kann) und manche verwenden da dann einen Defaultwert (meistens 10). Wenn du etwas haben willst, das die meisten Browser auf den meisten Maschinen auflösen können, würde ich sowas wie 25ms nehmen - das liegt dann immer noch unter 25fps.
  • Du scheinst Funktionsparameter immer in eine lokale Variable zu kopieren. Warum? Das ist ziemlich sinnfrei.
  • In animation.set prüfst du nicht, ob properties auch wirklich nicht NULL ist.
  • _elem_list_index ist wieder überflüssig.
  • Du solltest allgemein immer alle for...in -Schleifen mit einem .hasOwnProperty überprüfen.
  • Warum speicherst du in animation.set das Element, das du gerade bearbeitest in _properties.elem?
  • Insgesamt solltest du animation.set nicht öffentlich zugänglich machen oder als private Methode markieren.
  • Auch animation.pause_queue_inde ist überflüssig...
  • Ein Timeout nur für die Pause zu setzten, halte ich für keine gute Idee - hab' auch nicht ganz verstanden, warum du das machst...
  • Der Kommentar zu animation.resume ist falsch...
  • Insgesamt würde ich dem Code einen eigenen Scope spendieren - dann kannst du auch private Funktionen und Variablen definieren.

animation.ease: Das Funktionsinterface hab' ich ja schon oben angesprochen. Hier finde ich die Funktionen etwas konfus - bin mir auch nicht sicher, ob die wirklich immer das tun, was du haben willst. Es geht ja im Grunde genommen nur um Funktionen die von [0,1] auf [0,1] abbilden. Das kann man im Code auch so schreiben, dass man die Rechenregeln sofort kapiert.

Das Grundprinzip, für jede CSS-Eigenschaft eine eigene Animation registrieren zu müssen halte ich auch nicht so besonders toll. Für Spezialfälle eine Schnittstelle bereitzustellen ist ja gut, aber die Animation von top unterscheidet sich ja nicht wirklich von der Animation von margin-top - außer, dass die CSS-Eigenschaft anders heißt.
 
Hi, super das du dir meinen Code mal vorgenommen hast,
erstmal ein paar Antworten, hab es jetzt noch nicht so ganz durchgelsen, ist spät, mache ich morgen.

Das animation eine normale Funktion ist, ist richtig, ich dachte aber wenn man es als Klasse abbilden kann,
da ja dann wohl eigenschaften und Funktion nach der animation Deklaration anheften kann aller animation.eigenschaftOderFunktion,
in diesem Fall wäre ja wenn man an Klassen denkt animation der Konstruktor, oder hab ich da was falsch verstanden :p.

Schema 4 wird eigentlich nur für mich aus leserlichen Gründen verwendet, manch anderer sieht das genau andersherum das ist denke ich mal Geschmacksache,
aber ich ändere meinen Still schön öfter mal, demnächst vielleicht wieder mit . Notation.

Mit den Easing Funktionen hast du auch vollkommen recht, doch hab ich sie mir von jemand kopiert, da mir der Rechnerische Teil doch etwas schwer fällt ^^,
die tun aber immer ganau das was man will, schon öfter getestet, klar mit deiner Methode wäre es besser, aber wär rechnet mir das um ^^.

Zur der Sache die du bemängelt hat mit Array.push oder die Variablen die ich mit .length abfragen kann, das mache ich aus dem Grund weil Array push morzmässig
langsam ist, auch wenn es nicht spürbar ist in dem Moment, doch vermeide ich eben die ermittlung von .length die auch Zeit kosten kann und .push mit den Zusatzvariablen.
Probier es mal aus, mach mal eine schleife mit array.push mit keine Ahnung 1000 mal und ermittle dann mal die .length die Anzahl und danach probier es mal mit meiner
Methode, das ganze geht im ein vielfaches schneller als mit den Standard Methoden.

Das mit elem oder element hat seinen Grund, elem können mehrere oder nur 1 element sein, element ist immer nur auf 1 bezogen.

ich kopiere dann die Parameter in eine lokale Variable, damit ich sie wie bei _properties = properties || false; abfragen kann,
dann kann ich ja abfragen ob diese false ist oder gesetzt wurde.

animation.set muss nicht mehr prüfen ob properties null ist, das macht ja die animations Funktion bevor die Animationen gestartet werden.

Zur frage warum ich das Element was ich gerade bearbeite in _properties.elem abspeichere,
Das hat den Sinn weil dann die Callback Funktion .setProperties der jeweilig reistrieten Funktion aufgerufen wird wo dann für das jeweilige Element
die Eigenschaften gesetzt werden können, dazu muss man ja auch identifizieren können um welches Element es sich handelt.

Der Timeout der Pause Funktion hat den Zweck, da ich ja nur einen Timeout habe den ich nicht stoppen kann,
durchläuft wird die Animation eventuell gerade durchlaufen so befindet sich das Element ja nicht in der Pause,
um sicherzustellen ob das Element die Animation durchlaufen hat, wird der Timeout solange ausgeführt und geprüft
ob sich das Element in der Pause befindet, da ich ja komplett vermeiden wollte das ich mehrere Timeouts brauche
habe ich auch die pause_queue, da Javascript ja aber Singlethreatet ist, ist dies wohl wirklich sinnlos ^^
Aber nur mal um zu Erleutern was ich damit bezwecken wollte,
also befindet sich ein Element in einer Animation wie moveDown, ruft z.B. währen dessen moveup auf so
wird das Element erstmal in die Pause vesetzt und die aktuellen daten von animation.elem also die Eigenschaften
ersetzt da dort auch die aktuelle Position gespeichert wird und ich diese dann wieder als start Position setze,
so muss ich ja sicher gehen das die Pause eingetreten ist, denn wird dann noch ein durchlauf gemacht,
stimmen ja die Position usw. nicht mehr, die neu gesetzt wurden.

mit dem judderFree da hast du auch vollkommen recht ist eigentlich auch nur testweise gewesen, naja manchmal ist das
aber doch ganz Praktisch, da zum Beispiel wenn ein Alert auftritt die animation sonst ganz durchgelaufen sein kann, oder
wenn du während einer Animation z.B. auf nen anderen Tab klickst und ein paar sekunden wieder daraufklicks die Animation zuckt
bis zu dem Punkt wo sie dann sein sollte, als zum Beispiel sieht mann wenn man ein Element bewegt von links nach rechts
und klickt auf einen anderen tab, nach ein paar Sekunden wieder zurück klickt, erst kurz rechts noch und dann auf einmal
an der Endposition also es zuckt dann so, mit judderFree zieht das Element dann genau von der Stelle weiter bei der man den Tab
verlassen hat, oder nachdem das Alert weggeklickt wurde.
Das ruckeln kann man leider nie ganz verhindern das weiss ich :S leider.

Das mit dem Scope ist eine sehr gute Idee und werde ich auch noch machen.

Das mit dem für jede CSS - Eigenschaft eine eigene Animation zu registrieren hab ich mir dann auch gedacht,
denn solange es sich um zahlen handelt, ist die Animation im Prinzip fast immer identisch,
ausnahmefälle, sind dann Animationen für die Farbe, da dort ja 3 Werte ermittellt werden müssen.
oder Animation wie moveToAbsolutePostion die ja keiner css Eigneschaft entsprechen.


Ich finde es super das du dich meinem Code so gewiddmet hast, und freue mich wirklich sehr über deine Antwort,
da ich sehr viel von deiner Meinung halte, vielen Dank.

Liebe Grüße
Jonny
 
Jonny2009 schrieb:
Das animation eine normale Funktion ist, ist richtig, ich dachte aber wenn man es als Klasse abbilden kann,
da ja dann wohl eigenschaften und Funktion nach der animation Deklaration anheften kann aller animation.eigenschaftOderFunktion,
in diesem Fall wäre ja wenn man an Klassen denkt animation der Konstruktor, oder hab ich da was falsch verstanden :p.
Zum Vergrößern anklicken....
animation wäre dann aber eine Klasseninstanc und kein Konstruktor.

Jonny2009 schrieb:
Mit den Easing Funktionen hast du auch vollkommen recht, doch hab ich sie mir von jemand kopiert, da mir der Rechnerische Teil doch etwas schwer fällt ^^,
die tun aber immer ganau das was man will, schon öfter getestet, klar mit deiner Methode wäre es besser, aber wär rechnet mir das um ^^.
Zum Vergrößern anklicken....
regularIn/-Out/-InOut sollten quadratische Funktionen sein - bounceOut sind drei Parabeln hintereinander.

Jonny2009 schrieb:
Zur der Sache die du bemängelt hat mit Array.push oder die Variablen die ich mit .length abfragen kann, das mache ich aus dem Grund weil Array push morzmässig
langsam ist, auch wenn es nicht spürbar ist in dem Moment, doch vermeide ich eben die ermittlung von .length die auch Zeit kosten kann und .push mit den Zusatzvariablen.
Probier es mal aus, mach mal eine schleife mit array.push mit keine Ahnung 1000 mal und ermittle dann mal die .length die Anzahl und danach probier es mal mit meiner
Methode, das ganze geht im ein vielfaches schneller als mit den Standard Methoden.
Zum Vergrößern anklicken....
ich weiß ja nicht, in welchem Browser du das getestet hast, aber in meinem FF ist ARRAY.push() ungefähr 15% schneller (im IE sogar noch mehr). Mein TestCode:
Code: 
var a = [];
var r = 100000;
var t = new Date();
for (var i = r; i >= 0; --i){
    a.push(i);
}
console.log(new Date() - t);
a = [];
var index = 0;
t = new Date();
for (var i = r; i >= 0; --i){
    a[index] = i;
    index++;
}
console.log(new Date() - t);


Jonny2009 schrieb:
ich kopiere dann die Parameter in eine lokale Variable, damit ich sie wie bei _properties = properties || false; abfragen kann,
dann kann ich ja abfragen ob diese false ist oder gesetzt wurde.
Zum Vergrößern anklicken....
Die Überprüfung kannst du dann auch gleich mit
Code: 
if (properties){...}
machen... ich sehe den Punkt nicht.

Jonny2009 schrieb:
animation.set muss nicht mehr prüfen ob properties null ist, das macht ja die animations Funktion bevor die Animationen gestartet werden.
Zum Vergrößern anklicken....
Dann solltest du sie privat machen.

Jonny2009 schrieb:
Zur frage warum ich das Element was ich gerade bearbeite in _properties.elem abspeichere,
Das hat den Sinn weil dann die Callback Funktion .setProperties der jeweilig reistrieten Funktion aufgerufen wird wo dann für das jeweilige Element
die Eigenschaften gesetzt werden können, dazu muss man ja auch identifizieren können um welches Element es sich handelt.
Zum Vergrößern anklicken....
Ach so - ich hatten den Callback übersehen.

Jonny2009 schrieb:
Der Timeout der Pause Funktion hat den Zweck, da ich ja nur einen Timeout habe den ich nicht stoppen kann,
durchläuft wird die Animation eventuell gerade durchlaufen so befindet sich das Element ja nicht in der Pause,
um sicherzustellen ob das Element die Animation durchlaufen hat, wird der Timeout solange ausgeführt und geprüft
ob sich das Element in der Pause befindet, da ich ja komplett vermeiden wollte das ich mehrere Timeouts brauche
habe ich auch die pause_queue, da Javascript ja aber Singlethreatet ist, ist dies wohl wirklich sinnlos ^^
Zum Vergrößern anklicken....
bis auf das letzte, dem ich zustimme, habe ich diesen Satz nicht wirklich verstanden...

Jonny2009 schrieb:
Aber nur mal um zu Erleutern was ich damit bezwecken wollte,
also befindet sich ein Element in einer Animation wie moveDown, ruft z.B. währen dessen moveup auf so
wird das Element erstmal in die Pause vesetzt und die aktuellen daten von animation.elem also die Eigenschaften
ersetzt da dort auch die aktuelle Position gespeichert wird und ich diese dann wieder als start Position setze,
so muss ich ja sicher gehen das die Pause eingetreten ist, denn wird dann noch ein durchlauf gemacht,
stimmen ja die Position usw. nicht mehr, die neu gesetzt wurden.
Zum Vergrößern anklicken....
Aber beim Pausieren entfernst du doch das Element aus der Animations-queue. Warum sollte das dann nocheinmal durchlaufen werden?

Jonny2009 schrieb:
Das mit dem für jede CSS - Eigenschaft eine eigene Animation zu registrieren hab ich mir dann auch gedacht,
denn solange es sich um zahlen handelt, ist die Animation im Prinzip fast immer identisch,
ausnahmefälle, sind dann Animationen für die Farbe, da dort ja 3 Werte ermittellt werden müssen.
oder Animation wie moveToAbsolutePostion die ja keiner css Eigneschaft entsprechen.
Zum Vergrößern anklicken....
Farben sind natürlich Sonderfälle. moveToAbsolutePosition finde ich überflüssig... aber das ist Geschmackssache.

Jonny2009 schrieb:
Ich finde es super das du dich meinem Code so gewiddmet hast, und freue mich wirklich sehr über deine Antwort,
da ich sehr viel von deiner Meinung halte, vielen Dank.
Zum Vergrößern anklicken....
Bitte - gern geschehen.
 
Hi kapsner, ja das mit den lokalen Variable ist völlig richtig, werde ich auch wieder abändern, wiegesagt hatte lange Zeit nicht mehr programmiert :)

Nein beim pausieren wird das Element nicht aus der Animations queue entfernt, die Eigenschaft pause und is_pause werden auf true gesetzt
und das Element wird solange übersprungen bis es wieder resumed wird.

also ich habe das ganze nun so getestet:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Insert title here</title>
		<script type="text/javascript">			
		window.onload = function () {
			var a = [];
			var r = 1000000;
			var t = new Date().getTime();
			for (var i = r; 0 <= i; --i){
			    a.push(i);
			}
			document.getElementById("test").innerHTML = (new Date().getTime() - t);
			a = [];
			var index = 0;
			t = new Date().getTime();
			for (var i = r; 0 <= i; --i){
			    a[index] = i;
			    index++;
			}
			document.getElementById("test2").innerHTML = (new Date().getTime() - t);
		}	
		</script>
	</head>
	<body>
		<div id="test">
		</div>
		<div id="test2">
		</div>
	</body>
</html>

Und bei mir ist die 2te Variante bis auf den IE schneller, warum weiss ich nicht, vielleicht
weils lokal ist.


Mir der Pause ist das so,
also ein Element läuft bereits in einer MoveDown Animation, das Element bekommt bei jedem
durchgang die aktuelle Position mitgeteilt animation.elem[ index ]["actual_position"] zum Beispiel,
wenn ich nun das Element während dieser Animation in eine MoveUp Animation umwandele,
so wird das Element erstmal Pausiert, nun brauche ich ja wieder die aktuelle Position
da ich den Timeout nicht stoppen kann, da er für alle Animationen läuft kann es ja sein das die Animation
gerade durchläuft und die ["actual_position"] nochmal geändert wird, damit ich 100 % weiss das
das Element in der Pause ist, kann man der Pause Funktion ja auch einen Callback mitgeben,
um sozusagen 100% die aktuelle position ermitteln zu können, wenn sie sich nochmal ändern
würde so würde die neu zugewiesene Animation moveUp eine falsche aktuelle position bekommen
und das ganze würde nicht rund sein, ich hoffe das war jetzt einigermassen verständlich ^^.

Jaja so ist das :), und wie gefällt dir ansonsten mein programmierstil, ich weiss auch nicht, ich
kann mich nie so richtig entscheiden,
eigentlich hatte ich meinen festen programmierstil, wenn man dann aber irgendwo arbeitet
haben die auch wieder Konventionen und auf diese muss man sich einstellen,
so das sich mein Stil desöfteren mal geändert hat, kennst du das, ich finde es ist
nichts schwieriger seine alten angewohnheiten gerade was den Stil angeht ändern zu müssen.

Vielen Dank :)
 
Das mit dem push ist irgendwie seltsam... hab' gerade noch einmal intensiver getestet:
Code: 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">			
		window.onload = function () {
			
			var a, b, i, t, time, index = 0;
			var r = 1000000;
			a = new Array(r);
			
			a = [];
			t = new Date();
			for (i = r; 0 <= i; --i){
			    a[index] = i;
			    index++;
			}
			time = (new Date() - t);
			document.getElementById("index").innerHTML = time;

			a = [];
			t = new Date();
			for (i = r; 0 <= i; --i){
			    a.push(i);
			}
			time = (new Date()- t);
			document.getElementById("push").innerHTML = time;
			
			a = [];
			t = new Date();
			for (i = r; 0 <= i; --i){
			    a[a.length] = i;
			}
			time = (new Date()- t);
			document.getElementById("length").innerHTML = time;

		}	
		</script>
	</head>
	<body>
		push: <span id="push"></span>ms<br>
		index: <span id="index"></span>ms<br>
		length: <span id="length"></span>ms
	</body>
</html>
letzte Variante ist in allen Browsern, die ich getestet habe, die Schnellste (außer ich Chrome, da ist es jedesmal eine andere...). Warum push jetzt im FF plötzlich so lahm ist, weiß ich auch nicht... vielleicht, weil ich's vorher in der Konsole getestet habe.

Warum du für die Pause dann einen wiederholten Timeout brauchst ist mir immer noch nicht wirklich klar.
 
Ich glaube das ausschlagebende ist ich teste im ms bereich du glaube ich in Sekunden, da ist das ganze dann nicht mehr so genau gewesen,
rein von der Überlegung kann meine Methode nur die schnellere sein, weil array.push ja erst wieder die länge des Arrays ermitteln muss um
das Element dann anzuhängen, bei meiner Methode ist der Index ja nun schon bekannt, logisch oder??

Also das mit der Pause währe nur sinnvoll wenn javascript nicht singlethreated wäre,
Es kann ja sein das eine Animation in der Pause haben will, die JsEngine durchläuft gerade aber einen Animationsdurchgang,
so muss ich ja feststellen wann der Animationsdurchlauf fertig ist um sagen zu können das das Element wirklich in der Pause ist,
deswegen der Timeout, ist das Element noch im durchlauf ist, wird die Funktion nochmal wiederholt, bis der durchlauf beendet ist
ist die Animation dann durchlaufen wird.

Du kannst es dir ja mal genauer betrachten,
wen animation.pause aufgerufen wird, wird für das jeweilige Element die Eigenschaft pause = true gesetzt,
in der Funktion animation.exec kannst du dann sehen das geprüft wird vor dem Durchlauf der Animation geprüft ob pause gesetzt ist
wenn ja wird die Eigenschaft is_pause auf true gesetzt, die Funktion animation.checkPause prüft dann nur noch ob die Eigenschaft is_pause
true ist, wenn ja wird wenn vorhanden der angegebene Callback ausgeführt, auch wenn Javascript singlethreated ist, läuft die Funktion manchmal
2 mal durch also wurden noch nicht alle angegebenen Animationen in die Pause geschickt, ich hab das mal ausgiebig geprüft, sehr merkwürdig aber es
ist so ^^
 
So nun bin ich auch Durcheinander, hab dein Besipiel auch gerade nochmal getestet,
kann ich mir ja garnicht erklähren wiese die length methode die schnellste ist :S

so gleicht es sich aber wieder ein bisschen aus, so das meine Methode ab und zu mal schneller ist.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         
        window.onload = function () {
            
            var a, b, i, t, time, index = 0;
            var r = 1000000;
            a = new Array(r);
            

            a = [];
            t = new Date();
            for (i = r; 0 <= i; --i){
                a[a.length] = i;
            }
            time = (new Date()- t);
            document.getElementById("length").innerHTML = time;

            a = [];
            t = new Date();
            for (i = r; 0 <= i; --i){
                a[index] = i;
                index += 1;
            }
            time = (new Date() - t);
            document.getElementById("index").innerHTML = time;

            a = [];
            t = new Date();
            for (i = r; 0 <= i; --i){
                a.push(i);
            }
            time = (new Date()- t);
            document.getElementById("push").innerHTML = time;
            
        }   
        </script>
    </head>
    <body>
        push: <span id="push"></span>ms<br>
        index: <span id="index"></span>ms<br>
        length: <span id="length"></span>ms
    </body>
</html>

Aber wie nun in Zukunft machen, ich denke in den heutigen Zeiten, und auch in dem MS Bereich, glaube ich
mittlerweile das die push Methode doch die bessere ist, man spart unnötige Vars ein,
und push ist die schönste Variante, obwohl die .length Variante mir dann doch auch sehr gut gefällt :)
ich denke der ms Bereich ist so uninteressant wie sonst was ^^ wir nehmen es da wohl etwas zu genau
solange das nicht ins Gewicht fällt ist es einfach nurn Geschmackssache und gehört zur Microoptimierung

Warum initialisierst du
a = new Array(r);

du kennst die Nachteile ^^ gelle einfach mit [] initialisieren was du im nächsten schritt auch machst also da unnötig ^^,
lass es mal weg und prüf dann nochmal, ich glaube es kostet auch Zeit weil ein Array mit 1000000 stellen beeitgestellt wird.
 
Jonny2009 schrieb:
Es kann ja sein das eine Animation in der Pause haben will, die JsEngine durchläuft gerade aber einen Animationsdurchgang,
Zum Vergrößern anklicken....
wenn du die pausefunktion aufrufst, befindest du dich nicht in einem Animationsdurchgang, es sei denn du rufst pause aus diesem heraus aus.
und selbst wenn du das machst, sollte das doch egal sein.

insgesammt, beim flüchtigen draufsehen, scheint mir das mit deiner pause-steuerung recht kompliziert und dadurch unübersichtlich zu sein.
wozu brauchst du überhaupt pause? start, stop, resume sollte doch ausreichen.
 
Mir erscheint das ganze auch sehr fett - ich bastel gerade an etwas ähnlichem und meine tween.js Datei ist, inklusive einer Reihe easing Funktionen und einem Helferobjekt, weniger als 7KB gross. Bei dir sind es deutlich mehr.

Hier mal eine Testseite http://static.jstruebig.de/tween.html
(ich spiel aber noch dran rum und es sind ein paar überflüssig Funktionen dabei)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben