.animate用曲線

enter image description here

貓需要移動到X在曲線。（見箭頭）

當貓碰到x時，它應該保持10秒，之後貓應該回到o，再次在曲線中，並重復。

我用這個代碼試了一下：

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

curve();

但貓正朝着這樣的：

enter image description here

有沒有辦法讓貓在這種曲線的移動？

來源

2011-11-22 bernte

http://stackoverflow.com/questions/2240052/how-would-you-animate-something-so-that-it-遵循曲線 – RightSaidFred

YUI還提供對曲線動畫的支持。 http://developer.yahoo.com/yui/examples/animation/control.html –

您可以使用寬鬆實現這一目標，通過做複合運動：

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

它的工作原理，因爲jQuery的1.4，根據到jQuery docs，並提到的緩解需要jQuery UI（但只有Effect Core模塊）。每個.animate()通話帳戶佔四分之一圓的路徑，反向easeInQuad與easeOutQuad使路徑看起來像一個圓形路徑，而不是直接到達新位置。

來源

2011-11-22 21:11:17 matehat

喜matehat！我在我的錯誤控制檯中出現此錯誤：錯誤：f.easing [e.animatedProperties [this.prop]]不是函數源文件：file：/// C：/ Dokumente％20und％20Einstellungen/Administrator/Desktop/tyler/js/js/jquery-1.6.4.min.js Line：4 – bernte

您可能需要包含jQuery UI（僅影響核心部分），此[文件]（https://github.com/jquery/ jquery-ui/blob/master/ui/jquery.effects.core.js）。 – matehat

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

通過谷歌搜索「jquery的徑向運動」發現這個

來源

2011-11-22 20:51:14 Mathletics

有一個小劇本，只是不以直線的動畫，堪稱pathAnimator

來源

2013-04-24 13:06:10 vsync

回答

相關問題