Girar imagen

fernandaYO · #1 (**permalink**) 02/03/2012, 13:43

Buenas Tardes.

Tengo una inquietud que no he podido resolver en ningun lado.

Tengo unos engranes, y quiero animarlos, que giren en su eje, una animacionsita sencilla pero que necesito hacerla en java, y no encuentro como hacerlo, por que soy nueva en este campo, quien pueda ayudarme Graciasss!!!

daPhyre · #2 (**permalink**) 02/03/2012, 14:11

¿Tienes que hacerla en Java o Javascript? En caso del segundo ¿Algún método en especial? Es más sencillo con Canvas, pero si es necesario que sea elemento imagen del HTML, creo que tambien es posible...

Panino5001 · #3 (**permalink**) 02/03/2012, 14:19

Otra posibilidad, manipulación de estilos:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#cont{ position:absolute; left:50%; top:50%; margin-top:-175px; margin-left:-250px; cursor:pointer; width:500px; height:350px;}
#cont img{ position:relative}
</style>
<script type="text/javascript">
function rotate(angle){
    var rotation = Math.PI * angle / 180;
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation); 
    if(!window.ActiveXObject){
        this.style.position='absolute';
        this.style.webkitTransform ='rotate('+angle+'deg)';
        this.style.khtmlTransform ='rotate('+angle+'deg)';  
        this.style.MozTransform='rotate('+angle+'deg)';    
        this.style.OTransform='rotate('+angle+'deg)';
        this.style.transform='rotate('+angle+'deg)';
    }else{
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        this.filters.item(0).M11 = costheta;
        this.filters.item(0).M12 = -sintheta;
        this.filters.item(0).M21 = sintheta;
        this.filters.item(0).M22 = costheta; 
        this.style.top= ((this.parentNode.offsetHeight/2)-(this.offsetHeight/2))+'px';
        this.style.left=  ((this.parentNode.offsetWidth/2)-(this.offsetWidth/2))+'px';
    }
}
var ns={};
onload=function(){
        var _this=document.getElementById('im');
        ns.angulo=ns.angulo || 0;
        ns.timmer=setInterval(function(){rotate.call(_this,ns.angulo+=5)},30);
}
</script>

</head>

<body>
<div id="cont"><img id="im" src="http://www.disegnocentell.com.ar/arwen.jpg" width="500" height="350"  /></div>

</body>
</html>

fernandaYO · #4 (**permalink**) 02/03/2012, 14:41

Gracias por sus respuestas.

Explico mejor el panorama, debo hacerlo en javascript, son 2 imágenes -engranajes?-, que deben tener, como se diría en flash, "interpolación de movimiento", y cuando se acerquen, empiecen a girar, indefinidamente,

pues lo de acercarse creo que ya lo encontré pero no encuentro el codigo para hacer que giren indefinitdamente.

Muchas gracias a ambos, miraré el codigo que han puesto.