meine animation Funktion bitte testen

[Jonny2009]

Hi Leute,
ja das ganze ist übergepackt, jede Zeile dient aber ihrem Zweck, so denke ich, sonst hätte ich sie nicht geschrieben,
naja das mit der pause ist eben doch anders, wenn ich 10 Animationen in die Pause schicke, so läuft checkPause 2 mal
das heisst das noch nicht jedes Element, das pause = true besitzt, dieses auch die Eigenschaft is_pause = true besitzen muss
das würde doch bedeuten, das mindestens ein Element sich noch in einem durchgang befinden würde, oder?

Ja Pause und Resume arbeiten ja zusammen, sonst müsste ich wenn ich stoppe, die Daten für dieses Element irgendwo zwischenspeichern
um bei einem resume dort wieder fortzufahren wo gestoppt, pause gemacht wurde.


@ein schlauer,
ja wiegesagt aus meiner sicht hat beim programmieren jeder Zeile einen Sinn ergeben, deswegen stell ich es hier rein ,
sicherlich ist das ganze noch um einiges verbesserbar, ich muss nur darauf hingewiesen werden weil ich selbst es eben dann
nur schwer erkenne was überflüssig ist und was nicht, kannst ja mal schreiben was aus eurer Sicht her am Code überflüssig eerscheint.

Aber so um großen und ganzen scheint mir dein Script nicht rund zu laufen was zu erkennen ist wenn man schnell nacheinander mehrmals
auf die Elemente klickt, dann hackt das ganze und sieht unrund aus.
Ich hab das ganze mal mit meinen Funktionen hochgeladen, oder hast du das absichtlich so unrund gemacht?
Desweiteren benutzt du für deine Animationen pro Animationen eine setInterval,
so hatte ich das auch schon vor längerer Zeit mal gemacht, Sinn und Ziel der jetzigen Animations Funktion
war es insgesammt eben nur einen setTimeout zu verwenden, da diese bei mehreren ab 10 Stück
oder mehr Animationen ganz schöne Performance einbussen haben,
desweiteren war mir noch wichtig, wenn ich mal wieder eine Animation brauche, die etwas anderes beeinflusst,
nur ein plugin schreiben kann, ohne die gesammten Funktionen kennen zu müssen ^^.
Das kostet natürlich auch alles Code, und die Kommentare werden auch schon einiges an Größe,
ich werde das ganze mal minimieren, mal schauen wie Groß die Dateien dann noch sind,
schau dir das ganze mal mit meinen Funktionen an bekommst du das mit deinen Tweening Funktionen momentan auch
so rund hin?
Anhang anzeigen meinTween.zip

Vielen Dank für eure Antworten
Jonny

 

[ein schlauer]

Du meinst vermutlich die ease Funktion elasticEaseOut - dann sieht es aus wie ein Flummi der aufdotzt.

Ich hab die von Robert Penner http://www.robertpenner.com/easing/ in dem Beispielkapitel steht wie die aufgebaut sind und ich habe die in JS übertragen: static.jstruebig.de/inc/math.js (math ist ein blöder Name, eigentlich müßte das Objekt ease heißen o.ä)

EDIT: ach ich sehe was du meinst. Ja, das liegt an den test, die rewind() Funktion ist buggy

 

[tsseh]

nicht jedes Element, das pause = true besitzt, dieses auch die Eigenschaft is_pause = true besitzen muss

ja, weil du pause und is_pause in unterschiedlichen ablaufebenen setzt und dann noch einen weiteren timeout mit checkpause startest, das macht es ja gerade erst kompliziert.
pause muss doch nur dafür sorgen, daß die berechnungsfunktionen derjenigen animationen nicht mehr aufgerufen werden. da reicht ein flag.

Ja Pause und Resume arbeiten ja zusammen, sonst müsste ich wenn ich stoppe, die Daten für dieses Element irgendwo zwischenspeichern
um bei einem resume dort wieder fortzufahren wo gestoppt, pause gemacht wurde.

die animation startet doch ausgehend von den aktualwerten des elements(position, farbe, was auch immer) und läuft bis zu den übergebenen zielwerten?
da musst du doch nichts zwischenspeichern, da deine neuen startwerte beim resume die aktualwerte sind.

 

[Jonny2009]

ja aber dein elasticEaseOut finde ich auch sehr cool, das gefällt mir.

