.animate với một đường cong

Question

Đầu tiên hãy xem:

Con mèo cần phải di chuyển đến x trong một đường cong . (xem mũi tên)

Khi con mèo chạm vào x, nó sẽ ở lại 10 giây, và sau đó con mèo sẽ quay trở lại o, một lần nữa trong một đường cong và lặp lại.

Tôi đã thử nó với mã này:

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

curve(); 

Nhưng con mèo đang chuyển động như thế này:

Có cách nào để có được những con mèo để di chuyển trong các loại hình đường cong ?

Answer 1

Bạn có thể sử dụng nới lỏng để đạt được điều đó, bằng cách thực hiện một phong trào hợp chất:

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

Nó hoạt động kể từ jQuery 1.4, theo đến jQuery docs và các giá trị được đề cập đến yêu cầu giao diện người dùng jQuery (nhưng chỉ có mô-đun Effect Core). Mỗi tài khoản gọi .animate() chiếm một phần tư đường dẫn vòng tròn đầy đủ và ngược lại easeInQuad so với easeOutQuad làm cho đường dẫn trông giống như đường tròn thay vì thẳng đến vị trí mới.

Answer 2

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

Tìm thấy điều này bằng cách googling "chuyển động xuyên tâm jquery"

Answer 3

Có một kịch bản rất nhỏ, chỉ dành riêng cho hình ảnh động không theo đường thẳng, gọi là pathAnimator