css transform y obtener la posición actual

cequiel · #1 (**permalink**) 04/11/2011, 16:31

Muchos de ustedes sabréis que ahora se puede modificar la posición de un elemento dentro de una página web aplicando css. Por ejemplo:

Código CSS:

Ver original#mydiv {
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -moz-transition-timing-function: ease-out;
        -moz-transform: translate(100px, 100px);
}

Si aplicamos el anterior css a mi objeto html:

Código HTML:

Ver original<div id="mydiv">Me deslizo suavemente como hoja mecida por el viento</div>

entonces el objeto cambia de posición suavemente y se coloca en las coordenadas (100, 100) dentro de la página web, sin necesidad de JavaScript. El problema viene cuando queremos calcular la posición exacta dentro de la página en un momento dado. Si habéis usado alguna vez jQuery, sabréis que la posición se obtiene mediante la función "offset":

Código Javascript:

Ver originalvar offset = $('#mydiv').offset(); // devuelve un objeto con la posición actual

El problema es que la función anterior ignora la transformación css y me devuelve un valor erróneo. Cómo podría calcular la posición de un objeto dentro de una página web a la que se ha aplicado una transformación css?

Muchas gracias.

Panino5001 · #2 (**permalink**) 04/11/2011, 20:06

Tendrías que estudiar acerca de cómo funcionan las matrices de transformación. Un buen link para entenderlo es este: http://www.senocular.com/flash/tutor...ansformmatrix/
(que no te confunda que hable de flash, es aplicable 100% a canvas y css3).
Una vez comprendido el funcionamiento, podés en cualquier momento obtener los valores de estilos computados para realizar tus cálculos:

Código PHP:

  <!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 type="text/css">
#mydiv{ 
width:400px; height:20px; background:#F00;
    -moz-transition-property:-moz-transform;
    -moz-transition-duration:3s;
    -moz-transition-timing-function:ease-out;
    
}
.mover{-moz-transform:translate(100px,100px);}
</style>
<script type="text/javascript">
function mover(){
    document.getElementById('mydiv').className='mover';
    control();
}
function control(){
    document.getElementById('log').innerHTML=window.getComputedStyle(document.getElementById('mydiv'),null).getPropertyValue('-moz-transform')    ;
    setTimeout(control,50);
}
</script>

</head>

<body>
<div id="mydiv">Me deslizo suavemente como hoja mecida por el viento</div>
<form id="form1" name="form1" method="post" action="">
  <label>
    <input type="button" name="button" id="button" value="mover" onclick="mover();" />
  </label>
</form>
<div id="log"></div>
</body>
</html>

cequiel · #3 (**permalink**) 05/11/2011, 09:03

Gracias Panino5001. Pensaba que habría alguna función en javascript que te devolviese la posición exacta del elemento. Intentaré hacerlo así, qué remedio.

cequiel · #4 (**permalink**) 06/11/2011, 19:33

Después de investigar un poco he descubierto que el problema de la posición ocurre sólo en Firefox. El resto de los exploradores me devuelven la posición correcta. Si estáis usando la librería jQuery (os lo recomiendo), la forma de arreglar esto es sobreescribir la función "offset":

Código Javascript:

Ver original(function($) {
    var originalMethod = $.fn.offset;
    
    $.fn.offset = function() {
        var target = $(this);
        var offset = originalMethod.apply(this, arguments);
        var transform = target.css('-moz-transform');
        if ((transform != null) && (transform.length > 0)) {
            var re = /matrix\((.*)\)/;
            var result = re.exec(transform);
            if (result != null) {
                var params = result[1].split(',');
                var x = -target.width() / 2;
                var y = -target.height() / 2;
                var a = parseFloat(params[0]);
                var b = parseFloat(params[1]);
                var c = parseFloat(params[2]);
                var d = parseFloat(params[3]);
                var tx = parseFloat(params[4]);
                var ty = parseFloat(params[5]);
                offset.left += (a - 1) * x + c * y + tx;
                offset.top  += b * x + (d - 1) * y + ty;
            }   
        }
        return offset;
    }
})(jQuery);

Lo que estamos haciendo con el código de arriba es "arreglar" la función offset() de jQuery de manera que devuelva la posición correcta de un elemento al que se le ha aplicado una transformación.

Albuss · #5 (**permalink**) 17/02/2012, 20:30

Cita:

Iniciado por Panino5001

Tendrías que estudiar acerca de cómo funcionan las matrices de transformación. Un buen link para entenderlo es este: [url]http://www.senocular.com/flash/tutorials/transformmatrix/[/url]
(que no te confunda que hable de flash, es aplicable 100% a canvas y css3).
Una vez comprendido el funcionamiento, podés en cualquier momento obtener los valores de estilos computados para realizar tus cálculos:

Código PHP:

  <!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 type="text/css"> 