Naja ich hab das ganze nicht als new Klasse gebaut, das kostet auch ne menge an codezeilen, hätte aber in dem Fall keinen, und vorallem kann ich this nicht nutzen,
und muss so immer animation.xxxx schreiben was auch wieder code kostet, naja die größe muss noch minimiert werden.

Aber zum Beispiel, wenn ich nun im IE die Farbe "blue" setze, egal was als hintergrundfarbe als textfarbe....
so kann deine Funktion garnicht die richtige Farbe ermittlen, ich hab da noch die farb namen integriert, was auch saumässig viel code braucht ^^,
so kann ich diese aber auch angeben z.B. animation({ backgroundColor: "black", color: "blue"}) usw.
es wird halt auch auf alle Eventualitäten eingegangen :S.
Wiegesagt es wird noch minified,
auch jQuerys animate Funktionen laufen oftmals nicht rund, zum Beispiel wenn ein border größer als 1px oder 2px ist, so zu Beispiel 10 px und man
diesen dann in der breite animieren will so läuft es nicht ganz rund,
es gibt da noch mehr bugs hab sie jetzt nur leider nicht im Kopf deswegen wollte ich das ganze nochmal reprogrammieren, ich hatte es zwar schonmal
eben nur sehr sehr unschön und wollte es um meine programmierkenntnisse mal wieder aufzufrischen nochmal neu proggen .

 

[Jonny2009]

@hesst
mit der Pause hasst du eigentlich vollkommen recht ich fand es auch schöner wenn es nur das Pause flag gegeben hätte, ich speichere aber in animation.elem[index]["actual_position"] und muss deswegen feststellen das actual_position nicht mehr verändert wird, denn ich lese aus dieser Eigenschaft wieder die aktuelle Position aus,
wenn der Durchlauf aber noch nicht beendet ist und die Animation noch läuft also actual_position noch geändert werden kann hielt ich dies eben für notwendig, is_pause
wird ja erst gesetzt wenn der durchlauf tatsächlich beendet wurde.

was die Pause Funktion an sich angeht, so hast du mit den Startwerten auch recht, aber die Endwerte benötige ich doch auch, woher bekomme ich die dann bei einem resume?

 

[ein schlauer]

Ich hab's umgeschrieben und an dein Beispiel angepaßt (inkl 10px Border).

Ich finde aber schon dass 77 KB im gegensatz zu 7 KB viel Holz ist.

Die Klasse bietet sich an, da diese für alle Abläufe verwendet werden kann. Ich hab das vorhin schnell mit 2 Klassen gelöst, um eine Animation in der Größe und Breite umzusetzten. Es soll aber aus der Tween Klasse eine Ableitung entstehen, in der dann mehrere Abläufe parallel umgesetzt werden. Dafür hab' ich aber im Moment keine Zeit.

Alles in allem sieht dein Code sehr umständlich aus, aber mir ist das im Augenblick zuviel um da mal genauer drüber zu schauen.

 

[tsseh]

ich speichere aber in animation.elem[index]["actual_position"]

auch gut, dann bleiben sie nach einem stop ja auch weiterhin darin stehen und du hast sie beim resume zur verfügung

und muss deswegen feststellen das actual_position nicht mehr verändert wird,

das verstehe ich nicht.

denn ich lese aus dieser Eigenschaft wieder die aktuelle Position aus,

ja genau.
stop setzt flag, berechnungsfunktion wird nicht mehr aufgerufen aktuelle Position steht noch in dieser Eigenschaft
resume nimmt flag weg, berechnungsfunktion wird wieder zyklisch aufgerufen und kann die aktuelle Position aus dieser Eigenschaft lesen

wenn der Durchlauf aber noch nicht beendet ist und die Animation noch läuft also actual_position noch geändert werden kann hielt ich dies eben für notwendig, is_pause
wird ja erst gesetzt wenn der durchlauf tatsächlich beendet wurde.

verstehe ich nicht, was heisst bei dir Durchlauf?
endwert erreicht? dann darfst du die berechnungsfunktion natürlich auch nicht mehr aufrufen, pause kommt dann allerdings zu spät, weil die animation beendet ist.
oder ein zyklus in der berechnung? den nächsten willst du ja mit pause überhaupt nicht mehr aufrufen.

was die Pause Funktion an sich angeht, so hast du mit den Startwerten auch recht, aber die Endwerte benötige ich doch auch, woher bekomme ich die dann bei einem resume?

die benötigst du doch so auch schon, also müssen sie irgendwo gespeichert sein

 

[Jonny2009]

