.animate z krzywą

Question

Najpierw spójrz:

Kot musi przejść do X w krzywej. (patrz strzałka)

Gdy kot uderzy w x, powinien pozostać 10 sekund, a po tym kot powinien wrócić do o, ponownie w zakręcie i powtórzyć.

Próbowałem z tym kodem:

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

curve(); 

Ale kot porusza się tak:

Czy istnieje sposób, aby dostać kota do poruszania się w tego rodzaju krzywej ?

Answer 1

Można użyć łagodnego na to osiągnąć, wykonując ruch związek:

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

Działa od jQuery 1.4, zgodnie do jQuery docs, a wymienione zalety wymagają interfejsu jQuery UI (ale tylko modułu Effect Core). Każde wywołanie .animate() stanowi jedną czwartą ścieżki pełnego okręgu, a odwrócenie easeInQuad w porównaniu do easeOutQuad powoduje, że ścieżka wygląda jak ścieżka kołowa zamiast prostej do nowej pozycji.

Answer 2

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

Znaleziony to przez googling "jquery ruch promieniowy"

Answer 3

Jest mały skrypt, tylko dla animacji nie w liniach prostych, zwany pathAnimator