[Erledigt] jQuery animate step: aktuellen step und delay festlegen

[BlackScorp]

Hallo leute,

wie es schon im titel steht. will ich gerne bei der eigenschaft step: den aktuellen step herausfinden und ein delay zwischen den einzelnen steps festlegen. ich möchte während ein div animiert wird, bei einem anderen div die css klasse ändern.
mein aktueller versuch ist folgender:

 i = 1;
    $('.animiertesDiv').animate({
        "left":"+=10",
        "top":"+=10"
    },{
        duration: 'slow',
        step:function(){
            //hier soll das div, alte klasse verlieren und eine neue klasse erhalten
            $('.anderesdiv').attr('class','neue_class_'+i);
            // da duration  slow 600 ms dauert, wollte ich 100 ms pause machen
            i++;
        }
        ,
        complete: function(){
            afterAnimation();
        }
    });

hoffe ihr könnt mir weiterhelfen, ich kann zwar in step , eine variable als parameter übergeben, jedoch stehen dort die werte für top und left, anfang und ende. ich brauch aber einen step index und irgendwie eine pause zwischen den steps festlegen

MFG BlackScorp

[rudygotya]

Schreib dir das als singleton, dann brauchst du auch kein globales i. Dann kannst du auch einfach bestimmen, ob schon ein Animiervorgang stattfindet und dementsprechend über complete die Instanzvariable zurücksetzen, die den Aufruf blockiert.

grüße

[BlackScorp]

naja es ist kein globales i, dieser codeausschnitt befindet sich in einer funktion. es geht da auch nicht um die anzahl der steps, sondern wann die steps ausgeführt werden, in welchen intervall. ich könnte i nach ablauf auf 0 setzen oder so. aber danach kommt halt das problem, dass die hauptanimation noch weiterlauft und die animation des anderen divs, ist schon längst vorbei. es müsste doch irgendwie möglich sein , da ein settimeout reinsetzen von 100 ms zwischen den einzelnen steps...

[rudygotya]

(function loopsiloopsiloo) () {
    machIrgendWasTolles();
    // auf jeden fall nach der Ausführung der Funktion machIrgendWasTolles()
    setTimeout(loopsiloopsiloo(), 100);
}(); 

Ist praktisch ein setInterval, dass auf die ausführende Funktion wartet und sich selbst startet.

aber danach kommt halt das problem, dass die hauptanimation noch weiterlauft und die animation des anderen divs, ist schon längst vorbei.

Solltest du vielleicht so erklären, dass ichs auch kapier, wo das Problem liegt Sorry, aber ich check nicht, worauf du hinauswillst oder wo jetzt der Hund begraben ist. Evtl hilft dir ja das "Pattern"

[BlackScorp]

ok dann "zeige" ich es am besten , was ich vorhabe, du siehst da in meiner signatur, link zu meinem spiel, log dich da mal ein username:testuser, pw:123 und dann lauf mal auf der karte herum, du wirst sehen, dass die figur , viel zu schnell mit den beinen "strampelt" , wenn ich das nun verlangsamen könnte, würde es besser aussehen..

habs gerade mit deinem settimeout ausprobiert und firebug spuckt folgende meldung aus:

too much recursion

EDIT: habs gerade so versucht:

  i = 1;
    $('div#char').attr('class','char player_'+direction);
    $('div#mapScreen div.mapDisplay').animate({
        "left":left,
        "top":top
    },{
        duration: 600,
        step:function (){
            function animateChar(){
                $("div#char").attr("class","char player_walk"+i+"_"+direction);
                //if(i>6)i=1; else i++;
                i++;
                setTimeout(animateChar(),100);
            }
            
        }
        ,
       
        complete: function(){
             
             
            
            afterAnimation();
            $('div#char').attr('class','char player_'+direction);
        }
    });

keine fehlermeldung .. aber auch keine animation

[rudygotya]

Gerade für dein animateMap bietet sich doch ein Singleton an. Schau dir mal das Monster an:

function animateMap(direction){
    var left = "";
    var top = "";
    var mapHeight = 9;
    var mapWidth = 9;
    var tileWidth = 64;
    var tileHeight = 32;
    var mapX = 0;
    var mapY = 0;
    var mapTop = 0;
    var mapLeft = 0;
    var diagonale = calcRadius();
    var i = 0;
    var afterAnimation;
    switch(direction){
        case 'n':{
            left = "+=32";
            top = "+=16";
            //Reihe Oben erstellen
            mapX = (parseInt($('span.x').html())-(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapX--;
            for(i = 0;i<mapWidth;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY--;
                mapLeft +=tileWidth;
            }

            //Reihe links erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())+(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i < mapHeight-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX--;
                mapY--;
                mapTop -= tileHeight;
            }
            
            _afterAnimation = function(){
                //Reihe unten Entfernen
                mapX = parseInt($('span.x').html())+(diagonale);
                mapY = parseInt($('span.y').html());
                mapX++;
                mapY++;
          
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY++;
                }
                //Reihe rechts Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())-(diagonale);
                mapY--;
                mapX++;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY++;
                }
            }
            break;

        }
        case 's':{
            left = "-=32";
            top = "-=16";
            //Reihe Rechts erstellen
            mapX = parseInt($('span.x').html());
            mapY = parseInt($('span.y').html())-(diagonale);
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapY--;

            for(i = 0;i < mapHeight;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY++;
                mapTop += tileHeight;
            }
           
            //Reihe Unten erstellen
            mapX = (parseInt($('span.x').html())+(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i<mapWidth-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapLeft -= tileWidth;
                mapX--;
                mapY++;
            }

            afterAnimation = function(){
                //Reihe links Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())+(diagonale);
                mapY++;
                mapX--;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY--;
                }

                //Reihe oben Entfernen
                mapX = parseInt($('span.x').html())-(diagonale);
                mapY = parseInt($('span.y').html());
                mapX--;
                mapY--;
         
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY--;
                }
            }
            break;
        }
        case 'w':{
            left = "+=32";
            top = "-=16";
            //Reihe links erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())+(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapY++;
            for(i = 0;i < mapHeight;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX--;
                mapY--;
                mapTop -= tileHeight;
            }
            
            //Reihe Unten erstellen
            mapX = (parseInt($('span.x').html())+(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapX++;

            for(i = 0;i<mapWidth-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapLeft -= tileWidth;
                mapX--;
                mapY++;
            }
            afterAnimation = function(){
                //Reihe oben Entfernen
                mapX = parseInt($('span.x').html())-(diagonale);
                mapY = parseInt($('span.y').html());
                mapX--;
                mapY--;
       
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY--;
                }
                //Reihe rechts Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())-(diagonale);
                mapY--;
                mapX++;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX++;
                    mapY++;
                }
            }
            break;
        }
        case 'e':{
            left = "-=32";
            top = "+=16";
           
            //Reihe Oben erstellen
            mapX = (parseInt($('span.x').html())-(diagonale));
            mapY = parseInt($('span.y').html());
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)-(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)-(Math.round(tileWidth/2)));
            mapX--;
            for(i = 0;i<mapWidth;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY--;
                mapLeft +=tileWidth;
            }
            //Reihe rechts erstellen
            mapX = parseInt($('span.x').html());
            mapY = (parseInt($('span.y').html())-(diagonale));
            mapTop = (($('div#X'+(mapX)+'Y'+(mapY)).position().top)+(Math.round(tileHeight/2)));
            mapLeft = (($('div#X'+(mapX)+'Y'+(mapY)).position().left)+(Math.round(tileWidth/2)));
            mapX++;
            for(i = 0;i < mapHeight-1;i++){
                $('div#mapScreen div.mapDisplay').append(
                    '<div id="X'+mapX+'Y'+mapY+'" style="top:'+mapTop+'px;left:'+mapLeft+'px" class="worldMap gras"></div>'
                    );
                mapX++;
                mapY++;
                mapTop += tileHeight;
            }
            afterAnimation = function(){
                //Reihe unten Entfernen
                mapX = parseInt($('span.x').html())+(diagonale);
                mapY = parseInt($('span.y').html());
                mapX++;
                mapY++;
               
                for(i = 0;i<mapWidth;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY++;
                }
                //Reihe links Entfernen
                mapX = parseInt($('span.x').html());
                mapY = parseInt($('span.y').html())+(diagonale);
                mapY++;
                mapX--;
                for(i = 0;i<mapHeight;i++){
                    $('div#X'+mapX+'Y'+mapY).remove();
                    mapX--;
                    mapY--;
                }
            }
            break;
        }
    }
  
    i = 1;
     $('div#char').attr('class','char player_'+direction);
    $('div#mapScreen div.mapDisplay').animate({
        "left":left,
        "top":top
    },{
        duration: 'slow',
        step:function(){
            $('div#char').attr('class','char player_walk'+i+'_'+direction);
            i++;
            if(i > 6) i = 1;
        }
        ,
        complete: function(){
             $('div#char').attr('class','char player_'+direction);
            afterAnimation();
        }
    }); 
} 

Wenn du genauer hinsiehst, fällt dir auf, dass in jedem case statement afterAnimation deklariert wird. Abstrahier das doch mal.

Nur als Ansatz:

var animateMap = (function () {
    var left="",
        top="",
        mapHeight=9,
        mapWidth=9,
        tileWidth=64,
        tileHeight=32,
        mapX=0,
        mapY=0,
        mapTop=0,
        mapLeft=0,
        diagonale=calcRadius(),
        i=0,
        afterAnimation = function () {
            // tu irgendwas
        },
        _runThis = function () {
            // tu irgendwas
        };
    direction
    return {
        run : function (direction) {
            switch(direction){
                case 'n' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 's' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 'w' : {
                    _runThis(direction);
                    _afterAnimation();
                }
                case 'e': {
                    _runThis(direction);
                    _afterAnimation();
                }
            }
        }
    };
})(); 

Edit:

Die ganzen Optionen könnte man in ein Member-Objekt options setzen. Ob private oder public, bleibt ja dir überlassen. Wär noch ein wenig schöner.

[BlackScorp]

das ist mir schon klar aber ich sehe code optimierung als schönheits op. zz lege ich wert auf funktionalität, da ich etwas unter zeitdruck stehe.. meine css geschichten und php sind auch nicht optimal, aber sie funktionieren.. und eine gemeinsame funktion in einzelnen cases habe ich auch bereits versucht.. jedoch hängen da viel zu viele variablen von der himmelsrichtung ab.. mir gehts jetzt halt darum, wie ich es schaffen kann die anzahl der steps auf die dauer der animation anzupassen.

[rudygotya]

das ist mir schon klar aber ich sehe code optimierung als schönheits op

Naja, eher nicht. In dem Fall checkt man nicht mehr, was wo wie passiert ohne sinnlosen Mehraufwand. Nicht persönlich gemeint, aber bei dem Wulst hat man wenig Lust, sich an den Fehler ranzukämpfen. Aufgeräumter Code würde auch einfach das Isolieren des Fehlers ermöglichen. Zudem wird der Code kleiner, js schneller ausgeführt und gerade für das, was du da erzeugst, bietet sich einfach ein Singleton an.

Zu deinem Edit eine sehr unschöne Lösung:

step:function (){
        animateChar = window.animateChar = function (){
                $("div#char").attr("class","char player_walk"+i+"_"+direction);
                //if(i>6)i=1; else i++;
                i++;
                setTimeout(animateChar(),100);
            }
            
        } 

[BlackScorp]

naja zu dem code.. ich habe ja die relevante stelle gepostet ich bin mir sicher keiner würde im oberen teil durchbliken..