@hesst
ah ok du meinst die pause funktion einfach in die stopp funktion umzuwandeln,
mit einem durchlauf meine ich das was in animation.exec passiert, alles in allem hast du da auch recht, und ich werde es dahingehend umschreiben,
im Grunde reicht es das pause flag zu setzen,
bei der stop funktion wollte ich das Element eben aus dem animation.elems entfernen, aber es ist wohl geschickter pause zu entfernen

@ein schlauer,
sry ich wollte dich damit nicht angreifen, nicht falsch verstehen, ich wollte damit nur ausdrücken das dein Code ja auch noch wächst,
und mal sehen wie groß es ist wenn es komplett fertig ist.
Mir war es eben wichtig das es nur einen Timeout insgesammt gibt anhand dessen die Animationen berechnet werden,


Desweiteren, werden die Packete move, resize usw. aufgelöst, und eine Standart .action und .setProperties Funktion integriert wird,
da für die meisten Animationen immer derselbe Ablauf erfolgt und wie kkapsner schon geschrieben hat, nur für sonderfälle wie die Farben usw.
eine seperate Animation eingefügt wird, das ganze dürfte dann auch nochmal einiges an Code sparen

 

[ein schlauer]

Die Klasse Tween wird sicher kaum noch erweitert. Das Schöne an dem Ansatz ist ja, dass du damit alle möglichen Arten von Animationen umsetzen kannst. Letztlich fehlt noch eine Klasse mit der mehrere Styleanimationen ausgeführt werden können, diese erbt dann aber von Tween. Insofern wird der Code nicht mehr viel größer.

Desweiteren, werden die Packete move, resize usw. aufgelöst, und eine Standart .action und .setProperties Funktion integriert wird,
da für die meisten Animationen immer derselbe Ablauf erfolgt und wie kkapsner schon geschrieben hat, nur für sonderfälle wie die Farben usw.
eine seperate Animation eingefügt wird, das ganze dürfte dann auch nochmal einiges an Code sparen

Das ist der Punkt, die Animation an sich bleibt gleich, nur die Werte werden anders berechnet. Daher hatte ich auch einen Eventansatz gewählt. Jede Erweiterung, hängt sich nur in diesem Event ein und folglich braucht jedes Tween Objekt auch nur einen Timer.

Ob es sinnvoll ist immer nur einen einzigen globalen Timer zu verwenden, weiß ich nicht. Ein Timer macht ja im Grunde nichts und der Browser sollte keine Probleme mit ein paar Tausend aufrufen haben.

[Ich fühl mich sicher nicht angegriffen, wir diskutieren hier ja keine persönlichen Dinge ]

 

[Jonny2009]

Ja ein Tween Object, braucht einen Interval, pro Animation brauchst du aber ein Tween Object oder??
SetInterval sowie SetTimeout sind echte performance bremsen, wenn du 10 oder mehr Animation hast die langsam
laufen bemerkst du es, habe es selber probiert.

Ich habe meine animation.base neu programmiert ist noch nicht ganz fertig aber fast und nun 8 kb Groß.

Alleine wenn man anstatt leerzeichen, tabs setzt, sind 3 KB gespart, und ohne Kommentare sind es nur noch 15,
und durch die umprogrammierung bis jetzt auf 8 kb reduziert, und ich denke da geht noch mehr ^^,
wenns fertig ist stelle ich es mal hier hoch.

 

[ein schlauer]

Nein, setInterval oder Timeout verbrauchen so gut wie keine Performance. Das sind ja nur Trigger für den Browser, davon kannst du viele tausend setzen, das sollten aktuelle Browser ohne Probleme meistern.
Zeit verbrauchen tun nur die Funktionen, die du im Interval ausführst.

 

[Jonny2009]

Hier das habe ich grade mal von einer Seite kopiert:

Timer kosten kostbare Zeit

setInterval und setTimeout werden für Animationseffekte benutzt. Jede dieser Methoden erzeugt einen zusätzlich Thread für jeden angelegten Timeout und wenn der Browser mehrere Timeouts simultan ausführt, geht die Performance den Berg runter. Mit ein oder zwei Timern ist das noch kein Problem, aber sobald es fünf oder zehn werden, wird der Geschwindigkeitsverlust sichtbar. Dazu kommt noch, dass Timer zur eval-Familie der Methoden gehören, so dass sie gleich vielfach ineffizient sind.

Das Zusammenlegen mehrerer Timern in einen Timer kann den Einsatz von Timeouts optimieren.

