[JS] Diagonale animatie

[Maxman1850]

Hallo allemaal,

Ik ben bezig met javascript animatie en nu loop ik tegen het volgende probleem aan:
Wanneer ik een div horizontaal of verticaal wil verplaatsen gaat dat zonder problemen en ziet het er ook vloeiend uit, wanneer ik echter een div diagonaal wil verplaatsen lijkt het alsof hij heel erg stottert.

Om het nog erger te maken wil ik de div over een isometrisch grid verplaatsen, dat betekent dus dat de kortste afstand om hem te verplaatsen horizontaal 2px is en verticaal 1px.

Het probleem doet zich alleen voor bij lagere tijden tussen de verplaatsingen, vanaf ongeveer 25 milliseconden wordt het duidelijk.

Ik gebruik jquery met de .animation() functie maar dit heeft weinig verschil met een zelfgeschreven script waarbij de elementen verplaatst worden met een timer. De div's hebben een achtergrondafbeelding waar het mij om gaat.

Nu wil ik aan jullie vragen of jullie misschien oplossingen weten om het wat vloeiender te laten verlopen, is dit mogelijk met javascript? Of moet er misschien een animatie met de afbeelding worden gemaakt met kortere afstanden?

Mijn code die zich herhaalt ziet er als volgt uit, hierbij verplaatst de div zich in zuidwestelijke richting:

JavaScript:

$("#element").animate({top: "+=1px", left: "-=2px"}, 25);

Met vriendelijke groet,

Max

[CurlyMo]

Heb je online een werkend voorbeeld staan?

[Maxman1850]

-

[ Voor 100% gewijzigd door Maxman1850 op 26-09-2018 21:24 ]

[OkkE]

Bij mij loopt de animatie in je voorbeeld vloeiend (OSX + Chrome).

Ik heb het idee dat je probleem niet zo zeer te maken heeft met de code die je gebruikt* maar meer de browser/computer waar mee je 't bekijkt. Zowel X- als Y-as animeren is zwaarder (berekening) dan alleen de X of alleen de Y.

*) Native Javascript zal vrijwel altijd minder overhead hebben en dus minder snel schokkerig worden; het kan echter wel lastiger zijn dat goed werkend te krijgen in alle browsers.

[TheNephilim]

In Chrome en Internet Explorer 8 heel soepeltjes hier!

[LiquidT_NL]

Ten overvloede, Chrome op XP, draait als een zonnetje!

[RobIII]

OkkE schreef op vrijdag 12 oktober 2012 @ 09:03:
Zowel X- als Y-as animeren is zwaarder (berekening) dan alleen de X of alleen de Y.

Ik denk dat je Javascript/browsers/processors en alles daartussenin schromelijk onderschat

JavaScript:

x++;
y++;

v.s.

JavaScript:

x++;

Is inderdaad een "optimalisatie" van 50% Maar dat bovenste blok voer ik op een gare bak in een gare browser (IE8) met een gare testmethode zo'n ~ 15.000.000 tot ~ 20.000.000 p/sec keer uit (Overigens, voer ik 't onderste blok uit dan kom ik op dezelfde getallen; wat betekent dat de tijd vooral gespendeerd wordt in andere zaken

* Quick-n-dirty op jsfiddle wat gerammeld. Kan er goed +/- een factor 10 of meer langs zitten maar dat boeit voor 't punt verder niet

[ Voor 35% gewijzigd door RobIII op 12-10-2012 11:30 ]

[OkkE]

You're right. I'm wrong.

Het is misschien de redraw door de browser wat de beperking is? Ik heb (zoals wel duidelijk zal zijn ) niet heel veel verstand van interne werking/performance van browsers; mijn uitleg is ook wat onduidelijk daar door. Maar volgens mij ligt de schokkerige animatie in ieder geval niet aan het gebruikte script an sich.

[Verwijderd]

Ik denk dat het niet super is om jQuery's animate functie zo vaak per seconde te gebruiken. volgens mij is dat meer bedoelt om over een tijdsspan van begin- naar eindpunt te gaan en niet om iedere tussenstap apart te nemen.
Ik zou de animatie liever zelf schrijven. Neem anders een kijkje naar de requestAnimationFrame API: http://paulirish.com/2011...rame-for-smart-animating/

Voorbeeldje met jouw bus

[P.O. Box]

Is het niet handiger om hier een Tween functionaliteit voor te gebruiken waarbij je begin en eindpunt opgeeft en dan de tween start? dat wordt intern waarschijnlijk op dezelfde manier verwerkt natuurlijk... maar just for the idea...

bijv.
http://jstween.blogspot.nl/

[ Voor 22% gewijzigd door P.O. Box op 12-10-2012 11:48 ]

[Maxman1850]

Het voorbeeld is inderdaad prima te bekijken, maar als ik hem langzamer laat verplaatsen wordt het pas veel erger om te zien. Ik denk inderdaad niet dat het aan de code ligt, maar aan de grootte van de verplaatsing. Als de verplaatsing dus kleiner te maken is, denk ik dat het veel soepeler gaat verlopen, maar hoe moet zoiets?

[TheNephilim]

JavaScript:

$("#element").animate({
    top: "320px", // Y-as Punt van bestemming 
    left: "320px" // X-as Punt van bestemming
}, 50000);

Zoals Verwijderd in "[JS] Diagonale animatie" ook al aangeeft, is het denk ik beter, om in plaats elke 25 miliseconden een animatie te starten, gewoon het eindpunt op te geven in top en left. Dan is er slechts één animatie bezig om de bus van A naar B te krijgen, in plaats van elke 25 miliseconden.

Uiteindelijk lijkt het me ook makkelijker te verwerken, je kunt dan eventueel meerdere animaties achter elkaar starten. Dus (bijv.) eerst top: 200px en left: 100px en daarna top: 0px en left: 500px. Dan creëer je dus een 'pad'.

Zoals je het nu doet zou je dus, na (bijv.) 10 iteraties, een andere animatie starten die een andere kant op gaat, of een andere X-/Y-as verhouding heeft.