zu deiner funktion... leider hat es nicht funktioniert.. ich habe gesehen dass jQuery eine delay() funktion hat.. muss mal schauen ob ich es nicht irgendwie hinkriege nur das i zu incrementieren, wenn 100ms der animation schon vorbei sind. mal sehen ob sich das was machen lässt...

ich tüftle weiter mal rum, vllt fällt dir ja auch noch ein wie man es lösen könnte

[rudygotya]

naja zu dem code.. ich habe ja die relevante stelle gepostet

Naja, nicht ganz. Da das ganze wiederum in einer Funktion gekapselt ist, ist der scope gleich ein anderer. Von dem her macht das nen ganz gewaltigen Unterschied.

@ code: sorry, aber so lang das so eine Sprachverwaltigung ist, hab ich auch nicht grade große Motivation. Nicht geklappt bringt auch nicht viel, weißt du doch am besten Fehlermeldung? Etc.

[BlackScorp]

das ist ja das problem, firebug sagt , dass alles ok ist. jedoch strampelt der typ nicht bei der animation der karte.

das switch case vor der animate funktion, sagt eigentlich nur aus in welche richtung animiert wird, also welche top und left werte animiert wird, dabei addiere ich eine reihe von divs an die gewünschte stelle der karte und lösche überflüssige divs, die nicht im sichtbaren bereich liegen.. keine zauberei und ich kann dir versichern dass der teil unrelevant für mein fehler ist, da das ganze alles vor der animation ausgeführt wird... es ist wirklich diese animate funktion.. ich denke die einzige möglichkeit, die ich habe , ist die animation per hand mit schleifen erstellen... wenn dir was einfällt , sag bescheid..

MFG

[BlackScorp]

ok ich habe das problem gelößt mit folgemdem code:

 var lastTime = Date.now()+100;
    i = 1;
    $('div#char').attr('class','char player_'+direction);
    $('div#mapScreen div.mapDisplay').animate({
        "left":left,
        "top":top
    },{
        queue: false ,
        duration: 'slow',
        step:function(){
            $("div#char").attr("class","char player_walk"+i+"_"+direction);
            if(lastTime < Date.now()){
                i++;
                lastTime = Date.now()+100;
            }
        },
        complete: function(){
            afterAnimation();
            $('div#char').attr('class','char player_'+direction);
        }
    });

jetzt muss ich irgendwie es schaffen meine onclick ereignisse während der animation zu stoppen..

[ChrisB]

jetzt muss ich irgendwie es schaffen meine onclick ereignisse während der animation zu stoppen..

Setze dir zu Beginn der Animation ein Flag (boolesche Variable, bspw. animationIsActive=true), und frage dieses im onclick-Handler ab, bevor du darin irgendetwas weiteres tust. Und setze es mit dem Ende der Animation wieder zurück (auf false).

[BlackScorp]

Setze dir zu Beginn der Animation ein Flag (boolesche Variable, bspw. animationIsActive=true), und frage dieses im onclick-Handler ab, bevor du darin irgendetwas weiteres tust. Und setze es mit dem Ende der Animation wieder zurück (auf false).

*facepalm* sehe vor lauter baumen den wald nicht.. ich habe für jeden click einen neuen event zugewiesen der nichts tut... aber mit if animationisactive ist natürlich viel besser.. gut vielen dank, ich denke das thema Map hat sich nun erledigt. und ich kann weiter programmieren(aber erstmal js code aufraumen)

MFG

[BlackScorp]

so habe das jetzt so gemacht, wie du es vorgeschlagen hast.
ich rufe beim klicken eine funktion auf, in dieser funktion, wird geprüft ob variable auf true gesetzt ist, wenn ja, wird die animation gestartet, beim starten der animation wird die variable auf false gesetzt und bei complete: function() der animation wird die variable wieder auf true gesetzt. funktioniert ganze 5 felder lang, danach gibts ein kurzen ruck und dann springt die map rum und alles wird falsch berechnet. ich denke sobald ich einmal die events von jQuery aktiviert habe, können die nicht einfach gestoppt werden, ich denke ich muss da mit .die die events löschen...