#mydiv{  
width:400px; height:20px; background:#F00; 
    -moz-transition-property:-moz-transform; 
    -moz-transition-duration:3s; 
    -moz-transition-timing-function:ease-out; 
     
} 
.mover{-moz-transform:translate(100px,100px);} 
</style> 
<script type="text/javascript"> 
function mover(){ 
    document.getElementById('mydiv').className='mover'; 
    control(); 
} 
function control(){ 
    document.getElementById('log').innerHTML=window.getComputedStyle(document.getElementById('mydiv'),null).getPropertyValue('-moz-transform')    ; 
    setTimeout(control,50); 
} 
</script> 
 
</head> 
 
<body> 
<div id="mydiv">Me deslizo suavemente como hoja mecida por el viento</div> 
<form id="form1" name="form1" method="post" action=""> 
  <label> 
    <input type="button" name="button" id="button" value="mover" onclick="mover();" /> 
  </label> 
</form> 
<div id="log"></div> 
</body> 
</html>

La función control obtiene -moz-transform , pero .. ¿donde los escribe? , lo siento si parece na pregunta ovbia pero soy un poco lento en esto de los script :(

Panino5001 · #6 (**permalink**) 17/02/2012, 20:49

En la capa que está debajo del botón (la que tiene "log" como valor del atributo html id) aparecen los valores de la matriz de transformación, que se actuaizan cada 50 milisegundos. (Es un ejemplo preparado para Firefox)

Albuss · #7 (**permalink**) 17/02/2012, 22:37

Okey, la funcion Control obtiene valores matriz de transformación , y ademas puedo asignarle el tiempo en ms que quiera en la funcion setTimeout (tu pones 50ms).

Mi siguiente pregunta es ¿como puedo insertar esa llamada a la función control dentro de un archivo css?

Ejemplo

@keyframe Ejemplo {
0% {transform:rotate(AQUÍ ES DONDE me interesa insertar la llamada a la función)deg);}

100% {tranform:rotate(-45deg);}

}

Lo que me interesa de esto, es que si tengo una animacion ejecutandose y hago que un evento ejecute otra animacion para el mismo objeto (vease por ejemplo un div), no se corte y la nueva animacion empiece desde donde se paro la otra por la llamada al evento.

Panino5001 · #8 (**permalink**) 18/02/2012, 09:09

No olvides que siempre podés, vía javascript, monitorear las animaciones css con listeners, asociándolas a los eventos animationstart (aparentemente este es el que buscás), animationiteration y animationend:
https://developer.mozilla.org/en/DOM...AnimationEvent
https://developer.mozilla.org/en/CSS/CSS_animations

Albuss · #9 (**permalink**) 20/02/2012, 12:11

He leido atentamente la entrada sobre AnimationEvent que me has linkeado, te lo agradezco, pero sigo estan confuso, creo que tenemos un problema de comunicacion, quizas yo no he sabido expresar bien lo que trataba de hacer.

Tu posteaste una funcion para recuperar la posicion de un objeto en el documento :

Código:

function control(){ 
    document.getElementById('log').innerHTML=window.getComputedStyle(document.getElementById('mydiv'),null).getPropertyValue('-moz-transform')    ; 
    setTimeout(control,50); 
}

Esta funcion nos devuelve las posiciones cada 50ms

Luego en la entrada que tu me linkeaste, pone un ejemplo de sintaxis para un Listener Event :

Código:

void initAnimationEvent(in DOMString typeArg);

DOMString Es el array del nombre de la animacion que le pasamos como argumento.

y typeArg es el tipo especifico de animacion que le pasamos, por ejemplo : "animationstart"

Mi pregunta es la siguiente , Si yo lo que siempre he querido, es asignar el valor de la funcion "Control" a una parte de mi keyframe.

¿Como hago para que un listener asigne un valor?

y reitero, es algo bastante sencillo, es en esencia continuar desde un valor de la anterior animacion. Quizas no sea tan complicado, he buscado sin éxito algún comando CSS para esto que quiero hacer.

Panino5001 · #10 (**permalink**) 20/02/2012, 12:34

Algo que supuse obvio pero que quizá no lo es tanto: desde javascript podés tomar los estilos computados en cualquier momento. Es decir, desde javascript es posible, siempre tomar los valores css de un elemento. Pero esto mismo no es posible desde css. En css no podés tomar valores definidos en javascript. A lo sumo, lo que podés hacer es, vía javascript, reasignar los valores css de un elemento para modificar su visualización con un redibujado. Esto último podés hacerlo modificando la propiedad style de un elemento o agregando nuevas reglas css a tu documento. En resumen, si lo que querés es ejecutar código javascript dentro de código css, eso no es posible (en antiguas versiones de explorer podía usarse un invento de microsoft llamado expression y en Firefox por un tiempo podía lograrse algo llamando a archivos xml, pero son excepciones a la regla general de mantener separada la lógica de la visualización -regla que con html5 se fue al diablo de todas maneras, pero esa es otra historia-)

Albuss · #11 (**permalink**) 20/02/2012, 20:13

Okey, ahora nos entendemos, me era una obviedad esquiva.

Desde el DOM, ¿como puedo acceder a una hoja de stilo y desde esta, como puedo acceder a cualquier elemento de la misma?, es este caso un keyframe.