ja, aber wie gesagt, nur über pseudoklassen und damit kann man nicht alles abdecken
hmm, ja, stimmt schon
jquery kann man mitlerweile vorraussetzen, das ist eigentlich immer mit dabei.
DIV rotieren lassen mit JS (kein Canvas)
- Ersteller Yogilein
- Erstellt am
Ja, jetzt funktioniert es.
Mir stellt sich jetzt aber die Frage: Welche Lösung ist performanter (die mit den 2 Klassen oder die mit der Änderung über den Style). Unter performanter meine ich die Geschwindigkeit.
Falls es die 2-Klassen-Lösung ist, müsste ich es noch ein bisschen umschreiben, da ich eine komplette, unendliche Drehung im Uhrzeigersinn benötige.
Ich bin euch auch sehr dankbar, dass ihr meine Frage ernst genommen habt. In anderen Foren kam bei Fragen zur Bilddrehung oft nur Antworten, wie "Lass das, so etwas will doch kein User auf einer HP sehen! Damit vergrault man sie nur." Ich brauche diese Animation aber für ein kleines Spielchen, das sich aktuell noch in der Vorbetaphase befindet.
Wer es sich einmal anschauen möchte: Peng.
Ab Level 2 kommt die Drehbewegung. Ich weiß, dass das nichts Großartiges ist, aber hin und wieder packt es mich und ich versuche mit meinen bescheidenen Kenntnissen etwas umzusetzen.
LG Yogilein
Mir stellt sich jetzt aber die Frage: Welche Lösung ist performanter (die mit den 2 Klassen oder die mit der Änderung über den Style). Unter performanter meine ich die Geschwindigkeit.
Falls es die 2-Klassen-Lösung ist, müsste ich es noch ein bisschen umschreiben, da ich eine komplette, unendliche Drehung im Uhrzeigersinn benötige.
Ich bin euch auch sehr dankbar, dass ihr meine Frage ernst genommen habt. In anderen Foren kam bei Fragen zur Bilddrehung oft nur Antworten, wie "Lass das, so etwas will doch kein User auf einer HP sehen! Damit vergrault man sie nur." Ich brauche diese Animation aber für ein kleines Spielchen, das sich aktuell noch in der Vorbetaphase befindet.
Wer es sich einmal anschauen möchte: Peng.
Ab Level 2 kommt die Drehbewegung. Ich weiß, dass das nichts Großartiges ist, aber hin und wieder packt es mich und ich versuche mit meinen bescheidenen Kenntnissen etwas umzusetzen.
LG Yogilein
was heißt geschwindigkeit? laufzeit? vermutlich die css variante, aber das sollte nicht die rolle spielen, oder?
keyframeanimation
Doch, die Laufzeit spielt schon eine Rolle. Ich gebe bei meinen Spielen immer eine Zeit für eine einzelne Bewegung vor, damit die Bewegung überall gleich schnell abläuft. Ich habe aber leider die Erfahrung machen müssen, dass diese Spiele auf älteren Rechnern teilweise sichtbar langsamer animieren, weil einfach der Browser, die Graka und/oder die CPU das Ganze ausbremsen.
In meinem aktuellen Spiel steuere ich eine Drehbewegung alle 15ms an, so dass eine vollständige Umdrehung 720 x 15 / 1000 = 10,8s dauern sollte und zwar auch auf etwas langsamen Rechnern.
LG Yogilein
In meinem aktuellen Spiel steuere ich eine Drehbewegung alle 15ms an, so dass eine vollständige Umdrehung 720 x 15 / 1000 = 10,8s dauern sollte und zwar auch auf etwas langsamen Rechnern.
LG Yogilein
du gibst also die 10,8 s vor
dann scheinst du nicht die zeit vorzugeben, sondern auf verlässliche intervalle zu vertrauen. das ist aber nicht gegeben.
*gib die animationsdauer vor
*merk dir die startzeit
*ermittle in jedem interval die aktuelle zeit
*berechne aus der zeitdifferenz die neue position anhand deiner gegebenen geschwindigkeit.
da findest du hier auch ein paar beispiele, oder mach es richtig und verwende für sowas ein framework.
kkapsner
Super Moderator
Das stimmt auch wieder. Auch ist die Animation hier auf jeden Fall Funktionalität.
Also in meinen Projekten eher nicht
Das wird nie 10.8s dauern. Immer etwas länger, da JS einfach nicht so genau ist und mit einer recht geringen Priorität läuft. Wenn der Rechner also irgendwas anderes machen will/soll, ist die Wahrscheinlichkeit groß, dass er zuerst das macht und dann erst das JS ausführt.
Dito. Animationen per Hand zu machen ist einfach zu nervig. Schau' dir einfach ein paar Frameworks an und nimm' das, das dir am besten zusagt.
Ich werde versuchen, bei meinen nächsten Anwendungen (Spielen) die Animationen anders zu steuern. Teilweise mache ich das ja schon heute so, z.B. bei einigen Zeitbalken.
Das ganze mit Intervallen anzusteuern kommt daher, da meine ersten Versuche, dies ausführungsabhängig zu machen, irgendwie scheiterten.
Ich kann nicht einfach eine Schleife durchlaufen und schauen, wie lange das gebraucht hat, da Bilder i.d.R. asynchron geschrieben werden. D.h., dass die Schleife durch ist, das Bild ist aber noch nicht auf dem Bildschirm. Jetzt muss ich einen Event-Handler einsetzen, der genau dann feuert, wenn das Bild auch tatsächlich fertig ist. Mit OnLoad geht es schon einmal nicht, da hier schon abgefeuert wird, wenn das Bild komplett geladen ist und nicht erst, wenn es fertig rausgeschrieben ist. Die Complete-Abfrage arbeitet dagegen richtig, allerdings nur, wenn sie in einem DIV liegt, das nicht hidden ist.
Als weiteren und damals maßgeblich Nachteil sah ich, dass ich so zwar ziemlich exakt eine Gesamtzeit vorgeben konnte, mir aber dabei teilweise ruckelnde Bewegungen einhandelte. Logisch, denn die Verschiebung war dann nicht permanent +1px sondern z.B. bei einem langsamen Rechner: +3, +3, +5, +3, ... Das sah nicht mehr flüssig aus und mir war aber eine gleichmäßige, aber durchaus langsamere Bewegung, lieber.
Ich werde es mir auf jeden Fall noch Mal zu Gemüte führen, denn auch die Browser haben in den letzten Jahren gewaltige Fortschritte gemacht (in Bezug auf die JS-Geschwindigkeit).
LG Yogilein
Das ganze mit Intervallen anzusteuern kommt daher, da meine ersten Versuche, dies ausführungsabhängig zu machen, irgendwie scheiterten.
Ich kann nicht einfach eine Schleife durchlaufen und schauen, wie lange das gebraucht hat, da Bilder i.d.R. asynchron geschrieben werden. D.h., dass die Schleife durch ist, das Bild ist aber noch nicht auf dem Bildschirm. Jetzt muss ich einen Event-Handler einsetzen, der genau dann feuert, wenn das Bild auch tatsächlich fertig ist. Mit OnLoad geht es schon einmal nicht, da hier schon abgefeuert wird, wenn das Bild komplett geladen ist und nicht erst, wenn es fertig rausgeschrieben ist. Die Complete-Abfrage arbeitet dagegen richtig, allerdings nur, wenn sie in einem DIV liegt, das nicht hidden ist.
Als weiteren und damals maßgeblich Nachteil sah ich, dass ich so zwar ziemlich exakt eine Gesamtzeit vorgeben konnte, mir aber dabei teilweise ruckelnde Bewegungen einhandelte. Logisch, denn die Verschiebung war dann nicht permanent +1px sondern z.B. bei einem langsamen Rechner: +3, +3, +5, +3, ... Das sah nicht mehr flüssig aus und mir war aber eine gleichmäßige, aber durchaus langsamere Bewegung, lieber.
Ich werde es mir auf jeden Fall noch Mal zu Gemüte führen, denn auch die Browser haben in den letzten Jahren gewaltige Fortschritte gemacht (in Bezug auf die JS-Geschwindigkeit).
LG Yogilein
kkapsner
Super Moderator
Warum musst du überhaupt wissen, wie lange eine "Schleife" (was auch immer du damit meinst...) gedauert hat? Ich dachte, du willst einfach nur konstant animieren. Die Dauer ist da doch total egal. Und den Bezug zu Bildern verstehe ich auch nicht. Die Zeitdifferenz zwischen dem Fertigladen des Bildes und des Rendern auf dem Bildschirm wird sich wahrscheinlich im 10-20ms Bereich liegen und sollte irrelevant sind (wie gesagt - mit ist nicht klar, wofür du die Zeit überhaupt brauchst).
Und wenn du mit Bildern animierst, solltest du die sowieso alle vorher vorladen...
Hast du mal window.requestAnimationFrame() ausprobiert. Damit könnte es etwas flüssiger aussehen.
Deine Spiele sind also einfacher auf langsameren Rechnern... gut zu wissen
Vielleicht drücke ich mich auch falsch aus.
In meine Fall habe ich ein Bild, das ich drehen möchte und zwar in 720 Schritten (= 1/2°). In 360 Schritten sieht's etwas abgehackt aus. Dieses Bild soll nun auf allen Rechnern gleich schnell gedreht werden. Aktuell steuere ich das so an:
Code:
zeit1=window.setTimeout("module.drehen()",15);Das funktioniert super, nur auf extrem langsamen Rechnern dauert die Umdrehung etwas länger, da diese nicht in der Lage sind, in 15ms eine Teildrehung durchzuführen. Und ich habe getestet, dass die Schleife (damit meine ich, dass ich 720 Mal die Funktion aufrufe) so ziemlich genau in 10,8 Sekunden durch ist, aber sich danach der Kreis immer noch dreht. Ich müsste also vor jedem erneuten Teildrehen ermitteln, was bereits auf dem Bildschirm angezeigt wird und davon abhängig die neue Position errechnen. Alternativ könnte ich auch ermitteln, wie lange genau eine Drehbewegung (inkl. Bildschirmanzeige!) benötigt und dann z.B. meine Drehbewegung so ansteuern:
Code:
zeit1=window.setTimeout("module.drehen()",45);Drehe ich jetzt jeweils um 1,5° weiter, habe ich zwar dann wieder einen etwas abgehackten Verlauf, aber eine Umdrehung dauert somit exakt gleich lang, wie auf einem schnellen Rechner.
Nein, nur das eine. Bei all den anderen ist es sogar von Nachteil, wenn die Animationen länger dauern :d
Das kenne ich noch nicht. Dazu muss ich mich erst einmal einlesen aber danke für den Tipp.
kkapsner
Super Moderator
Genau hier hast du schon einen Denkfehler. Mit JS kann man Animationen nicht so genau steuern, dass man die Schrittweite festlegen könnte. Wenn du ein Framework verwenden würdest, müsstest du einfach nur die Zeitdauer angeben und die Schrittweite wird dann automatisch berechnet. Bei einem langsameren Rechner etwas größer und bei einem schnelleren kleiner. So dass die Umdrehungsgeschwindigkeit immer gleich bleibt.
Mit window.setTimeout() und so einer kleinen Wartezeit wirst du das nie hinbekommen. Auch kann so ein Timeout auch gerne mal bis zu ein paar hundert Millisekunden verzögert erst ausgelöst werden (wenn der Rechner gerade etwas wichtigeres zu tun hat - JS läuft mit sehr niedriger Priorität).
Das kann nicht sein. Wenn sich dein Kreis noch dreht, sind noch nicht alle 720 Funktionsaufrufe durchgelaufen. Zeig' mal deinen Testcode dazu her.
genau das macht ein gutes Animations-Framework. Es schaut nach, wieviel Zeit von der Gesamtanimationszeit schon verstrichen ist und platziert die Animationsvariable dann auf den richtigen Wert.
Aber dass der Bildschirm hinter deinen Funktionen "hinterherhinkt" hat damit nichts zu tun und ist auch nur im ms Bereich wahr.
45 ms sind hald auch eher eine realistische Zeit (ich persönlich würde nicht unter 20ms gehen).
Mit einem Framework könnte das dann in etwa so aussehen:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<img src="http://www.yogispiele.de/Spiele/Peng/Rad.png" id="rotate">
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=Animation"></script>
<script type="text/javascript">
kkjs.event.onWindowLoad(function(){
var img= kkjs.$("rotate");
var ani = new kkjs.Animation(img, "rotation", null, 10);
ani.on("finish", rotate);
rotate();
function rotate(){
ani.runCSSTo(360);
}
});</script>
</body>
</html>
Zuletzt bearbeitet von einem Moderator:
Irgendwie funktioniert das Beispiel nicht.
Fehlermeldung: "kkjs" ist undefiniert
Zu meinem Test mit der Zeit: Leider kann ich den Original-Code nicht liefern, da ich ihn auf dem langsamen Laptop zu Testzwecken erstellt habe. Und da der Laptop nicht mir gehört, kann ich aktuell nicht darauf zugreifen.
Ich habe aber versucht den (hoffentlich) gleichen Code auf meinem Rechner zu erstellen. Und bei ihm ist exakt die Drehbewegung zu Ende, wenn auch der Durchgang fertig ist. Nach der Alert-Meldung dreht sich nichts mehr weiter. Auf dem langsamen Laptop, konnte ich sehen, dass sich der Stern nach der Meldung noch etwas weiterdrehte (oder war es sogar während der Meldung???). Mein Verdacht war, dass die Graka nicht schnell genug herausschreiben kann und daher das Ganze zwischenspeichert und dann der Reihe nach abarbeitet.
Hier der Code (wie gesagt, ich hoffe, dass er beim Laptop identisch war):
Noch etwas zu dem Laptop: Das Betriebssystem war XP und der Browser war relativ alt (was mir aber für den Test recht war), eine separate Graka war vorhanden (aber wesentlich langsamer, als heutige, direkt in der CPU integrierte Grakas).
Fehlermeldung: "kkjs" ist undefiniert
Zu meinem Test mit der Zeit: Leider kann ich den Original-Code nicht liefern, da ich ihn auf dem langsamen Laptop zu Testzwecken erstellt habe. Und da der Laptop nicht mir gehört, kann ich aktuell nicht darauf zugreifen.
Ich habe aber versucht den (hoffentlich) gleichen Code auf meinem Rechner zu erstellen. Und bei ihm ist exakt die Drehbewegung zu Ende, wenn auch der Durchgang fertig ist. Nach der Alert-Meldung dreht sich nichts mehr weiter. Auf dem langsamen Laptop, konnte ich sehen, dass sich der Stern nach der Meldung noch etwas weiterdrehte (oder war es sogar während der Meldung???). Mein Verdacht war, dass die Graka nicht schnell genug herausschreiben kann und daher das Ganze zwischenspeichert und dann der Reihe nach abarbeitet.
Hier der Code (wie gesagt, ich hoffe, dass er beim Laptop identisch war):
Code:
<html>
<head>
<script language="JavaScript" type="text/javascript">
z=0;grad=0;
function drehen(){
grad=grad+.5;
if(grad>360)grad=.5;
document.getElementById("Stern").style.WebkitTransform="rotate("+grad+"deg)";
document.getElementById("Stern").style.transform="rotate("+grad+"deg)";
z++;
if(z==10000){alert("Fertig!");return;}
zeit1=window.setTimeout("drehen()",0); //Für den Test auf Null gesetzt
}
</script>
<style type="text/css">
#Stern{position:absolute;left:54px;top:54px;z-index:1;height:332px;width:332px;text-align:center;display:block;}
</style>
</head>
<body onload="drehen();">
<div id="Stern">
<img style="border:0" src="http://www.yogispiele.de/Spiele/Peng/Rad.png" width="332" height="332" alt="">
</div>
</body>
</html>Noch etwas zu dem Laptop: Das Betriebssystem war XP und der Browser war relativ alt (was mir aber für den Test recht war), eine separate Graka war vorhanden (aber wesentlich langsamer, als heutige, direkt in der CPU integrierte Grakas).
Die Fehlermeldung kommt, obwohl ich den Code im Explorer gestartet habe. Da habe ich Internet.
Da waren mehrere Browser installiert. Ausschließen kann ich Opera und Safari. Also kann es der IE (Vers. 8), ein alter FF oder ein alter Chrome gewesen sein.
Dann ersetze mal die 0 durch 15 (da wo mein Kommentar steht). Bei allen halbwegs aktuellen Rechnern sollte es damit rund laufen.
kkapsner
Super Moderator
In meinem FF (der extrem unter Stress steht) ruckelt es dann auch bzw. hängt immer mal wieder.
Welchen Browser verwendest du?
kkapsner
Super Moderator
Das ist wirklich sehr seltsam. Hab's jetzt mal auf meinen Server hochgeladen: Fenstertitel
Extra in einer VM getestet, ob's da auch geht.
Extra in einer VM getestet, ob's da auch geht.
Ja, der Link funktioniert.
Jetzt muss ich wohl noch einmal testen, warum es bei mir nicht gehen will.
Aber noch eine wichtige Frage: Drehst du das Bild oder das DIV? Für meine Anwendung müsste das DIV gedreht werden, da darauf noch weitere Bilder sind (an jedem Ausläufer des Sterns hängen kleine Zielscheiben, die ich bei einem Treffer einfach ausblende).
Jetzt muss ich wohl noch einmal testen, warum es bei mir nicht gehen will.
Aber noch eine wichtige Frage: Drehst du das Bild oder das DIV? Für meine Anwendung müsste das DIV gedreht werden, da darauf noch weitere Bilder sind (an jedem Ausläufer des Sterns hängen kleine Zielscheiben, die ich bei einem Treffer einfach ausblende).