Objekt kontinuierlich drehen

V

Verrain

New member
Ich möchte gerne ein Objekt kontinuierlich drehen, dafür habe ich ein einfach Objekt gebastelt, später soll das natürlich ein Bild sein.

Code: 
<!DOCTYPE html>
<html>
<body>

<div id="drehobject" class="aussehen">Drehen</div>
<button onclick="f_objdrehen()">drehen</button>

<script>
var zpos=0;

function f_objdrehen()
{
        z++;
        if(zpos>359)zpos=0;
        var dz=document.getElementById("drehobject");
        dz.style.MsTransform = "rotate("+zpos+"deg)";
        dz.style.MozTransform = "rotate("+zpos+"deg)";
        dz.style.OTransform = "rotate("+zpos+"deg)";
        dz.style.WebkitTransform = "rotate("+zpos+"deg)";
        dz.style.transform = "rotate("+zpos+"deg)";
        window.setTimeout("f_objdrehen()", 1)
    }
}
</script>

<style type="text/css"> .aussehen{ width:100px; height:1px; position:relative; left:100px; top:0; /*background-color:#000;*/ border-top-width:2px; border-top-style:solid; border-top-color:#000000; } </style>

</body>
</html>

2 Probleme:

Problem a:
Ich möchte gern, dass das Bild JEDESMAL beim Drücken auf den Button um x Grad gedreht wird. So wie der Code jetzt ist, dreht sich das Objekt nach dem ersten Klick kontinuierlich ohne aufzuhören. Habe es mit einer for und while Schleife versucht, dann habe ich aber das Problem, dass er für

Code: 
(while zpos<30)
{Anweisungsblock}

das objekt komplett um 30 Grad dreht (nicht kontinuierlich!)

Problem b: Ebenfalls bei der whileschleife funktioniert das ganze nur einmal. Ich drücke auf den Button und das Objekt wird um 30 Grad gedreht. Drücke ich erneut darauf, passiert nichts :(.
 
Da sind noch Fehler in dem Code, den Du gepostet hast: Es muss zpos++ heißen und es war eine schließende Klammer zuviel.
Dass es mit deiner while-Schleife nicht funktioniert, liegt daran, dass diese sehr schnell durchläuft, ohne Verzögerung zwischen den einzelnen Schritten.
Du musst das setTimeout() beibehalten und einen Zähler für die Schritte führen, um feststellen zu können, wann die 30 Grad voll sind:
Code: 
<script>
    var zpos = 0, zaehler = 0;

    function f_objdrehen() {
        zpos++;
        if (zpos > 359) zpos = 0;
        var dz = document.getElementById("drehobject");
        dz.style.MsTransform = "rotate(" + zpos + "deg)";
        dz.style.MozTransform = "rotate(" + zpos + "deg)";
        dz.style.OTransform = "rotate(" + zpos + "deg)";
        dz.style.WebkitTransform = "rotate(" + zpos + "deg)";
        dz.style.transform = "rotate(" + zpos + "deg)";
        zaehler++;
        if (zaehler < 30) {
            window.setTimeout("f_objdrehen()", 1);
        } else {
            zaehler = 0;
        }

    }
</script>
 
Zuletzt bearbeitet:
Uiuiui - globale Variablen, String als Parameter von window.setTimeout(), zu kleiner Timeoutwert, so dass die Animation in verschiedenen Browsern/Maschinen unterschiedlich aussieht...

Ich würde mir dafür ja ein Framework holen oder mit CSS-Animations arbeiten:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#rot {
	transition: transform 0.3s;
	transform-origin: 50%;
	width: 100px;
	background-color: red;
}
</style>
</head>
<body>
<div id="rot"> hallo</div>
<script type="text/javascript">
(function(){
	var angle = 0;
	document.getElementById("rot").onclick = function(){
		angle = angle + 30;
		this.style.transform = "rotate(" + angle + "deg)";
	};
}());</script>
</body>
</html>
- getestet in FF36, IE10 und Chrome41.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben