Seite 4 von 5 ErsteErste 12345 LetzteLetzte
Ergebnis 46 bis 60 von 70
Like Tree1Likes

Thema: meine animation Funktion bitte testen

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

    AW: meine animation Funktion bitte testen

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Insofern ist das beharren auf einen einzigen Timer überflüssig und bringt keinen erkennbaren Vorteil.
    doch, wie bereits in #38 erwähnt bringt das einen vortein, hat aber nichts mit js zu tun. hatten wir auch schon mal hier (Bilder verschieben performance IE)

  2. #47
    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
    hmm was heisst evaluieren?? code der wie eval verarbeitet wird, ich nannte es mal evaluieren ^^
    nur code der durch eval verarbeitet wird, wird dann evaluiert

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    man sagt das die Funktionen die aus Strings in einen ausführbaren code umwandel zur eval Familie bzw zu den eval Funktionen gehören und mit
    Ihnen vorsichtig umgegangen werden muss
    jede funktiion wird aus einem string in ausführbaren code umgewandelt, die quelle liegt ja textuell vor. manche früher andere später dynamisch zur laufzeit.

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

    AW: meine animation Funktion bitte testen

    @ein schlauer
    ja super, stimmt, als ich das bei mir testete(also mein altes script), hatte es aber saumässig geruckelt bei 10-15 animationen,
    das waren aber nicht 10 - 15 Animation grade nochmal nachgeschaut, es waren 15 Elemente die jeweils höhe, breite, position, hintergrundfarbe, textfarbe, rahmenfarbeLinks,
    rahmenfarbeRecht, rahmenfarbeOben, rahmenfarbeUnten, rahmenbreiteLinks,rahmenbreiteRechts, rahmenbreiteOben, rahmenbreiteUnten.
    dabei wurde pro Animation (CSS-Eigenschaft) ein Interval gestartet und das mal 15 Elementen, das macht 13 x 15 = 195 Timeouts, dann ist es kein wunder wenn da was ruckelt ^^.

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

    AW: meine animation Funktion bitte testen

    @hesst
    ja ist doch ok ^^, eigentlich ist mir das mit dem eval egal, hier ging es um Animationen, damit jetzt ruhe ist, du hast recht ^^

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

    AW: meine animation Funktion bitte testen

    Zitat Zitat von hesst Beitrag anzeigen
    doch, wie bereits in #38 erwähnt bringt das einen vortein, hat aber nichts mit js zu tun. hatten wir auch schon mal hier (Bilder verschieben performance IE)
    Hmm, bei mir ist die dortige Variante mit den vielen timer etwas flüssiger. Aber das ist natürlich nur gefühlt. Beide Varianten hakeln immer mal wieder, aber die mit einem Timer ist dann wenn sich alle Elemente bewegen etwas flüssiger. Vielleicht haben die Browser seit 2010 da was geändert?

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

    AW: meine animation Funktion bitte testen

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    dabei wurde pro Animation (CSS-Eigenschaft) ein Interval gestartet und das mal 15 Elementen, das macht 13 x 15 = 195 Timeouts, dann ist es kein wunder wenn da was ruckelt ^^.
    Ja, aber das liegt nicht an dem Aufruf der Timeouts, sondern daran, was du dann machst und ob du Animationen in einem globalen Timeout oder vielen einzelnen machst, spielt nach meiner Erfahrung keine Rolle (s. Antwort an Hesst)

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

    AW: meine animation Funktion bitte testen

    Bei mir läuft das:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js?modules=Animation,tween"></script>
    <script type="text/javascript">
    kkjs.event.onWindowLoad(function(){
    	var size = kkjs.DOM.getWindowSize();
    	kkjs.css.$("div").forEach(function(div){
    		kkjs.css.set(div, {top: div.offsetTop + "px", left: div.offsetLeft + "px"});
    		var time = 1 + Math.random() * 2;
    		var ani = new kkjs.Animation(div, "top", kkjs.tweens.easeInOut, time);
    		ani.runCSSTo((size.height - div.offsetHeight) * Math.random());
    		ani = new kkjs.Animation(div, "left", kkjs.tweens.bounce, time);
    		ani.runCSSTo((size.width- div.offsetWidth) * Math.random());
    	});
    });
    </script>
    <style type="text/css">
    div {
    	position: absolute;
    	height: 20px;
    	width: 20px;
    	border: 1px dashed red;
    	left: 50%;
    	top: 50%;
    }
    </style>
    </head>
    <body>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    </body>
    </html>
    (80 unabhängige Timeouts) nur im IE9as7 nicht flüssig.

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

    AW: meine animation Funktion bitte testen

    nice, ich habs verstanden, das mehrere Timeouts nicht flüssig laufen ist ein Gerücht

    animation_new.zip
    ich hab meine animations Funktion nun umgeschrieben, beinhaltet aber noch nicht die addAnimation Funktion, mit
    der ich dann color usw einbringen kann, es funktionieren nun alle css Eigenschaften die mit zahlen gesetzt werden können
    ausser opacity, dafür muss ich das mit dem Filter noch einbauen, sonst aber dürften fast alle Eigenschaften unterstützt werden,
    mit 7 kb kam ich nicht hin, bis jetzt sind es 10 kb und es müssen noch ein paar Sachen dazu programmiert werden,
    aber ich bin dann schonmal von der Riesen Größe weg, vielleicht könnt ihr ja mal drüberschauen.

    Diese möglichkeit ist nun schon um einiges schlanker als meine zuvor programmierte Funktion und unterstützt von
    Haus aus sogut wie alle CSS Eigenschaften wie schon erwähnt die man mit Zahlen festlegen kann,
    dennoch sind viele Sachen noch nicht enthalten, zum Beispiel wenn borderWidth geändert werden soll besteht dies ja aus borderTopWidth, borderBottomWidth,
    borderLeftWidth und borderRightWidth, ansonsten kann die momentane dicke ja nicht festgelstellt werden genauso mit borderColor das dann noch kommt, margin
    oder padding.
    Desweiteren kann das ganze nur mit Pixeln umgehen, hat einer von euch schon so ein umrechnungsscript von em, pt, cm usw zu px vielleicht kann mir da auch nochmal jemand helfen.

    Vielen Dank schonmal im vorraus
    Jonny

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

    AW: meine animation Funktion bitte testen

    also ichhabs jetzt auc mal mit 30 div elementen ausprobiert,
    bei jedem div werden folgende Animation ausgeführt, beim drüberfahren:
    width:800,
    height: 200,
    borderTopWidth: 20,
    fontSize: 40,

    beim mouseover:
    width: 500,
    height: 100,
    borderTopWidth: 0,
    fontSize: 20,

    also es werden alle Animation auf alle Divs angewendet, egal über welches man fährt oder mousoutet ^^

    Bis dahin läuft es flüssig, füge ich dann aber noch eine Eigenschaft hinzu fängt es an zu ruckeln

    Ich hatte firebug unten an xD

    Jetzt geht es sogar mit 60 Divs und einer Css Eigenschaft mehr, ab da fäng das ruckeln an,

    60 x 5 = würde pro Animation 300 gleichzeitige Timeouts heißen,

    ich kann die Testdatei auch mal uploaden wer sehen will das es funktioniert, es ruckelt ab und an minimal aber es hält sich in Grenzen.


    Aber mal ganz ehrlich Leute, ist doch völlig egal, wer baut denn soviele Animationen auf einer Seite ein ^^, das wäre doch sehr unproffesional


    [edit]
    OK ich hab euch das Beispiel diesmal mit 80 divs hochgeladen, wo folgende eigenschaften animiert werden:
    width
    heigh
    borderTopWidth
    marginLeft
    paddingTop
    paddingLeft
    fontSize

    mal abgesehen davon das die neu programmierte animation Funktion noch ein wenig verbackt ist, finde ich läuft es immer noch relativ flüssig,
    ich sage relativ ^^.

    Nur mal interesse halber würde mich mal interessieren, wie flüssig mein Beispiel mit euren Funktionen laufen, ob die Timeouts da wirklich
    keine Probleme machen, oder eventuell mit mehreren timern das ganze sogar noch flüssiger läuft.

    animation_bsp.zip
    Geändert von Jonny2009 (09-05-2012 um 23:30 Uhr)

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

    AW: meine animation Funktion bitte testen

    So habs jetzt nochmal seperat getestet, und zwar mehrere Timeouts gleichzeitig gestartet:

    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">         
    
            function test () {
            	for(var i = 1000000; 0 <= i; --i) {
            		
            	}
            	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
            }
            
            var time = new Date().getTime();
            window.onload = function () {
               
            	for(var i = 5; 0 <= i; --i ) {
            		window.setTimeout(test, 10);
            	}
            	
            }
            
            </script>
        </head>
        <body>
            <div id="testbox">
            </div>
        </body>
    </html>
    und einmal mit einem Timeout:

    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">         
    
            function test () {
            	for(var i = 1000000; 0 <= i; --i) {
            		
            	}
            	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
            }
            
            var time = new Date().getTime();
            window.onload = function () {
                
            
           		window.setTimeout( function() {
           			for(var i = 5; 0 <= i; --i ) {
           			    test();
           			}
           		}, 10);
            	
            }
            
            </script>
        </head>
        <body>
            <div id="testbox">
            </div>
        </body>
    </html>

    Und ich muss echt sagen das wundert mich doch sehr aber wenn man das mehrmals testet,
    so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
    laufen tatsächlich wenn auch in diesem Fall nur minimal schneller, ich denke desdo mehr Animationen
    es laufen das der Geschwindigkeitsvorteil noch größer ist, mann mann ich glaube nie wieder all das was
    ich so im Internet lese, obwohl die Seite einen ordentlichen Eindruck gemacht hatte :S

  11. #56
    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
    so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
    laufen tatsächlich wenn auch in diesem Fall nur minimal schneller,
    das sind messfehler, ausserdem willst du ja die timer testen, das heisst, du musst zum test viele timer haben mit wenig laufzeit, du hast wenig timer mit langer laufzeit getestet.

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

    AW: meine animation Funktion bitte testen

    Hmm, stimmt, ich weiss nicht, wie kann ich es am besten messen, so??

    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">         
    
            function test () {
            	for(var i = 10000; 0 <= i; --i) {
            		
            	}
            }
            
            var b = 0;
            var c = 0;
            var d = 0;
            var e = 0;
            var f = 0;
            var g = 0;
            var h = 0;
            var i = 0;
            var j = 0;
            var k = 0;
            function oneTimeout () {
            	if(b !== 500) {
            		   b++;
            		   d++;
            		   c++;
            		   d++;
            		   e++;
            		   f++;
            		   g++;
            		   h++;
            		   i++;
            		   j++;
            		   k++;
    	        	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
            		   window.setTimeout(oneTimeout,10);
            	}
            }
            
            
            function moreTimeouts () {
            	window.setTimeout(function() { if(b<500) { b++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(c<500) { c++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(d<500) { d++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(e<500) { e++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(f<500) { f++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(g<500) { g++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(h<500) { h++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(i<500) { i++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(j<500) { j++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            	window.setTimeout(function() { if(k<500) { k++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
                
            }
            
            var time = new Date().getTime();
            window.onload = function () {
              //oneTimeout();
              moreTimeouts();
            }
            
            </script>
        </head>
        <body>
            <div id="testbox">
            </div>
        </body>
    </html>
    Ist das so richtig? so sind die mehr Timeouts immernoch schneller,
    ich glaube irgendwie mache ich das falsch

  13. #58
    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
    Ist das so richtig? so sind die mehr Timeouts immernoch schneller,
    ich glaube irgendwie mache ich das falsch
    hab ich auch festgestellt, mit mehreren timeouts hat man einmal eine schleife um die timeouts der rest lauft eventgesteuert
    mit einem timeout hat man jedesmal eine schleife um die funktionalitat.
    die iteration in der schleife scheint für die längere laufzeit verantwortlich zu sein.

    edit: selbst im IE7

    1 timer

    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">         
            var maxCount = 100;
            var maxTimer = 500;
            function test (idx, count)
            {
                count = count || maxCount;
                for(var i = 0; i < maxTimer; i++) {
                  document.getElementById("testbox").innerHTML = "Durchlauf " + (maxCount - count) + ": Timer " + i + ": time:" + (new Date().getTime() - time) + "<br>";
                }
                if (--count)
                {
                  window.setTimeout(function(){test(0, count);}, 100);
                }
            }
            
            var time = new Date().getTime();
            window.onload = function () {
                  window.setTimeout(function(){test(0);}, 100);
            }
            
            </script>
        </head>
        <body>
            <div id="testbox">
            </div>
        </body>
    </html>
    n timer
    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">         
            var maxCount = 100;
            var maxTimer = 500;
            function test (idx, count)
            {
                count = count || maxCount;
                document.getElementById("testbox").innerHTML = "Durchlauf " + (maxCount - count) + ": Timer " + idx + ": time:" + (new Date().getTime() - time) + "<br>";
                if (--count)
                {
                  window.setTimeout(function(){test(idx, count);}, 100);
                }
            }
            
            var time = new Date().getTime();
            window.onload = function () {
               
                for(var i = 0; i < maxTimer; i++) {
                    window.setTimeout((function(idx){return function(){test(idx);}})(i), 100);
                }
                
            }
            
            </script>
        </head>
        <body>
            <div id="testbox">
            </div>
        </body>
    </html>
    Geändert von tsseh (10-05-2012 um 08:35 Uhr)
    miniA4kuser likes this.

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

    AW: meine animation Funktion bitte testen

    Zitat Zitat von Jonny2009 Beitrag anzeigen
    Und ich muss echt sagen das wundert mich doch sehr aber wenn man das mehrmals testet,
    so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
    laufen tatsächlich wenn auch in diesem Fall nur minimal schneller, ich denke desdo mehr Animationen
    es laufen das der Geschwindigkeitsvorteil noch größer ist, mann mann ich glaube nie wieder all das was
    ich so im Internet lese, obwohl die Seite einen ordentlichen Eindruck gemacht hatte :S
    U.U. kann es sein, dass das früher mal etwas anders war. Hier wurde in den letzten Jahren in den Browsern viel optimiert. Aber was schon immer nicht gestimmt hat ist, dass Timeouts irgendwas mit Threads zu tun haben.

    Und nochmal, weil deine Formulierung wieder so klingt, Timeouts "laufen" nicht. Das sind Hintergrundprozesse im Browser (resp. des Betriebssystem).

    Wie das im Detail geregelt wird, weiß ich auch nicht. Aber wie schon erwähnt, dass sind keine Dinge, wo du dir Gedanken um Laufzeiten machen musst. Es gibt soviele Events (bzw. intern heißen die Interrupts) die permanent jede Aktion Überwachen. Sei es die Tastatur, die Maus, alle Bedienelemente der Oberfläche, usw. usf., wenn das Zeit kosten würde müßten Computer saulahm sein.

    Alles wovon du sprichst, was die Skripte langsam macht, ist das was als Aktion NACH dem Timeout passiert. Animationen ist das was im Browser langsam sind. Und das ruckeln ist der Effekt, dass der Browser viele Dinge im Hintergrund macht, die du normalerweise nicht mitbekommst und wenn ein Skript dem Browser die komplette Rechenzeit nimmt, muss er ab und zu mal "dazwischen funken".

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

    AW: meine animation Funktion bitte testen

    ja naja wenn Timeouts und Intervalle so geregelt sind, warum kann man dann Javascript nicht einfach multithreated machen ^^, das wäre doch viel logischer.
    Und wieder was dazugelernt

    Wenn das browserintern so geregelt ist, regelt ein Browser die Timeouts und Intervalle aber immer nur für ein Tab, den öffnet mal mit strg+t während einer 10 sekündigen Animation einen Tab und klickt dann mal nach 5-10 Sekunden wieder auf den tab mit der Animation, dann sieht man das die intervalle erst dann fortgeführt werden.
    Und nochetwas verstehe ich nicht ganz, wenn es Browserintern geregelt wird, was ich mir eigentlich doch mittlerweile sehr gut vorstellen kann,
    so verstehe ich nicht warum ein Timer nicht Zeitgenau (Beispiel: setInterval(xFunc, 10) ) dann auch alle 10 ms ausgeführt werden kann, sondern in den meisten Fällen verzögerungen auftreten, weil der Interval oder Timeout noch die Differenz die der auszuführende Code braucht mitbeinhatet, so könnte doch wenn es Browsergesteuert ist,
    wirklich alle 10 ms aufgerufen werden ohne Rücksicht auf den Code der ausgeführt wird.

Seite 4 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
  •