Da ein Timer i.A. den Code in gleicher Weise evaluiert wie die Methode eval, sollte so wenig Code wie möglich den den evaluierten Anweisungen stehen. Statt den gesamten Code innerhalb der Timeout-Anweisung zu schreiben, packt man ihn besser in eine separate Funktion und ruft die Funktion aus der Timout-Anweisung aus. Dabei können wir eine direkte Funktionen-Refernz anstelle eines evaluierten Strings benutzen. Wie beim Beseitigen der Ineffizienz von eval vermeidet dieser Ansatz auch die Erzeugung globaler Variablen innerhalb des evaluierten Codes.

 

[ein schlauer]

Das ist falsch. Es gibt keine Threads in JS

Nachtrag: Auch der Begriff eval Familie ist Quatsch.

 

[Jonny2009]

Nein das stimmt schon alles so, wie es geschrieben wurde,
es handelt sich ja um simultane threads keine wirklichen, da die Js Engine aber ständig überprüfen muss
ob der Timeout bzw. setInterval nun ausgeführt werden soll.
Simultan aus dem Grund durch die Verzögerte Ausführung des Codes kommt es einem vor als würde Javascript
mehrere Threads ausführen.

Und auch das mit der eval Familie ist richtig, warum sollte sonst folgendes Beispiel funktionieren???
window.setTimeout("alert(1+2)", 10);

Der String wird evaluiert, probier es selbst mal aus

[EDIT]
Hier ein besseres Beispiel das zeigt das setTimeout und Interval zur eval Familie gehören:
var b ="eins";
window.setTimeout("var a= {}; a.eins = 'Hier steht ein Beispieltext'; alert(a."+b+")", 10);

 

[ein schlauer]

Ich habe es ausprobiert, du kannst tausende Timeouts setzen ohne das ein Skript langsamer läuft.

onload = function() {
	
	var t = now();
	for(var i = 0; i < 15000; i++){
		Timer(parseInt(Math.random() * 100), i);
	}
	function Timer(time, count) {
		window.setTimeout( function(){
			
		}, time);
	}
	function now() { return +new Date;}
	
	var x = 50e6;
	var t1 = now();
	for(var i = 1; i < x;i++){
		var yy = Math.sqrt(i);
	}
	alert( 'fertig.'+ (now()-t1) );
}

Es ist kein Unterschied bemerkbar.

Das der erste Parameter, wenn es ein String ist mit eval ausgeführt wird, ist schon richtig. Aber wer macht das? Normalerweise kommt da eine Funktionsreferenz hin. Insofern ist der Begriff eval-Familie seltsam, so was gibt es im Grund nicht.
Und nach wie vor Timeouts sind keine Threads. Es wird nichts simultan ausgeführt, die Timeouts werden chronologisch abgearbeitet, wenn sie an der Reihe sind.

 

[Jonny2009]

also mal davon abgesehen das es in Javascript tatsächlich mittlerweile so eine Art Multithreading gibt
http://www.internet-magazin.de/ratgeber/javascript-parallel-ausfuehren-1107308.html

Ist klar das so die setTimeouts keine Zeit kosten, weil nichts anderes ausgeführt wird,
probier es mal mit 10 - 15 gleichzeitig ausgeführten langsamen animation,
ein Element was zum Beispiel nach Links läuft ein anderes was nach oben läuft ein was links läuft usw.
Ich habe es getestet, es kommt zu Rucklern ohne gleichen.

ob du es glaubst oder nicht, es gibt noch genug sogenannte "Javascript Profis" die das so einsetzen ^^
das war natürlich spaß, auch wenn man es mit ner Funktionsreferenz aufruft, so wird es wie unten beschrieben
ein eval verarbeitet.

denn wie du schon sagst, ist Javascript von Haus aus Singlethreated also was passiert wenn ein
Timeout oder Interval gesetzt,
es wird Code ausgeführt, und geprüft ob der Timeout/Interval ausgeführt werden soll,
so kostet es doch resourchen oder??

Eval Familie deshalb weil es wie eval abgearbeitet wird:
Beim Laden einer Seite wird eine neue Instanz des Javascript-Interpreters gestartet und eine Skripting-Umgebung erzeugt (wird auch als „thread“ bezeichnet). Der Aufruf von eval startet einen weiteren Interpreter mit einer neuen Umgebung und importiert die Variablen der ersten Umgebung in die neue Umgebung. Wenn der eval-Aufruf abgewickelt ist, exportiert die Variablen zurück in ihre ursprüngliche Umgebung und sammelt den Müll. Obendrein kann der Code nicht für die Optimierung gecacht werden.

 

