.animate con una curva

Question

Primero echar un vistazo:

El gato necesita para pasar a la x en una curva. (vea la flecha)

Cuando el gato golpea la x, debe permanecer 10 segundos, y luego el gato debe volver a o, nuevamente en una curva, y repetir.

he probado con este código:

function curve() { 
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() { 
     $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() { 
      curve(); 
     }); 
    }); 
} 

curve(); 

Pero el gato se está moviendo de esta manera:

¿Hay una manera de conseguir que el gato para mover en este tipo de curva ?

Answer 1

Puede utilizar aliviando para lograr que, al hacer un movimiento compuesto:

function curve() { 
    $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, { 
     duration: 500, 
     specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, 
     complete: function() { 
     $('#cat').animate({top: "-=20px", left: "+=20px"}, { 
      duration: 500, 
      specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'}, 
      complete: function() { 
      // repeat the other way around. 
      }}); 
     } 
    }); 
} 

Funciona desde jQuery 1.4, de acuerdo a jQuery docs y las facilidades mencionadas requieren jQuery UI (pero solo el módulo Effect Core). Cada llamada .animate() representa un cuarto de una ruta de círculo completo, y la inversa easeInQuad frente a easeOutQuad hace que la ruta parezca una ruta circular en lugar de recta a la nueva posición.

Answer 2

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

encontramos por googlear "movimiento radial jquery"

Answer 3

Hay un pequeño script, sólo para animación no en línea recta, llamados pathAnimator