Comunidad de diseño web y desarrollo en internet

control de Object.animate([ ],{ },{ }) rotacion infinita

Citar            
MensajeEscrito el 07 Mar 2017 07:30 pm
Estube buscando por internet la manera de controlar animate, como por ejemplo , en el supuesto que tubieramos:

Código :

<html id='H'><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false">
<script>
var O=document.createElement('div');
var b=document.getElementById('b');
O.textContent='hola mundo';O.style.position='absolute';O.style.top='100px';O.style.left='100px';
b.appendChild(O);
O.animate([{transform:'rotate(0deg)'},{transform:'rotate(360deg)'}],{duration:1000,iterations:Infinity});

</script>
</html>


que por lo visto esto es imparable a menos que hagamos un O.remove(), la unica manera de solucionarlo para controlar es acotar a 1 las iteraciones y volver a repetir la funcion recursivamente para ello tuve que crear el siguiente prototype:

Código :

<html id='H'><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false">
<script>
Object.prototype.animacio=function(...a){var I=this;
   
   if(I.animacio.disabled==null){I.animacio.disabled=false;}else{if(I.animacio.disabled==true){I.animacio.disabled=false};};
   
   function A(){I.animate([{transform:a[0]},{transform:a[1]}],{duration:a[2],iterations:1});if(!this.animacio.disabled){setTimeout(A,a[2]);}else{return false;};};
   if(!this.animacio.disabled){A();}
}
   
var O=document.createElement('div');
var b=document.getElementById('b');
O.textContent='hola mundo';
O.style.position='absolute';O.style.top='100px';O.style.left='100px';O.style.cursor='pointer';

b.appendChild(O);
O.onclick=function(){O.animacio('rotate(0deg)','rotate(360deg)',400);}
window.ondblclick=function(){O.animacio.disabled=true;O.style.transform='rotate(360deg)';}



</script>
</html>


Sin embargo el problema que tiene esto es que logicamente cuando hacemos dobleclick el objetoElemento necesita recorrer 360 grados para parar.

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 10 Mar 2017 12:55 pm
bueno la pregunta en si a todo esto seria como en este caso podriamos para la animacion sin que tuviera que recorrer los 360 grados, podria poner el valor 359 y cambiar el valor switch sin embargo buscando desde google me pone que hay algunas opciones para parar la animacion pero ninguna de ellas me ha funcionado.

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.