¿Cuáles son las mejores prácticas para mover elementos con javascript?
¿El uso de los tiempos de espera o los intervalos?
Es malo se han programado eventos de 10 milisegundos, o será preciso?
¿Usted se mueve de un pixel por un pixel, o una cierta fracción de la distancia total?
Si utiliza intervalos, ¿cómo se puede detener el intervalo cuando el elemento está en la posición?

Las dos últimas veces que he visto movimiento en javascript han sido con jQuery y Raphael.js, ninguno de los cuales puedo entender el código fuente de. Hay algunos buenos tutoriales o ejemplos de código en cualquier lugar? Hay una explicación simple de los métodos de jQuery utiliza?

InformationsquelleAutor mowwwalker | 2011-10-29

3 Comentarios

  1. 4

    Hay una reciente función llamada requestAnimationFrame que ejecuta una función tan pronto como sea posible. Esta es una buena práctica, ya que ha sido hecho por motivos de animación.

    La forma en que funciona en términos de la codificación es la misma que setTimeout, por ejemplo, cuando la función termina de llamar requestAnimationFrame.

    En la función, tienes que obtener la hora actual para ver cómo el objeto se coloca en ese momento.

    Puede cancelar una función pendiente con cancelRequestAnimationFrame, pasando el valor de retorno de requestAnimationFrame.

    Actualmente esto no es cross-browser y las funciones de los vendedores-el prefijo, por ejemplo, webkitRequestAnimationFrame para Chrome.

    E. g.: http://jsfiddle.net/pimvdb/G2ThU/1/.

    var div = document.getElementById('div');
    var animation;
    
    function move() {
        var time = Math.round((new Date()).getTime() / 10) % 200;
    
        div.style.left = time + 'px';
    
        animation = requestAnimationFrame(move);
    }
    
    document.getElementById("start").onclick = function() {
        animation = requestAnimationFrame(move);
    }
    
    document.getElementById("stop").onclick = function() {
        cancelRequestAnimationFrame(animation);
    }
  2. 1

    Intervalos son preferibles, creo, porque sólo se establece una vez que en el código en lugar de una vez por fotograma. Sólo se necesita leer el código una vez y reutilizar varias veces, en lugar de leer cada vez que se crea.

    10ms es un poco corto. El equipo puede soportar de forma nativa intervalos de 16ms, luego más precisa de los temporizadores pueden ser utilizados para el más rápido de los intervalos, sin embargo estos son muy consumidoras de energía. IE9 es compatible tanto, dependiendo de la configuración de energía del equipo, pero lo ideal sería que usted no necesita nada más rápido que 50ms (20 FPS).

    Me gusta mover una fracción de la distancia total, basado en el tiempo que ha pasado desde la animación comenzó. De esta manera, no importa lo que la velocidad de la computadora y el navegador, la animación siempre tendrán la misma cantidad de tiempo. Garantizado.

    Algo como:

    interval = setInterval(function() {
        //do stuff
        if( /*animation ended*/) clearInterval(interval);
    },time);

    jQuery es fácil para algunos, pero personalmente creo que nada mejor que escribirlo en la llanura, de edad de JS. Mucho más fácil entender lo que está pasando exactamente, en lugar de confiar en algún marco para obtener el derecho para usted.

    • ¿Cómo puedo hacer que los más dinámicos, aunque? Quiero ser capaz de eliminar el intervalo utilizando la función, no sólo es necesario especificar un exacto. No sé cómo un intervalo pasaría sí misma, aunque..
    • Si la variable está definida en el cierre con var, y no sobrescribir en que el cierre, no hay nada malo con esto.

Dejar respuesta

Please enter your comment!
Please enter your name here