[ein schlauer]

Die Verzögerungen kommen ja nicht durch den Timeout, sondern durch die Animation. Ich hab auch mit ca. 100 Animation rumgespielt, natürlich ruckelt es da hin und wieder, aber das liegt nicht an den Timern - es ruckelt sicher auch mit deinem Skript - sondern daran, dass sich der Browser immer wieder mal eine "Auszeit" für andere Dinge nimmt.

Aber Timer sind eine völlig normale Sache und passieren in deinem OS ebenfalls hundertfach oder gar tausendfach in der Sekunde. Die kosten keine (oder minimal) Zeit. Deine Vorstellung wie ein Timeout abläuft ist theoretisch richtig, aber das ganze bewegt sich im Mikrosekundenbereich.

Workers sind tatsächlich der erste Sprung zu Thread in JS, aber es ging ja um Timeout

Eine Funktionsreferenz wird nicht evaluiert.

Ich hab deine Quelle gefunden, auch wenn ich diese selber gerne nutze, da liegt sie falsch.
Auch das mit dem Thread bei einem eval halte ich auch nicht für Hieb- und Stichfest. Da müßte man sich mal genauer mit den Browserinterna beschäftigen, aber ich glaube nicht, dass das so ist wie es dort beschrieben ist.

 

[tsseh]

probier es mal mit 10 - 15 gleichzeitig ausgeführten langsamen animation,

was ist eine langsamme animation? du meinst eine rechenintensive? ob eine bewegung langsamm oder schnell abläuft, hat mit der performance nichts zu tun, die berechnungsfunktion wird nur häufige aufgerufen.

Ich habe es getestet, es kommt zu Rucklern ohne gleichen.

ruckler kann man tatsächlich mit einem timer vermeiden, wenn es viele animationen gibt, da in einem rutsch alle neuen eigenschaften der elemente berechnet werden und dann nur einmal gerendert werden muss. mit mehreren timern kommt immer ein stück js an die reihe, berechnet eine property, dann rendert wieder der browser, dann wieder ein stück js, ...

auch wenn man es mit ner Funktionsreferenz aufruft, so wird es wie unten beschrieben
ein eval verarbeitet.

nee, andersherun wird ein schuh draus, es wird immer eine funktionsreferenz übergeben, die wird unter umständen erst als new Function("Bodystring") gebildet.

also was passiert wenn ein
Timeout oder Interval gesetzt,
es wird Code ausgeführt,

ja

und geprüft ob der Timeout/Interval ausgeführt werden soll,

auch browserintern wird der Timeout eventgesteuert laufen

so kostet es doch resourchen oder??

ob man 10 berechnungen in einem timer oder jeweils 1 berechnung in 10 timern macht ist aber für die laufzeit als js egal, es sind immer 10 berechnungen

 

[Jonny2009]

Naja da können wir uns nun im Kreise drehen,
wichtig ist das eine Animation funktionieren sollte, und der Code sollte doch auch möglichst klein sein,
das sehe ich auch ein , also hilft das alles nix, ich überarbeite meinen Code

@ Hesst, ja new Function gehört auch zur eval Familie, da diese den Code auch evaluieren kann.

aber wiegesagt, es ist gehüpft wie gesprungen, ich denke wir alle können relativ gut mir Javascript,
doch gibt es für eine Lösung immer mehrere Lösungswege, der eine ist mehr für die eine, ein anderer mehr für
eine andere Lösung, wichtig ist wiegesagt, das der Code performant ist, und solange wie in diesem Fall
eine Animation flüssig und performant läuft und der Code nicht wie in meinem Beispiel den Rahmen sprengt
(weil 75 kb sind schon etwas viel ^^, obwohl in der heutigen Zeit ja das nicht mehr das Problem ist,
aber vermeiden will ich das im Grunde dann ja auch) ist doch jede Lösung die richtige Lösung
das Ergebnis zählt, oder ?

Alles in allem bin ich euch ja auch sehr Dankbar für eure Ratschläge, ich werde das ganze beherzigen und
umprogrammieren und ich hoffe ihr schaut dann nochmal drüber.

 

[tsseh]

ja new Function gehört auch zur eval Familie, da diese den Code auch evaluieren kann.

dann gehört in deinem sprachgebrauch jede funktion zur eval Familie - von mir aus