.animate con una curva

Question

prima dare un'occhiata:

Il gatto ha bisogno di muoversi per la x in una curva. (vedi la freccia)

Quando il gatto colpisce la x, dovrebbe rimanere 10 secondi, dopodiché il gatto dovrebbe tornare ao, ancora in una curva, e ripetere.

ho provato con questo codice:

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

curve(); 

Ma il gatto si muove in questo modo:

C'è un modo per ottenere il gatto a muoversi in questo tipo di curva ?

Answer 1

È possibile utilizzare facilitando il raggiungimento di tale, facendo un movimento composto:

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. 
      }}); 
     } 
    }); 
} 

Funziona dal jQuery 1.4, secondo a jQuery docs e gli easings menzionati richiedono l'interfaccia utente jQuery (ma solo il modulo Effect Core). Ogni account di chiamata .animate() per un quarto di un percorso di full circle e il contrario easeInQuad rispetto a easeOutQuad rende il percorso simile a un percorso circolare anziché direttamente alla nuova posizione.

Answer 2

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

trovato questo googling "movimento radiale jquery"

Answer 3

C'è uno script molto piccolo, solo per l'animazione non in linea retta, chiamato pathAnimator