¿Cómo se sigue el div animado de jQuery en la pantalla?

Question

Estoy usando jQuery.crSpline para animar un gráfico a lo largo de una trayectoria curva. Estoy muy feliz con el resultado.

Sin embargo, el tamaño del lienzo completo es intencionalmente bastante amplio, definitivamente más grande que la mayoría de las pantallas, por lo que el gráfico se agotará rápidamente y se animará fuera de la pantalla.

En su lugar, me gustaría que la ventana del navegador siga o centre la imagen para que permanezca 'en disparo'.

¿Cómo podría hacer esto con jQuery? ¿Es scrollTop una opción?

He creado un jsFiddle demo, basado en el crSpline demo source, pero con una configuración amplia de minX.

---

NB: Me consiguió por primera vez esta con YUI3 y Loktar ofreció un lienzo basado solution, sin embargo no estoy usando YUI & lienzo por más tiempo.

Answer 1

Existe una opción para la función step en jQuery animate, que se ejecuta en cada paso de la animación.

Véase la segunda versión de los parámetros de función aquí:

.animate(properties, options) 

propertiesA map of CSS properties that the animation will move toward. 

optionsA map of additional options to pass to the method. Supported keys: 

duration: A string or number determining how long the animation will run. 
easing: A string indicating which easing function to use for the transition. 
complete: A function to call once the animation is complete. 
step: A function to be called after each step of the animation. 
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. 
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4). 

ver este violín basa en el código, que llama step función para ajustar la ventana gráfica:

http://jsfiddle.net/gNdwD/35/

$('<div id="mover" />') 
     .appendTo($(document.body)) 
     .animate({ crSpline: spline },{ 
      duration: 20000, 
      step: function() {  /* THE STEP FUNCTION TO ADJUST VIEWPORT */ 
       var mover = $('#mover'),    
       posX = mover.position().left; 
       posY = mover.position().top; 

       $(window) 
       .scrollLeft(posX - $(window).width()/2) 
       .scrollTop(posY - $(window).height()/2); 
      } , 
      complete:function() { 
         // Re-run the demo with a new spline after we're done 
         window.setTimeout(function() { 
         DEMO.run(); 
         }, 5000); 
      } 
     }); 

Answer 2

¿Es esto lo que tenía en mente? http://jsfiddle.net/gNdwD/33/. Parece un poco agitado, pero es un primer intento difícil.

No parece como crSpline expone ningún coordenadas en el elemento animado así que tenemos que observar periódicamente ellos y ajustar el área de visualización en consecuencia:

setInterval(function() { 

    var mover = $('#mover'), 
     posX = mover.position().left, 
     posY = mover.position().top; 

    $(window) 
     .scrollLeft(posX - $(window).width()/2) 
     .scrollTop(posY - $(window).height()/2); 
}, 10); 

Sospecho que la choppiness sucede porque nuestra setInterval no se han sincronizado con $.animate en el transportador. Puede solucionarlo ejecutando dos animaciones: una en el motor y otra en el scrollTop y scrollLeft de un envoltorio div. Puede aplicar simultáneamente dos $.animate como this.