Seite 2 von 5 ErsteErste 12345 LetzteLetzte
Ergebnis 16 bis 30 von 70
Like Tree1Likes

Thema: meine animation Funktion bitte testen

  1. #16
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.744

    AW: meine animation Funktion bitte testen

    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.

  2. #17
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    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 ^^

  3. #18
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    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-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[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.

  4. #19
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: meine animation Funktion bitte testen

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    Es kann ja sein das eine Animation in der Pause haben will, die JsEngine durchläuft gerade aber einen Animationsdurchgang,
    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.

  5. #20
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: meine animation Funktion bitte testen

    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)

  6. #21
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    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?
    meinTween.zip

    Vielen Dank für eure Antworten
    Jonny
    Geändert von Jonny2009 (08-05-2012 um 15:53 Uhr)

  7. #22
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: meine animation Funktion bitte testen

    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

  8. #23
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: meine animation Funktion bitte testen

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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.

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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.

  9. #24
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    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 .

  10. #25
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    @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?

  11. #26
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: meine animation Funktion bitte testen

    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.

  12. #27
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: meine animation Funktion bitte testen

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    und muss deswegen feststellen das actual_position nicht mehr verändert wird,
    das verstehe ich nicht.

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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.


    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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

  13. #28
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    @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

  14. #29
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: meine animation Funktion bitte testen

    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.

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    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 ]

  15. #30
    Jonny2009 ist offline Foren As
    registriert
    15-02-2009
    Beiträge
    85

    AW: meine animation Funktion bitte testen

    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.

Seite 2 von 5 ErsteErste 12345 LetzteLetzte

Ähnliche Themen

  1. Bitte mal testen
    Von René im Forum Site-Check
    Antworten: 15
    Letzter Beitrag: 21-07-2006, 07:26
  2. Bitte testen (StyleSwitcher)
    Von dkdenz im Forum Script-Check
    Antworten: 25
    Letzter Beitrag: 28-10-2004, 02:29
  3. bitte testen
    Von yoyo im Forum Site-Check
    Antworten: 13
    Letzter Beitrag: 29-11-2002, 10:30
  4. bitte testen!
    Von rasputin im Forum Site-Check
    Antworten: 22
    Letzter Beitrag: 10-11-2002, 17:01
  5. bitte testen!
    Von rasputin im Forum Serverseitige Programmierung
    Antworten: 0
    Letzter Beitrag: 30-10-2002, 21:17

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •